Transcrições
1. Introdução: Esta semana
vamos selecionar tipos de letra para um design de interface do usuário. Vamos começar
falando sobre o que faz uma boa
combinação de tipografia. O que faz um bom corpo de
texto e o que faz um bom texto de exibição e
tem que emparelhá-los. E então o projeto em que você
trabalhará nesta semana
será escolher um artista
que você gosta. Pense sobre as características
que o artista tem
e, em seguida, encontre uma exibição
e textos corporais que combinem
com o estilo de arte,
bem como combinam bem entre si. tipografia compõe
quase tudo o que vemos na Internet
e as habilidades que aprendemos esta semana nos ajudarão a escolher os melhores tipos de letra
para nossos designs de interface do usuário. Vamos começar.
2. Inspiração: Agora, antes de podermos
começar a selecionar qualquer tipo de letra, precisamos encher nosso
cérebro com inspiração. Precisamos olhar para projetos de todos os setores diferentes e ter uma noção do que está por aí. Que tipos
diferentes nos fazem sentir. Realmente, devemos
gastar bastante
tempo e provavelmente
regularmente
Olhando para outros trabalhos de tempo e provavelmente
regularmente design e contemplando o que
ele comunica, o que ele diz para nós e
como nos sentimos sobre isso. Também nos dá ideias sobre
como podemos usar o tipo de letra. Como disse Pablo Picasso, bons artistas copiam,
grandes artistas roubam. Agora, não queremos
necessariamente estar roubando
diretamente o trabalho das pessoas, mas queremos nos inspirar por coisas boas que
vimos lá fora na indústria
do design. Agora eu sempre defendo
olhar para tipos evitados de design, não web design, não design de aplicativos, mas olhando para o design como um todo para que tenhamos uma gama
muito mais ampla de inspiração e possivelmente
criamos algo um pouco mais único ou sabia que outros designers
da indústria não são. Poderíamos chegar a um site
como inspiração de design. Obviamente, há muitos sites de
inspiração de
design, mas poderíamos criar inspiração e procurar tipografia. E vamos ver
muitas letras manuscritas, se eu for honesto ou bem
descolado ilustrações
usando letras. Mas todas essas cartas
vão nos dar um sentimento. Eles vão
nos dar uma sensação de que pertencem a alguma coisa. Esta carta aqui ou este número. Parece muito real, parece muito importante. Parece valioso. E parece um pouco delicado. E acho que é por causa
da enorme quantidade de contrastes
entre as grandes áreas grossas
e as linhas muito finas. E possivelmente porque há apenas algumas áreas ligeiramente
retas,
parece e se
estivéssemos procurando algo que comunicasse
essas características, talvez estivéssemos trabalhando para uma
marca ou marca de joias de alto valor ,
por exemplo, então
podemos procurar um tipo de letra que tenha
essas características, mas seja muito mais
simples, mais claro
e fácil de ler quando
chegamos a escolher um tipo de letra. Agora você pode dizer, bem, isso está tudo bem e bom. Estou fazendo um aplicativo para um banco. Então, por que eu iria querer algo com esses tipos
de características? Bem, na verdade, eu,
o
banco ainda terá muitas características muito
específicas. E eu escolhi essas cartas aqui de uma
partida de futebol pela aparência dela. Parece muito seguro, muito seguro, muito confiável e
definitivamente funcionaria em
um site bancário. E então minha pergunta
é, por que isso? É porque são letras
muito grossas ou é porque as letras
não têm nenhum contraste? Tem a ver com o
rastreamento desses um pouco de espaço entre cada letra. Tem mesmo a ver
com o alinhamento, como isso é centralizado e o texto está alinhado
centralmente. Há muitas
decisões tipográficas que entraram neste pôster muito simples
que o tornam meio plano confiável tipo de sentimento que funcionaria para um aplicativo
bancário. Vamos tentar pensar
sobre o que são agora para que, quando chegamos
a escolher nossos tipos de letra, tenhamos algumas idéias do
que estamos procurando. Agora, eu ainda poderia usar inspiração de
design e próxima, e apenas procurar por tipografia
na web. Então eu entendo coisas
um pouco mais específicas e
você começará a ver algumas ideias de
aplicativos da Web reais começarem a aparecer. Mas talvez neste momento
queremos mudar para
uma
galeria de inspiração diferente como esta, fontes em uso porque, à medida
que nos
tornarmos mais específicos, estaremos questionando
quais são essas fontes? Posso acessá-los? Uma coisa que é muito
boa com fontes e usos, vemos muitos designs
diferentes, mas também descobrimos quais tipos de letra reais
eles estão usando. Então, da mesma forma que
acabamos de tentar nos
inspirar em
diferentes mídias. Poderíamos olhar aqui e
a menos que vejamos muitas capas de álbuns
e cartazes e todo tipo de coisas. Ou talvez neste momento
queremos começar a
filtrar com base em coisas
que são bastante semelhantes a nós. Poderíamos olhar para sites, talvez pudéssemos
olhar para a embalagem. Quero dizer, talvez haja alguma inspiração interessante
que possamos obter da embalagem. À medida que pesquisamos aqui, podemos pegar quais são
os tipos de letra. E às vezes esse
tipo de letra pode não estar disponível
para nós por vários motivos, mas saber o que
vai nos
ajudar a encontrar algo semelhante. Algumas outras galerias de
inspiração úteis, temos lobo tipo. Agora, isso novamente tem
alguns designs muito legais, mas também diz
quais são os tipos de letra. Então isso é absolutamente
brilhante e estes são um pouco mais simples e claros e um pouco mais
parecidos com o que você realmente vai
usar em seu site. Muito bom para alguma inspiração no estágio
posterior. O que é muito bom com
o site tipo lobo é como se eles
estivessem escrevendo muitos posts também se você quiser realmente nerd out na tipografia, este é outro
bom lugar para vir. E, por último, quero
mostrar a exploração do tipo onde essas pequenas maquetes de ela
poderia
parecer em nosso site. Elementos de IU interativos
em cabeçalhos e links. Assim, você pode ver
exatamente
como será se estivesse em
um aplicativo da Web. Portanto, isso é muito mais útil
depois de ter concluído sua inspiração
e você realmente escolherá tipos de letra, especialmente porque novamente,
ele está usando o Google Fonts. Então, se você está com orçamento limitado, maioria das coisas que
eles zombaram aqui, nossos tipos de letra que
são gratuitos para usar. Agora, semelhante a esta galeria de
inspirações, há um aqui
chamado par de fontes, onde você pode literalmente
encontrar fontes do Google que combinam bem para poder filtrá-lo. Quero um san serif indo
com um texto de corpo Serif. E isso lhe dará todas as diferentes fontes do
Google que podem emparelhar muito bem. E você pode simplesmente
olhar para baixo e ver qual deles tem esse
tipo de sentimento que você queria
ter como uma maneira muito rápida e
fácil de escolher, mas também para que você possa se inspirar e ver como
estes olham juntos. Por fim, eu só
queria mostrar esse plugin do Chrome
chamado type sample, que se você instalar no
Chrome vai ajudá-lo a identificar que tipo foi
usado em diferentes sites. Se você não é muito experiente em tecnologia, isso pode ser bastante útil. Há também um site
chamado qual a fonte, onde você pode fazer upload de
imagens e ele
lhe dirá quais tipos de letra ele
acha que está usando nelas. Apenas um takeaway
deste vídeo realmente, que é garantir que
você esteja enchendo seu cérebro com
grande inspiração. Ao olhar através dessas galerias de
inspiração, tente pensar sobre o que cada tipo de letra e
a maneira como ele é usado está realmente se comunicando
com você como isso faz você se sentir e qual
é a mensagem que o tipo de letra tem.
3. Defina a marca: Antes de qualquer tipo de projeto de design
visual, você trabalhará com seu cliente para estabelecer
o que a marca significa, o que ela representa, o que ela deve comunicar. Diferentes agências de design usam técnicas
muito diferentes são
formas de falar sobre isso. Você pode ter se deparado com pesquisadores de
mercado antes disso, como
perguntas loucas como, que tipo de carro
sua marca dirige? Eles estão tentando criar uma compreensão compartilhada do que é
a personalidade da marca. Provavelmente, a técnica mais
usada é tentar criar cinco adjetivos
que explicam a marca. Como este curso não é
sobre branding per se. Vamos usar essa técnica. Se você estiver trabalhando com
uma equipe ou um cliente, você pode deixar algumas horas de
lado e tentar isso. Basta reunir-se e brainstorm de todos os
adjetivos que você sente, comunique a marca
e colecione
todos eles em um quadro branco ou
em um grande pedaço de papel. Então, tenha uma discussão
sobre quais palavras meio que significam
a mesma coisa. Risque alguns, decida qual
dessas palavras é
a melhor. Então, a partir das palavras entre as quais
você tem, você tem uma discussão
para decidir qual dos cinco adjetivos que são únicos e melhor descrevem a
personalidade da marca. Depois de ter esses conjuntos
de cinco adjetivos, mude resumir
o que é a marca. Isso ajuda com
críticas de design mais tarde. Isso nos impede de ter
uma conversa se gostamos da estética
e, em vez disso, temos uma
conversa sobre se o estilo estético comunica
a personalidade da marca. Quando sua equipe se reúne
para ver os designs, você pode lembrá-los
dos cinco adjetivos que resumem a
personalidade da marca e dizem: faz essa paleta de cores,
essa tipografia, toda essa composição
comunica a personalidade. E ninguém precisa dizer
se eles gostam ou não. Fazer com que uma equipe de
designers e o cliente gostem de um design é impossível. Conseguir que uma equipe de
designers e o cliente concordem que um
design comunica uma personalidade de marca
é um pouco mais útil e possivelmente um
pouco mais realista. Você pode, de tempos em tempos, ver as pessoas criarem cuecas de design com escalas
deslizantes
entre jovens e experientes, fortes
e delicadas. Se você gostaria de sugestões para trabalhar os
exercícios deste curso
para cada módulo em que
temos algumas atividades
práticas. Então criarei cinco adjetivos de marca
que você pode usar. Criarei diferentes para
cada seção para que
você tenha uma chance criar estilos bem diferentes para cada um desses módulos. Seu exercício para este vídeo é reunir-se
com seus clientes, sua equipe de design
ou ambos, e identificar cinco adjetivos
que resumem sua marca. Alternativamente, se você estiver
trabalhando sozinho, você pode criar cinco adjetivos que você
acha que soam legais. Ou vou anexar cinco aos
recursos deste vídeo. E à medida que você escolhe seus tipos de letra em todo
o resto deste módulo, tente ter esses cinco
adjetivos em mente. Basta fazer os tipos de letra
que você está escolhendo ajudam a comunicar esses adjetivos de
marca. O objetivo deste vídeo
é garantir, você sabe, trabalhar apenas no trabalho de design
estético quando você sabe o que a marca
está tentando se comunicar. Se você não estabeleceu qual a personalidade da marca,
pois não pode escolher um tipo de letra que
comunique isso ou faça qualquer um dos outros tipos
de atividades de design. Se você estiver trabalhando em
um projeto do mundo real, sente-se com seus clientes,
caso contrário, escolha outro
designer ou você
poderia fazer isso
sozinho apenas para praticar
pela primeira vez. E entre você brainstorm e descobrir quais são seus adjetivos de
marca. Cinco adjetivos que comunicam qual é a personalidade da sua marca. A maioria de vocês trabalha
com uma marca real ainda. Então, apenas para praticar, talvez escolha uma marca
existente ou um site
existente com o qual
você trabalhe ocasionalmente. E pense
no que os cinco adjetivos que descrevem sua personalidade.
4. Lojas de fontes: Obviamente, em algum
momento você
precisará encontrar algumas fontes. Claro, encontrar
alguns tipos de letra para usar. Você tem sua inspiração. Você sabe quais são os
requisitos, onde você
vai procurá-los? E, na maioria das vezes,
será o Google Fonts. Isso porque eles são gratuitos, são fáceis de implementar e há muitas fontes potencialmente
boas aqui. Primeiro de tudo,
vamos dar uma olhada rápida no Google Fonts. Podemos pesquisar se
soubermos o nome dele ou podemos digitar algum
texto aqui se
quisermos que ele diga alguns textos
diferentes aqui nos pequenos bits de
exemplo e tudo, podemos filtrá-lo por categorias. Agora, essas categorias não
serão um pouco diferentes categorias diferentes que você encontrou em sites diferentes. Todos eles os categorizam
um pouco diferente, mas sabemos o que é um serif. Sabemos o que é um sans serif. É se tem os
pezinhos não são. Display significa apenas um tipo de letra projetado especificamente para cabeçalhos. caligrafia significa que ele tem um
tipo de sensação manuscrita humanista? E o monoespaço, é claro, significa que as larguras de cada personagem ou o mesmo
normalmente usado para codificação. Agora, uma coisa que não
falamos
muito é se você selecionasse um idioma diferente,
como digamos, por exemplo, selecionamos japonês. japonês tende a ter
suas próprias classificações, mas o Google Fonts,
só vai classificar as
mesmas imediatamente. Se você está procurando por um tipo
de letra
japonês, por exemplo, será um pouco mais difícil
encontrar um que atenda aos seus requisitos
exatos nas fontes do Google porque elas
não estão classificando-as de
uma forma que as pessoas podem esperar que letra
japoneses sejam classificados. Mas também podemos ver que há basicamente oito para escolher. Então você tem que escolher
o que você quer. Agora, uma coisa que é particularmente
boa sobre
as fontes do Google também é que podemos selecionar
algumas das propriedades da fonte. Por exemplo, talvez queiramos que seja
bastante estreito porque estamos criando
painéis para um site de UI muito pesado, que talvez não
tenha muitas postagens de blog e outras coisas onde focando puramente
no que se encaixa bem em menus e botões. Vamos querer que
seja um tipo de letra bastante estreito para possamos filtrar que
possamos filtrar o cabelo liso
e isso
reduzirá o número de opções
disponíveis. Idealmente, uma grande coisa
sobre a escolha de um tipo de letra é apenas descartar todos
os que não se encaixam. E então você vai ter um
punhado para escolher. Por fim, um recurso muito bom
que o Google Fonts tem, que é um recurso bastante novo. Falaremos mais sobre fontes
variáveis mais tarde. Mas se eu clicar
nesta caixa de seleção aqui mostre apenas fontes variáveis. Atualmente, existem
34 fontes variáveis no Google e
há uma variável. Vou te mostrar
com laje Roboto. Se você olhar aqui,
há se você estava importando isso e
falaremos muito mais sobre isso na fase de
implementação. Mas se você estivesse importando isso, talvez fique tentado a
importar esses nove arquivos de fonte
diferentes, então você tem todos os pesos
diferentes. Bem, na verdade, você poderia apenas
importar este arquivo de fonte. E tem 900 pesos
diferentes, que você pode controlar com uma
variável em seu CSS posteriormente. Isso é particularmente
bom para obter
os brancos exatos corretos, especialmente quando estamos lidando
com design responsivo, onde pode haver vários tamanhos
diferentes
para o tipo de letra. Vamos querer que
haja vários pesos
diferentes também. E agora podemos controlar isso em um nível muito mais granular, cada vez mais
com a tipografia da web, estaremos
procurando fontes variáveis. E como acabamos de ver,
o Google Fonts já possui 34 fontes variáveis. Fontes variáveis diferentes têm outras variáveis que não sejam brancos. Mas o Google Fonts atualmente só os tem com
as variáveis brancas. Então isso é muito bom. Agora, o próximo local a ser
mencionado é apenas para pessoas que têm uma conta da Adobe
Creative Cloud. Porque se você tiver a
Adobe Creative Cloud, seria louco
ir a qualquer lugar que não seja fonts.adobe.com para tentar
encontrar seus tipos de letra. Em primeiro lugar, e isso
ocorre porque a Adobe tem uma coleção realmente impressionante que está disponível para usuários da
Creative Cloud. Mas você quer uma pergunta
se a pessoa que está publicando o site também tem uma licença para usar o
tipo de letra também. O que quero dizer com isso
é que se você estiver fazendo trabalho
do cliente e tiver
pessoalmente a conta da
Creative Cloud, eles
precisam de uma
licença diferente para que eles usem o mesmo tipo de letra no
site do cliente. Agora, com as fontes da Adobe, você já
notará imediatamente que as classificações
são maiores aqui. Na verdade, a caligrafia
e o script são separados em duas classificações
diferentes. Temos uma carta negra sobre a qual
falamos anteriormente, que seria muito estranho
usar isso em um site, mas talvez você o faça. E Slab Serif. Então, já
temos uma escolha mais rica de classificação
é escolher. E podemos selecionar
essas propriedades não exatamente em uma
balança deslizante como no Google, mas poderíamos escolher uma que
seja mais estreita ou, ou mais pesada, ou até mesmo selecionar uma com bastante
alta ou baixa altura x. E já sabemos que isso
poderia ser bastante útil. Agora, novamente, outra coisa
que é muito boa com o Adobe Fonts é se eu fosse selecionar japonês e eles escolheram japonês aqui um pouco. Você notará
que as classificações realmente mudam. Se você estiver lidando com tipos de letra
japoneses, pode ser mais fácil
encontrar um que se adapte sua classificação exata
no Adobe Fonts. Mas, novamente, vale a pena
notar que existem apenas sete fontes japonesas. Então, quão útil
é poder filtrar as diferentes
classificações. Não tenho muita certeza. O Adobe Fonts é absolutamente
incrível se você tiver uma licença da Adobe Creative
Cloud. Agora, o próximo casal,
vou mostrar rapidamente nossa fonte shop.com e não mentir nenhum tipo. E estes são sites que coletam fontes de todas as fundições de tipos
diferentes. E eles
os posicionam em seu site para que você possa pesquisar facilmente um grande número de fontes
compráveis compradas
de diferentes designers. Voou para fora deste curso, estou usando a marca com tipo para os tipos de letra
são usados lá. Relativamente acessível e
gosto muito do estilo deles. Você quer ter cuidado
ao comprar aqueles de designers
individuais que você entende qual é
o licenciamento. Por exemplo, se eu olhar branding com licenciamento de tipos, podemos ver que, na verdade, há uma
licença totalmente diferente
para a qual precisamos usá-la em aplicativos móveis
se estivermos usando em um site. Portanto, precisamos estar cientes de onde podemos usá-lo
na licença que
temos porque pode ser muito fácil errar o
licenciamento. Eu vou mostrar
rapidamente algumas pessoas
um pouco
mais caras. Este é o tipo de jogo. Na verdade, oferecem um design de tipo
baseado em comissão , onde
você pode ir até eles com seus requisitos
e eles
realmente criarão o tipo de letra para você se você estiver trabalhando em um projeto com um orçamento
muito grande, este é Hoefler and Co, e eles têm alguns tipos de letra muito
legais aqui. Uma coisa que você notará
é que parece muito bom valor
porque diz noventa e nove dólares
para o tipo de letra. Mas, na verdade, se você
quiser usá-lo na web, o
que, claro, você
faz do que a licença. E vai subir
bastante com
base em quantas impressões
que estão
no site e por
quanto tempo você o vive para todo
esse tipo de coisa. Portanto, não se deixe enganar com o que
parece ser um preço bastante
baixo de primeiro lugar, este é um
projeto interessante que
encontrei recentemente
chamado protótipo, onde você pode
projetar seu próprio tipo de letra. Você pode escolher as alturas de
serif, e provavelmente está funcionando com fontes
variáveis de alguma forma, você pode escolher a largura
do Serif e o contraste. E há todos os tipos de escalas deslizantes
diferentes onde você pode
controlar exatamente a aparência do tipo e possivelmente projetar o seu próprio com
algum esforço mínimo. Neste vídeo,
falei principalmente com você sobre
onde você vai encontrar seus
tipos de letra, seus arquivos de fonte? E, de forma realista, se você
tiver uma conta da Adobe, você quer ir direto
para as fontes da Adobe
agora mesmo e usá-la
para encontrar suas fontes. Caso contrário,
dependendo do seu orçamento, estaremos principalmente nas fontes do Google. Então, se você tiver um pouco
de dinheiro extra, talvez queira começar a
olhar para alguns
desses sites onde você pode
comprar um tipo de letra especificamente. Caso contrário, vou passar
o resto deste curso usando o Google Fonts
puramente porque
acredito que é aí que
cerca de 90% de vocês vão gastar
cerca de 90% do seu tempo.
5. Texto do corpo: Se 95% da nossa aplicação
for topografia, então talvez algo como 85
a 90% seja topografia corporal. O corpo do texto, o texto nos
parágrafos nas postagens do blog, os textos em descrições em
torno de infográficos, áreas de texto explicando como
você usa o aplicativo. Todo esse texto de estilo corporal é a maioria de qualquer site. Portanto, a maioria dos tipógrafos ou maioria dos designers escolhe a topografia
corporal primeiro. Vou sugerir isso agora e vou
sugerir novamente mais tarde, mas por razões muito diferentes. Agora, algumas coisas para pensar ao escolher sua topografia
corporal. Não queremos escolher
algo muito louco. Por exemplo,
não vamos escolher nosso tipo de
letra manuscrito para compor a topografia corporal de
nosso aplicativo web. Poderia estar em grandes
parágrafos longos de texto, os termos e condições. Talvez queiramos que seja
individual e único. Queríamos comunicar quem é a marca e a personalidade da
marca. Mas queríamos fazê-lo
da maneira
mais mínima e sutil possível. Aprenderemos
mais tarde, quando
analisarmos a legibilidade, queremos
que nossa fonte de corpo tenha
idealmente uma altura de x. ligeiramente acima da
média. Ou seja, se
olharmos para o Roboto aqui, ele tem uma altura x razoavelmente
grande e um tamanho muito bom. Olhamos para o tamanho
das letras minúsculas. Eles são bem grandes em comparação com
o tamanho geral. Então isso é muito bom para
ler um tamanho pequeno. Mas também não queremos
muito contraste. Algo como Baskerville
provavelmente não é ideal
para textos corporais, especialmente se fosse um pouco pequeno porque há
muito
contraste entre alguns dos traços
finos e mais grossos. Aqui temos a
tela Playfair e tem linhas muito finas deste
lado
da linha a e muito grossa nesse
lado do a. Se isso fosse muito menor, começará a nos
causar alguns problemas para diferenciar as coisas e
garantir que possamos
vê-lo corretamente. Agora,
exibição Playfair, vamos falar sobre exibição em um pouco em seu próprio nome,
sugerindo que o usemos como textos de cabeçalho e
não como textos corporais. Mas uma coisa a ter
cuidado é algo com
muito contraste. Aqui temos o PT serif e
isso tem algum contraste, mas muito menos do que as areias de
exibição. Provavelmente poderíamos nos safar usar isso como textos corporais. Podemos querer
torná-lo um pouco maior do que nossa topografia
corporal média. Agora, a próxima coisa a
pensar é que vamos
querer várias vezes usar diferentes pesos de texto em negrito e possivelmente
texto em itálico para chamar a atenção para as coisas dependendo do propósito
de nossos textos corporais . Mas, certamente, se
usássemos muitos
textos em nosso site, vamos querer
vários estilos que temos propriedades de fonte. Podemos realmente dizer
que estamos
procurando que ele tenha
mais do que uma certa quantidade de estilos para garantir que só estamos vendo
aqueles em que
vamos ter opções em itálico
e negrito também. Agora temos nossas especificações
do nosso resumo. Se começarmos a descartar todos
os tipos de letra que não
podemos usar, só ficaremos
com tantos para escolher. Se estivéssemos, por exemplo, escolhendo um tipo de letra para um banco e algumas de
nossas palavras-chave de marca diziam coisas como
seguras e seguras e confiáveis. Provavelmente vamos evitar
algo como Poppins, que tem formas únicas muito
interessantes em torno do G aqui, ou ferrovia, que tem esse
crossover bastante extravagante com a WWE. E vamos escolher
algo que pareça um pouco mais confiável do que barcos a remo
criativos que podem realmente ser uma
boa escolha para um banco. Mas se ainda quisermos que ele
tenha algum tipo de personalidade, talvez não, talvez Morley seja uma opção mais
interessante. Independentemente da nossa
marca e palavras-chave, não
queremos que o tipo de letra
do corpo tenha muita personalidade. Quando o leitor
chega aos textos corporais, eles já decidiram que estão interessados em
ler o artigo. Eles já
decidiram que vão usar
o aplicativo. Já comunicamos
a personalidade da marca e o que
somos todos. Agora queremos
tornar o mais fácil
possível para eles lerem. Eu me defini o
resumo de encontrar um para um banco seguro e seguro. Só vai
ter Sans Serif. Não queremos que os textos
splay lá dentro. E
reduzimos isso instantaneamente para 139. Talvez eu queira que ele seja
meio restrito porque vou usá-lo para
meus elementos de interface do usuário também. E então fiquei
com Sarah burn. Então, simplesmente definindo regras
específicas com
base no meu resumo de design, encontrei imediatamente um
tipo de letra perfeito. Agora eu quero que você pegue o
resumo que você criou, seja você
mesmo ou seu trabalho, o cliente, para criá-lo. Quero que você passe algum tempo
novamente olhando para as galerias de
inspiração. Mas agora você tem uma ideia do que
você está procurando. Então, vai forçar seus olhos a ver coisas que você não estava olhando antes. Então eu quero que você venha ao Google Fonts ou, se você
tiver uma conta da Adobe, sinta-se à vontade para usar o Adobe
Typekit e tentar restringi-lo e encontrar um tipo de letra que não
tenha muito contraste. Não tem
muita personalidade, mas tem a personalidade que
você está procurando sutilmente lá que você acha vai funcionar bem
para o seu projeto.
6. : Antes de começarmos a falar sobre tipos de letra
correspondentes para usar vários tipos de letra em
nossos designs e como encontrar esses tipos de letra
que funcionam bem juntos. Vale a pena pensar
um minuto, posso me safar
com um tipo de letra? É totalmente possível criar um design muito bom
com muito
personagem usando um
único tipo de letra. Pode parecer muito bom, pode parecer minimalista e será mais rápido e fácil para você criar. Possivelmente, a principal
desvantagem com o uso um único tipo de letra é
que os títulos, o tipo de exibição podem realmente
ajudar a comunicar caráter, marca, personalidade e
podem realmente atrair as pessoas. Mas também ajuda a criar
essa hierarquia visual,
fazendo uma distinção muito
clara entre cabeçalhos e corpo de texto. E como falamos antes, por causa da forma como obtemos uma espécie de distorção visual, o texto não
parecerá com o mesmo tipo de letra, um tamanho grande como será
em um tamanho pequeno, pode parece um
pouco como um erro. Na verdade, existem
algumas soluções se você não escolher um único tipo de letra e
usá-lo para tudo
em todo o site. Existem certos tipos de letra na tela
agora que temos laje. E você deve ter notado que
há duas versões, uma chamada slab 013 pixels e outra chamada laje 027 pixels, que informam os tamanhos
exatos para os quais elas foram projetadas para esses
tipos de letra para serem usados. Podemos ver que aquele a ser
usado maior é um pouco mais estreito, porque se você
tiver títulos longos, ele ocupará
muito espaço na tela. E eles provavelmente ajustaram a espera visual ligeiramente
para os dois tamanhos diferentes. Agora, quando você olha ao redor,
há vários tipos de letra em que uma fonte separada ou um tipo
separado foi criado para exibir
os textos do corpo e às vezes, até mesmo um
tipo de letra separado para texto de legenda. Só vou te
mostrar outro. Este é chamado DM serif
text e DM Serif Display. Agora este é um verdadeiro
peculiar, eu acho, porque o dM Serif Display
obviamente foi projetado com um pouco mais de
contraste nas letras, então você pode usá-lo em tamanho
muito maior, mas texto dm serif
provavelmente não funcionará particularmente bem se
fosse em torno de 14 pixels, talvez 16, possivelmente até 18. Idealmente, este seria
um texto separado para subtítulos dois cabeçalhos principais. Na verdade, mesmo quando
clico nisso nas fontes
do Google e
procuro os emparelhamentos que ele recomenda, é quase
consistentemente sugerindo o uso de texto de serif DM como
na verdade o tipo de letra do cabeçalho até que eu chegue direto na parte inferior
onde está dizendo que talvez eu poderia usar o display Playfair
e o texto de serif DM. Eu nem acho que essa seja uma combinação particularmente boa sobre
a qual falaremos mais tarde. Mas só para ficar claro,
há muitas
possibilidades em que
um tipo de letra
foi projetado com
uma fonte separada para o texto de exibição
e para o corpo do texto. Se você estiver interessado em
usar um único tipo de letra, essa é uma opção bastante elegante. Outra coisa a
olhar para nós, se você estiver usando para
usar uma única fonte, certifique-se
de que ela tenha muitas ponderações diferentes. Certifique-se de que ele tenha opções em itálico. Possivelmente pequenos
acampamentos como poderiam ser usados para subtítulos
ou legendas. Mas certifique-se de que ele tenha
muita variação. Porque quando você vier para construir todo o seu sistema de design, você vai precisar de todos
esses pedaços e peças extras. Veremos isso mais
na seção de estilo. Mas esteja ciente agora
que, se você for usar um único tipo de letra
para tudo, você vai querer que ele
tenha muito mais opções. Ok, agora em seguida,
vamos ver emparelhamento com o nosso texto de exibição.
7. Exibição de texto: Antes de encontrarmos um tipo de letra
para emparelhar com nosso texto corporal, para encontrar um bom texto de cabeçalho para combinar com essas tags de corpo, precisamos entender o
propósito da topografia de cabeçalho. Às vezes, nos referimos a
isso como texto de exibição. Quando estamos lidando
com os textos corporais, estamos muito mais preocupados com os aspectos técnicos sobre
como você pode lê-lo, a legibilidade que você lerá
em grandes áreas de cada vez. Vamos analisar a
legibilidade muito em breve. Mas os textos de cabeçalho
servem a um propósito muito diferente. Ele precisa atrair as pessoas. Ele precisa fazê-los
querer lê-lo, mesmo que seja algo
que alguém precisa ler para o trabalho
ou por outro motivo, eles ainda precisam querer
lê-lo para se certificar de que eles se envolvem
totalmente com o texto
e tire o máximo proveito dele. Os textos do cabeçalho dão o tom. Ele nos diz se estamos falando em um tom lúdico ou um tom
muito sério, ele nos diz com quem
é a pessoa com quem estamos
conversando. Qual é a personalidade que nos
fala agora. Além disso, cria uma certa quantidade de interesse
visual. Se nossa tipografia, se nosso
tipo de letra comunicar emoção
suficiente e comunicar
o rebaixamento do crack, talvez não
precisemos usar uma imagem ou outros elementos gráficos para
definir o tom da página, nós
pode realmente criar um design muito mais
minimalista se formos melhores em selecionar
um bom tipo de exibição. Porque quanto mais
a personalidade da marca é comunicada através
do tipo de letra, menos precisamos confiar em ilustrações,
imagens ou texturas. Quando falamos sobre como alguma
comunicação é não-verbal, este é o lugar onde
você pode colocar a maior parte de sua comunicação não verbal
no texto de exibição onde ela não
interferirá na legibilidade. E isso vai definir o
tom desde o início. Agora, o outro lado
de tudo isso, se não colocarmos nenhum
pensamento em nossa exibição, tipografia pode ser algo
como você veria com Bootstrap antes de fazer
qualquer edição no código, temos um lista de personalidade muito
branda e sem graça indo aqui. E isso não cria
engajamento, nem interesse. E já faz seu cérebro
suponha que isso vai ser um texto sem graça, desinteressante e
francamente, sem importância. E, sem dúvida,
parece um erro. É como quando você encontra um ícone
muito simples projetado para ter apenas 20 pixels de altura e
você o explode para ser enorme. Parece errado
porque não tem detalhes suficientes
para ser tão grande. A topografia e
o título aqui são claramente uma topografia corporal. Ele não tem detalhes e
interesse
suficientes para ser explodido
até esse tamanho. Parece um erro. Na verdade, eu
editei um pouco o CSS para criar esse
cabeçalho bastante feio para este site, é
impossível
ignorar todas as vantagens na escolha de um texto de
exibição eficaz para nossos títulos. Porque se não tivermos
inadvertidamente todos os efeitos negativos
do cabeçalho que está
na tela agora. O objetivo do
texto de exibição é muito mais sobre branding e definir o tom do que sobre legibilidade. Este é o lugar
onde podemos realmente comunicar abaixo
desse nível consciente. E ele age como
uma espécie de imagem realmente atrai as pessoas e
faz com que elas queiram ler, mesmo que alguém tenha que
ler o texto na página, eles precisam querer
lê-lo primeiro para ter certeza de que
completamente se envolva com isso. E o cérebro deles está
interessado no material, quer estejamos criando
um jornal, um blog, todo o painel
para um aplicativo bancário, que o
texto de exibição de cabeçalho precisa para tornar as pessoas interessadas e também
comunique a personalidade.
8. Meta informações: Vamos falar sobre
emparelhar dois tipos de letra. Mas, claro, há muitas
situações em que você pode escolher
mais de dois tipos de letra. Uma coisa comum é para meta-informações para
legendas, por exemplo, se você estava lidando com um aplicativo
web muito pesado de conteúdo ou sites como
potencialmente um site de notícias. Eu tenho o guardião
na tela agora, então você naturalmente precisará uma hierarquia
visual muito mais sofisticada. Existem muitos outros tipos
e significados
diferentes para o
texto na tela. E, portanto, é um trabalho muito
mais difícil para nós diferenciar entre
coisas como a data ou a legenda de
uma imagem que não são realmente importantes
para muitos leitores, 99% das pessoas que lêem este artigo não precisa
ler a legenda na foto. Não precisa saber a
que horas foi postado, e não queremos
interferir com esses noventa e nove
por cento dos leitores. Também queremos tornar visualmente óbvio que a legenda
é outra coisa, que a data é outra coisa. Podemos escolher um tipo
diferente
para ajudar a fazer essa
diferenciação. Mas também porque sabemos poucas pessoas
precisam ler isso, podemos realmente torná-lo um pouco menor do que o tamanho de leitura
desconfortável, podemos deixar
desconfortável ler. O The Guardian
tornou a legenda desta imagem muito
menor do que a fonte do corpo. Eles fizeram dele um tipo de letra
sans serif, e também o tornaram
uma cor mais clara, por isso tem menos contraste
com o fundo, além de adicionar um símbolo ou um pequeno
indicador visual de que é uma legenda e a
forma de um triângulo. Parece um pouco com uma seta
apontando para a imagem. Todas essas coisas
combinadas deixam bem claro para nós
que isso não é importante e não faz parte
do artigo e podemos
simplesmente ignorá-lo. Na ocasião muito rara em que
alguém precisa saber quem foi
o fotógrafo ou a hora exata em que o artigo
foi publicado. E eles têm uma visão
muito ruim. Eles podem pedir ajuda a alguém. Eles poderiam usar um
leitor de tela, eles poderiam aumentar o zoom. Não precisamos nos
preocupar muito com
a legibilidade nesses casos de borda
incrivelmente raros. Porque se o fizermos, isso
prejudicará a legibilidade para os noventa e nove por cento que estão aqui
apenas para tentar
ler o artigo. Se estivermos em uma
situação em que temos um aplicativo pesado de conteúdo,
estamos projetando e
decidimos que precisamos de um novo tipo de letra
para as linhas do comprador, as datas, as legendas ou qualquer outra informação do Meta. O mais importante é que se o tornarmos incrivelmente pequeno, ainda
podemos lê-lo? E além desses pontos
únicos,
as outras regras que estamos prestes
a falar com o
emparelhamento do tipo de letra do seu corpo
com o tipo de letra do cabeçalho. Todos eles ainda
se aplicam quando você está projetando em um terceiro tipo de letra
para suas informações do Meta. Se estivermos trabalhando em um
site muito pesado de conteúdo, como, por exemplo, um site de notícias ou um aplicativo com um painel com muitas visualizações
de dados. Em seguida, a necessidade de um
terceiro tipo de letra aumenta à
medida que a complexidade do sistema
tipográfico aumenta. Se estivermos escolhendo
um terceiro tipo de letra para nossa meta-informação, nossas legendas são nossas
datas para um exemplo, então o mais importante é que se o tornarmos realmente pequeno, ainda será legível? E além disso,
todas as regras sobre a topografia de emparelhamento ainda se aplicam e veremos essas em seguida.
9. Combinação de fontes: Neste vídeo,
vamos falar sobre como emparelhar tipos de letra. 99% do tempo em que estamos projetando um aplicativo
ou um site, vamos escolher
mais de um tipo de letra. Teremos um para
os títulos e outro
para os textos corporais, e potencialmente um terceiro tipo de letra para coisas
como legendas. Agora temos algumas regras definidas. Existem algumas regras para nos ajudar a decidir se um tipo de letra
funciona bem com outro. Infelizmente, existem
muitas variáveis para que essas regras
sejam confiadas. Você sempre terá que
aprender a treinar seus olhos. Mas depois de ter
treinado seus olhos para emparelhar tipos de letra que
funcionam bem juntos, você pode fazer uma carreira inteira apenas a partir disso, se quiser, podendo emparelhar tipos de letra
em combinações eficazes, mas também combinações únicas são uma pedra angular realmente vital
para seus projetos. Agora, vamos supor que eu escolhi EB Garamond para ser
meu tipo de corpo. E eu escolhi isso parcialmente
porque vamos
usar muito Garamond
na próxima seção. Mas antes de tudo, algumas coisas que sabemos sobre esse tipo de letra. Então, sabemos que é uma fonte serifa
tradicional. Sabemos que é um clássico
absoluto. É um dos primeiros,
além de talvez Jensen, que ainda está em uso hoje. Mas Jensen tem algumas
características que o atraem
um pouco demais. Enquanto Garamond ainda pode parecer um tipo moderno. E por essas razões,
muitos advogados advogados e contadores
gostam de usar Garamond. Isso faz com que as coisas pareçam bastante
oficiais e clássicas. Eu estava trabalhando com um
advogado recentemente e todos os documentos do Word que lhe enviei, ele
mudou a fonte, o Garamond. Se assumirmos por um
segundo que tenho um breve para criar um pedido para advogados ou outra pessoa com um histórico
legal muito profissional, então Garamond pode ser uma boa escolha
para os textos corporais. Ou se eu estiver projetando
um aplicativo com um tipo de letra um pouco louco
, posso usar o Garamond apenas para a página de Termos e
Condições, por
exemplo, onde eu quero que as coisas pareçam um
pouco mais oficial. Então, como poderíamos emparelhar
isso com um cabeçalho? Bem, podemos ver algumas
dessas galerias de inspiração sobre as
quais falamos como tipo Wolf. E outro lugar para
procurar, obviamente, está na parte inferior da página de fontes
do Google. Isso vai sugerir
algumas coisas que são comumente emparelhadas com ele. Agora, eu apenas sugeri
que meu resumo é fazer uma inscrição ou um site para advogados ou outros profissionais
similares. Então, algo como lagosta
definitivamente não vai funcionar. Poderíamos riscar isso
imediatamente. Da mesma forma, um tipo de letra como o jogo, que é chamado de jogo, presumo porque tem uma reminiscência de jogos de
computador de estilo antigo. Na verdade, parece que quase o
monoespaço talvez esteja desenhando para um gênero muito
específico. E, portanto, também podemos
ignorar muitos que nos deixam. E, obviamente, ficamos com centenas de outras fontes de
título, mas deixando-nos com três possibilidades que o
Google diz serem bastante comuns,
que são Roboto,
Montserrat e Oswald. Agora o roboto é
incrivelmente usado em excesso. Alguns designers de aplicativos
usarão o Roboto. Então, sem sequer
pensar nisso, eles vão apenas enfiar
Roboto em tudo. Estou sempre relutante em
usar algo assim porque a
possibilidade de nosso usuário estar dormindo enquanto
usa nosso aplicativo é incrivelmente alta com
algo como Roboto. Agora eu realmente não
sinto que Montserrat é tão bom parecer
algo a ver com o uso
especialmente do Montserrat Regular, talvez se eu fizesse isso
médio ou ousado, mas algo para fazer isso tendo um tipo de traços estreitos, o que faz com que eu me sinta
confronto um pouco com Garamond e falaremos sobre isso um pouco mais depois. Mas estou bastante atraído
pela ideia de usar
Oswald com Garamond. E uma grande vantagem
imediatamente é que
esse caminho é muito impactante. Você é atraído por isso tão rapidamente, é tão grande e
denso e chama sua atenção quase como
uma dessas serifas de laje. Mas sem ter conotações de cartazes vitorianos da Inglaterra. Sinto que há um nível
muito bom de contraste entre
esses dois tipos de letra. Vou levar
isso para Figma agora, Oswald e Garamond. E vou explicar
algumas das razões
pelas quais essas fontes
funcionam juntas. Aqui temos Oswald e
Garamond como um bloco de texto como eles podem
aparecer potencialmente em um site
ou aplicativo da web. E você pode ver que eles ficam
muito bonitos juntos. Eu acho que uma coisa que
eu acho que é realmente útil sobre Oswald
como textos de cabeçalho em uma nota lateral é porque ele se destaca tanto
e tem esse impacto, você pode torná-lo um
pouco menor como um título. E, portanto,
talvez sejamos um pouco
mais profissionais para nosso site de advogados ou aplicativo
da web que
estamos potencialmente fazendo. Agora, quando estamos
emparelhando tipos de letra, o que não queremos são tipos de letra muito semelhantes,
eles vão entrar em conflito. Vai
parecer um erro. E vamos falar
sobre isso mais tarde. Mas você tem uma distorção
óptica quando aumenta um tipo de letra. E isso poderia potencialmente
fazer com que pareça um tipo de letra diferente e como
se estivesse entrando em conflito consigo mesmo. Portanto, mesmo se estivermos usando exatamente o mesmo tipo de letra
para os títulos, pode
parecer um
pouco como se ele se chocasse. Queremos que ele pareça
obviamente diferente. Queremos que pareça
uma decisão intencional. E isso vai nos ajudar com nossa hierarquia visual também. Vai tornar mais distinguível que
é um título. Então, nunca queremos
ter um cabeçalho
parecido demais
com o corpo do texto. Agora, até onde
podemos ver agora, estes
parecem muito diferentes. Estou em roupas bastante largas, é um espaço bastante aberto e
Oswald está muito condensado. Na verdade, isso seria
muito bom para elementos de interface do usuário. Há uma versão
condensada de Oswald também, mas eles realmente
têm algumas semelhanças. não queremos que eles pareçam opostos
completos. Se eles se parecem com opostos
completos, eles se parecem com duas coisas de mundos
diferentes que
nós empurramos juntos. Eles precisam de algumas semelhanças. Queremos medidas iguais
de personalidade. Se nosso texto de exibição, se eu encabeçar textos tiver
muita personalidade, queremos um texto
corporal bastante conservador e vice-versa. Agora vamos ver algumas
das coisas que eles têm semelhantes, porque elas parecem
bem diferentes agora. Uma coisa que sempre, sempre, sempre queremos que eles tenham
pelo menos relativamente semelhante entre o texto de exibição e o
corpo do texto é a altura x. Então aqui eu tenho um
L maiúsculo e um par de x
maiúsculas em
Oswald e em Garamond. E podemos ver que Oswald tem uma
altura x ligeiramente maior do que a peça, mas não é drasticamente maior. São cerca de 57%
das alturas em Oswald e é
cerca de 50% no EB Garamond. É um pouco menor
em Garamond normal, há um pouco de espaço aqui, mas eles são relativamente semelhantes. Isso é muito
importante e
vamos falar sobre
isso mais tarde. Mas sempre queremos que
nossos textos de exibição e nossos textos corporais tenham
uma altura x. semelhante. Nunca queremos um com
uma altura x muito alta e outra com uma altura x
muito baixa. Agora, a próxima coisa
que eu quero olhar é se você olhar para este
E de ambos, você pode ver como a
ponderação é bastante semelhante. Não há uma grande
quantidade de contraste em um serif tradicional
como Garamond. Quando você olha para
a pequena barra transversal do E e depois o
lado do E. Você pode ver que o contraste
na espera é quase o mesmo que o contraste eles esperam que Oswald tem. Eles são semelhantes a esse respeito. Se escolhermos um
tipo de letra como a serif moderna, então ele
parecerá drasticamente diferente de algo
como Oswald. E vamos
querer tentar encontrar outras maneiras de torná-lo semelhante. Talvez possamos encontrar um texto de cabeçalho com
uma largura semelhante. O contraste no traçado é bastante semelhante entre
esses dois tipos de letra. E, finalmente,
a forma real. O Garamond obviamente tem aberturas
muito maiores. Podemos ver como é muito
mais amplo e esse espaço
no E é muito maior
e Garamond para Oswald. Mas a forma geral real
das letras, por exemplo, a a é
a forma tradicional em ambas. E eu olhei
através do tipo de letra. A maior parte da rede
tem formas semelhantes. E eu mencionei isso
porque se eu troquei este Oswald por mais de dois, talvez um Futura a ou algo assim, você verá que ele tem uma forma
completamente diferente. E mesmo que isso esteja relacionado
e de todas as outras formas, isso criará
contraste com isso. Existem semelhanças entre esses tipos de letra que
os fazem parecer que
pertencem ao mesmo tempo em que têm contraste
suficiente para criar um interesse visual. Claro, combinar um serif com um sans serif
sempre criará
instantaneamente essa tensão que contrasta entre os dois. Mas também poderíamos fazer muitas coisas a ver com a
modelagem do último, o contraste do traço, o quão humanista ele parece. Às vezes, algo como
Futura parece geométrico, enquanto alguns Garamond quase parecem levemente
manuscritos. Tem um golpe fluindo para ele. Podemos chamar isso de
humanista e chamaríamos de racional futuro. E quando estamos escolhendo
tipos de letra que vão bem juntos, queremos algum contraste
e algumas semelhanças. Trata-se de equilibrar
essas duas coisas. Mas a única coisa que
não queremos comprometer nas alturas x. Ele sempre tem que ter uma altura x
relativamente semelhante. Isso é um emparelhamento de fontes
com Oswald e Garamond. Vá e veja se você pode encontrar
um texto de exibição que atenda ao seu resumo e também corresponda muito bem ao texto do
seu corpo. Lembre-se de que você quer que ele tenha
uma quantidade significativa de contraste, mas ainda
parece que ele pertence. O Idealmente deve
haver algumas semelhanças e algum contraste.
10. Prática de emparelhamento de fontes: Antes de começarmos a praticar
nosso emparelhamento de tipos, eu queria mostrar a vocês
este jogo muito legal que
achei que é chamado de conexão
de tipo. E a conexão de tipo está
brincando descrevendo-se como um jogo de namoro
tipográfico. Para treiná-lo para
ajudar a emparelhar tipos de letra. Vai nos dar cinco
aqui para começar. E estou escolhendo Garamond porque já
olhamos para Garamond. E então está nos
dando regras completas aqui
sobre como podemos escolher um bom parceiro para Garamond está sugerindo que
poderíamos confiar na família, caso
em que selecionar um outro tipo
de letra da mesma família, outro tipo
serif tradicional. Ou procurar algo
que pareça bastante semelhante ou olhar para algo com contraste
bastante gritante, ou encontrar algo com algum tipo de conexão
histórica. Agora vamos dizer que eu queria encontrar algo que fosse bastante
parecido. Vou clicar aqui e
isso me dá três opções. E uma delas é a combinação correta de
acordo com este site. E dois deles são Dodds, que não vão ficar bem com Garamond
imediatamente. Sabemos que este é
um serif moderno aqui, este Pm, e eu não
tenho que pronunciar isso. Então eu diria que este
provavelmente não é o dançarino de crack. E este parece
bastante transitório, mas também serifas de
laje muito fortes aqui. E se eu olhar para
a descrição do script, ele diz que tem uma altura x alta, meio que me deixa
com essa opção, que é que talvez esse tipo de letra seja a
melhor combinação para Garamond. E o que é realmente legal
aqui é que posso ver alguns dos recursos sobre
como a barra transversal parece. Diz que tem um pequeno balcão SCOTUS sinalizado cabeça serif. E se eu ligar para
o outro tipo de letra
existe também tem uma cabeça em forma de cunha serif
e um pequeno contador. Portanto, tem
muitas semelhanças. E o que
estávamos procurando era um tipo de letra semelhante, digamos. E diz: Muito bem,
encontrei um tipo de letra que
funciona bem em conjunto. Venha brincar
com este jogo porque às vezes ele vai
dizer que você está errado e isso vai
explicar o porquê. E você pode ver
alguns dos detalhes sobre o tipo de letra e
isso realmente vai
ajudá-lo com algumas
dessas palavras de anatomia sobre as quais já
falamos
e coisas assim. Este pode ser um jogo muito divertido para passar dez minutos jogando. Agora, eu também muito
rapidamente só
quero lembrá-lo de
alguns sites que
vimos anteriormente quando falamos sobre o tipo de inspiração lobo, onde ele só mostrará
tipos de letra, combinações e
par de fontes onde ele mostra combinações
apenas do Google Fonts. Agora, se você já
escolheu seu tipo de letra corporal, pode ser meio
útil apenas ver o que esses sites estão
recomendando bem os pares, com esse tipo de letra já. E então, a partir das
opções que se alimentam bem, você pode ver uma que
se encaixa no seu resumo. Agora pode ser um
bom momento para revisitar sua inspiração
depois de você já ter escolhido um tipo de corpo. Em seguida, tenho um desafio para você que eu
gostaria que você repita idealmente quantas vezes possível aprendemos
fazendo, afinal, quero que você leve
um designer
ou artista ou músico famoso ou qualquer um realmente, e tente criar
uma maquete muito simples de como uma página sobre
eles pode parecer. Queremos que ele tenha um texto de
exibição diferente para os textos corporais
e, em seguida, possivelmente em camadas
com uma imagem. Muito, muito simples. Antes de criarmos um sistema
tipográfico inteiro, queremos ter algum
tipo de brincar com ele para ver como ele pode
parecer e funcionar em uma página. Eu realmente rapidamente fiz isso três vezes para Dieter Rams, Jackson *******,
e Frank Gehry, onde escolhi tirar
fontes para cada um. E então eu
os coloco em uma página para que eu possa ver como eles se parecem. Agora, Dieter Rams para aqueles
de vocês que não sabem, ele era um designer muito famoso
que trabalhou na Braun. E eu escolhi dois tipos de letra, cabelo, Ubuntu e cabine. E eu os escolhi porque
eles são muito minimalistas e muito modernos ou modernos em termos de Dieter Rams como o tempo. Mas ambos têm uma brincadeira muito
sutil para eles. Quando olhamos para
o trabalho dos dois Rams, vemos que ele usa um uso
muito, muito sutil, muito simples de cor e padrão para torná-los
um pouco brincalhões e ter certos personagens. E eu acho que esses dois textos abertos, o B é absolutamente
perfeito da maneira como tem essa pequena curva para cima
e curva para baixo logo sobre a linha de base e
sobre a linha superior. E isso faz com que
ele se afaste e
pareça parecido com a forma como vejo que Dieter Rams vale a pena procurar. Achei o que acho que é um
emparelhamento bastante razoável entre os dois. E novamente, se eu ampliar
o texto do corpo, você pode ver que ele tem um
certo nível de contraste, mas novamente, certo nível
de semelhanças também. vez, tem uma pequena
quantidade de brincadeira. Uma coisa que eu acho
particularmente bom é que Dieter Rams diz, nova empresa é isso.Então
, na verdade tem o glifo com
o O e E juntos, que é absolutamente
vital se eu estivesse indo para fazer uma página escrevendo
sobre Dieter Rams. Então, tendo escolhido esse famoso designer e depois
escolhido esses dois tipos de letra, e mais tarde em uma página, posso ver isso realmente comunicando a mensagem
exata que eu quero. É mais um sentimento do
que qualquer coisa. Mas essas duas fontes
funcionam juntas. Eles são muito modernistas, mas
têm o mesmo tipo de brincadeira que eu sinto Dieter Rams
teria com seu trabalho. O segundo que escolhi
foi Jackson *******, que eu pensei que
teria um bem diferente. Abordagem a isso. Ele fez muitas coisas com
salpicos de tinta sobre tela. E quando eu
amplio o texto do cabeçalho é cuando e o
corpo do texto é Judson. E quando eu
amplio, o texto do cabeçalho quase
parece tinta salpicada na página. Podemos ver que é bastante brincalhão. No entanto, as PII não
se juntam. Parece bastante humanista. Algumas das formas, a forma como a parte
mais estreita
do E está em um pequeno ângulo. Parece que
foi pintado à mão. Há um certo
movimento nas serifas do topo do W e o H. Eu quase posso imaginar que isso seja
desenhado por alguém pingando
tinta para baixo, toque talvez. Mas, no
mínimo, tem que expressionistas sentem a isso. E então, da mesma forma, o corpo do texto tem uma sensação semelhante, eu acho, mas é muito mais sutil. Ele não
tira nada da legibilidade. Se você estava criando uma página
sobre Jackson *******, acho que esses textos, é
absolutamente fantástico. Podemos ver que a forma
do T é muito semelhante, mas esta é muito mais
limpa e fácil de ler. Um tamanho pequeno. Claro, fui para
Serifs com Jackson *******. Eu queria o máximo de extravagância
e detalhe possível. E quando eu coloco em uma
página ao lado desta foto, não pude dizer que estou muito feliz com essa escolha. Sinto que isso comunica um
tipo de mensagem semelhante. Então, finalmente,
criei uma página simples e rápida para Frank Gehry e coloquei um de seus
edifícios arquitetônicos aqui. Ele é um arquiteto semelhante ao Dieter Rams é muito modernista. Eu fui para sans serifs, mas ele tem um
estilo diferente de brincadeira. É pós-moderno, é brincadeira
sem sentido. As fontes que
escolhi aqui são seis tampas e Joseph em areias. E você pode ver que
as sextas maiúsculas querem que as letras minúsculas
sejam na verdade pequenas, que é meio maluco e realmente não
faz sentido. É puramente lá
apenas para ser diferente, o que eu acho que é como Frank Gehry gostaria
muito, para ser honesto. No início, olhe Joseph e
soa talvez não pareça ter essa vantagem
maluca pós-modernistas, mas eu vou ampliar
e você pode ver esse E, é cortado um ângulo realmente
estranho. Está girado. Este Z ou Z. Se você estiver nos EUA, ele tem um lábio estranho onde ele simplesmente pisca no final e
o W cruza. Particularmente estranho. Mas, no geral, ainda
tem um visual modernista. Só tem essas pequenas reviravoltas muito
malucas aqui e ali que apenas
salvam Frank Gehry para mim. Então, meu desafio para você, e realmente acho que você
deve fazer isso quantas vezes você tiver tempo
para fazer é escolher um artista, escolher um designer, escolher um
músico, se quiser, e tentar encontrar um imposto corporal e um texto de exibição que
funciona bem em conjunto. Mas você sente comunicar
a
mesma mensagem que o artista que lhe dá
o mesmo tipo de sentimento. Se você não consegue pensar em
ninguém ou
gostaria de um desafio extra. O que eu acho que poderia ser
muito divertido seria usar um site como um
wiki roulette.co. Acabei de chegar à roleta
Wiki e é aleatoriamente
me dar o nome de um político ucraniano que
também é construtor e eletricista. E acho que pode
ser divertido pegar uma página aleatória da Wikipédia e ver como você
iria redesenhá-la. Quais tipos de letra você escolheria se fosse apenas por
esta página? Você pode ter sorte e
ter uma pessoa como cabelo, mas às vezes você obtém uma
teoria ou um lugar e vê se consegue ter
alguma idéia sobre quais emoções são invocadas
no Marketplace ou aquela teoria ou o que quer que
esteja na página da Wikipédia. E veja se você pode criar uma
composição realmente simples como essa a partir dessa página aleatória da
Wikipédia pode ser o próximo nível
desse desafio. Eu realmente quero que você
vá embora e faça isso, e eu quero que você vá embora e
faça isso pelo menos três vezes. Porque quanto mais
vezes você fizer isso, mais você terá uma ideia do que personalidade e quais letra de
sentimentos
têm e, claro, quão bem eles se combinam com outras marcas ou outras ideias você está tentando
criar designs para.
11. Resumo: Precisamos de duas coisas
antes de começarmos a selecionar um tipo de letra,
precisamos de inspiração. Precisamos de muita inspiração. Onde esses
tipos de letra são comumente usados? Quais opções de fontes existem por aí e como elas são usadas? Então precisamos garantir que conhecemos
nossos requisitos antecipadamente. Os requisitos podem
mudar à medida que tivermos ideias e, se estivermos trabalhando com
um cliente ou uma parte interessada, os requisitos também podem mudar. Portanto, precisamos
garantir que ele seja definido antes de começarmos a comprar. À medida que compramos, existem tipos de
letra gratuitos e pagos. Os pagos serão mais exclusivos, mas também podem ter melhor alinhamento e mais
glifos disponíveis para nós. Os livres são construídos
por amadores que construíram
seu mínimo. Tudo o que eles podem ser feitos pelo Google ou pela Microsoft com muita frequência copiam fontes
populares
e, portanto
, podem dar caracteres menos
distinguíveis. Para a maioria dos projetos. No entanto, algo
como fontes do Google será sua loja, ou talvez fontes da Adobe se você tiver uma conta da Creative Cloud
ou se o seu cliente tiver, letra
profissionais podem ser muito caro e é muito
importante garantir que você tenha a licença correta para nosso texto de exibição
e nossos títulos. Queremos algo único que
expresse o caráter
do aplicativo e lhe dê
uma sensação rara e valiosa. Precisamos de qualquer combinação de fontes
para contrastar uns com os outros, bem
como complementar uns aos
outros em partes iguais. À medida que selecionamos nosso corpo de texto, um dos atributos mais
importantes é como é fácil para
nosso usuário ler.