Como olhar para o tipo: fundamentos da tipografia na Web

1. Introdução: Tipografia é meio mágica. É a coisa que dá voz às palavras. Acho que a linguagem ganha vida por causa da tipografia. Não é apenas o que está escrito, mas é a forma que toma. Dizem que são as roupas que as palavras usam, e eu acho que isso é bobagem e também perfeito. Oi, sou Jason Santa Maria. Sou diretor de design da Slate e co-fundador e diretor criativo de A Book Apart. Ambos os meus trabalhos focavam muito na palavra escrita. Obviamente, os livros estão em grande parte apertado em ardósia, o site é publicações editoriais por isso publicamos muitos artigos todos os dias. Quase exclusivamente, meu trabalho é centrado em torno da tipografia, tudo o resto gira em torno disso. Quero que esta aula te ensine a ver o tipo. Eu quero que você entenda que há diferentes considerações a serem feitas ao escolher um tipo de letra, e coisas que você pode procurar para ter certeza de que as escolhas que você faz vão lhe dar o que você precisa para o seu design. Espero que depois desta aula, você não se contente com talvez uma fonte que está no computador ou a fonte que é usada o tempo todo e qualquer aplicativo que você abrir. Mas você vai procurar algo que se adapte às suas necessidades, algo que o ajude a comunicar melhor sua mensagem. Para colocar todo esse conhecimento em uso, vamos fazer um pequeno site de uma página sobre nós. Isso incluirá uma foto sua, uma breve biografia, e talvez uma manchete e alguns links para suas contas sociais. Eu vou estar fazendo o projeto junto com você. Então, à medida que passamos pela aula, vocês verão as escolhas que eu faço quando estou escolhendo tipos de letra e também a maneira que eu acho que eles devem ser definidos para a minha página. Eu acho que a coisa mais difícil sobre a tipografia para alguém que é novo nisso é que parece que você acabou de abrir a caixa de Pandora. Muitas vezes acho que você pode aprender em uma quantidade tremenda sobre história e tirar biografia de classificações para como as coisas foram usadas 200 anos atrás. Mas realmente se resume a como algo parece, e desenvolver um olho para como algo parece irá guiá-lo muito mais longe do que aqueles outros achados. Estou tão animada para falar sobre o tipo hoje. Vamos começar. 2. O que é tipografia?: Se você é um designer que está apenas começando ou você é novo para projetar inteiramente, conhecimento tipográfico é uma das melhores coisas que você pode aprender. A web é tanto de um meio visual que tudo lá é basicamente feito de tipo. Independentemente de você estar projetando algo ou trabalhando com um designer, ter um vocabulário para tipografia lhe dará uma maior apreciação do trabalho que eles estão fazendo e permitirá que você entenda o que algo parece quando é bom ou quando é ruim. Os princípios da tipografia entre a impressão e a Web são em grande parte os mesmos com duas grandes exceções. Um deles é a web é um meio variável. Então, quando você define o tipo em uma página da Web, alguém pode ver isso em um desktop ou um laptop, um tablet ou um telefone. A maneira que você define esse tipo, precisa entender essas condições e ainda ser legível e ainda ser agradável de ler. Além disso, tudo o que você carrega em uma página da web é um ativo que precisa vir de um servidor ou de outro lugar. Então, quanto mais fontes você colocar na página, mais lento será o seu site. A coisa mais importante sobre a tipografia é que você está definindo tempo para outra pessoa ler. Esse tipo não só precisa ser legível, mas legível. Legibilidade significa que alguém pode realmente ver as letras e entender o que elas significam. Legibilidade significa: “Será que eles querem ler? É algo que é convidativo?” E a maneira como você define o seu tipo, vai transmitir algum tipo de mensagem. Pode ser aberto e agradável, pode ser discreto, pode ser forte, pode ser ousado, pode ser suave e gentil. Todas essas coisas estão embrulhadas na maneira como você define esse tipo. Quando se trata de legibilidade, estamos realmente falando sobre os princípios da tipografia. O espaçamento está certo? O tamanho do seu tipo é grande o suficiente para que alguém possa lê-lo da distância em que estão sentados? A cor fornece contraste suficiente para ser legível? O espaçamento das linhas está correto para o tamanho do tipo que você está usando? Todas essas coisas se unem para basicamente equivaler a algum tipo de legibilidade. Se você está apenas começando com a tipografia, duas das coisas que são considerações fáceis de fazer são apenas tornar seu tipo grande o suficiente para ser lido e escolher um tipo adequado para o que você está tentando dizer. O que pretendemos é algo que se sinta confortável. Boa tipografia desaparece para o fundo. É uma espécie de parceiro silencioso para a história que está sendo contada. Se está chamando atenção para si mesmo, está tirando atenção da história. Quando se trata de tipos de letra e tipos de letra, muitas pessoas usam estes termos de forma diferente e casual, provavelmente está tudo bem, mas um tipo de letra e uma fonte são algo diferente. O tipo de letra é a obra de arte e uma fonte é a forma real dessa arte. O designer, Nick Sherman, resumiu bem isso. Um tipo de letra é para uma música como a fonte é para um MP3. Então, um designer de tipos irá projetar um tipo de letra. Digamos, que é Proxima Nova, e que a fonte existe em seu computador estará em um arquivo de fonte. No caso do Proxima Nova, você pode ter ProximaNova Bold.ttf. Essa é a fonte. Também é útil entender a diferença entre tipografia e letras. Tipografia é tudo sobre configuração de fonte, você está usando fontes para criar resultados reproduzíveis que são exatamente os mesmos sempre. Lettering é mais semelhante a ilustração ou desenho de letras para um tipo de uso único. Classificações são formas de descrever tipos de letra. Assim como você pode ter gêneros de filmes ou músicas, você tem uma espécie de gêneros de fontes também e estes são representativos não só de quando eles ocorreram na história, mas como as letras se parecem. Alguns exemplos podem ser aqueles que você já ouviu falar antes, Serif, Sans serif, Monospaced. Mas há alguns buracos realmente profundos que você pode entrar na história aqui também. Diferentes tipos de serifas de Spur para Bracketed, Estilo antigo, Transitivo e muito disso é provavelmente mais do que você precisa saber em uma base diária. Mas saiba que muitos termos estão lá fora para descrever como os tipos de letra parecem. Anatomia tipográfica é provavelmente exatamente o que você pensa que é. Todas as letras têm partes diferentes e há nomes para essas partes. Este pode ser o caule de uma letra, a abertura dentro de um O, com um A ou G como uma história ou duas histórias, altura X de uma letra. Todos os diferentes pedaços de letras têm nomes. Novamente, você pode não precisar saber tudo isso, mas é útil entender que não só existem nomes para essas coisas mas alguns tipos têm formas de letras diferentes do que outros. Nós vamos colocar tudo isso juntos hoje em nosso projeto. Este vai ser um site de uma página que descreve você. Ele consistirá em uma manchete, um pequeno parágrafo sobre você e alguns links para suas outras contas de mídia social. Eu vou fazer este projeto com você. Vou escolher algumas fontes que eu gosto que podem ser certas para mim. Mas você vai ter que escolher alguns que são certos para você. Depois de terminar, carregue-o para a Galeria de Projetos, onde você também pode ver seus projetos e outros alunos e dar feedback uns aos outros. Estou muito animada para ver o que você inventou. 3. Considerações práticas: À medida que estamos trabalhando neste projeto, vamos chamar algumas considerações técnicas que são úteis para ter em mente ao trabalhar na web. Ao trabalhar na Web, você quer considerar duas coisas principais, o tamanho dos seus arquivos e também o tamanho do seu tipo. Tamanho do arquivo significa quão grande o arquivo será para transferir de um servidor para seu site e o tamanho do seu tipo é apenas o tamanho real que você definiu seu tipo. Quando se trata de tamanho do arquivo, é útil pensar nele como uma imagem. Quanto maior a imagem, maior será o arquivo. Para um Typeface, geralmente quanto mais caracteres contiver, maior será. Como grande parte da Web é composta de texto, você quer se certificar de que seu tipo é legível no tamanho em que você está definindo. Outra coisa a pensar é o formato de arquivo Font que você está usando. Existem alguns tipos diferentes, mas mais do que qualquer coisa que estamos usando WOFF na web, W-O-F-F que vem em duas variedades WOFF e WOFF II. O segundo fornece um pouco mais de compressão. Nós usamos WOFF porque ele comprime fontes tão pequenas quanto elas podem ser agora. Se você estiver usando um serviço como o Typekit ou o Google Fonts, provavelmente não precisa se preocupar com isso. Eles servirão o formato de arquivo certo para você. Fontes geralmente custam dinheiro. Cada fundição e serviço é um pouco diferente. Alguns irão cobrá-lo com base nas visualizações de página que seu site recebe, alguns são gratuitos e têm uso que não tem limites. Se você está pagando por um Typeface, às vezes o custo pode ser um pouco. Pesos e estilos individuais podem ser da ordem de 10 a US $20 a algumas centenas. E, se você estiver usando-os para a Web, esse custo pode aumentar porque muitas fundições e serviços cobram você com base nas exibições de página que você acumula todos os meses. Mais do que não eu uso o serviço como Typekit ou Google Fonts porque eles descobriram o licenciamento para mim. Às vezes, eu vou diretamente para uma fundição e auto-hospedeiro, mas cada Fundição tem seus próprios acordos de licenciamento com os quais você tem que se preocupar também. Em geral, certifique-se de que você tem o direito de usar um arquivo de fonte. Se você estiver usando um serviço, isso já está abotoado para você. Se você está comprando algo diretamente de uma Fundição, eles provavelmente terão seus próprios termos. Se alguém lhe deu uma fonte, você provavelmente não tem os direitos de usá-la. 4. O design de tipos de fontes: Algo que procuro quando olho para tipos de letra. Quero algo que tenha contraste suficiente. Então, uma fonte com menos contraste vai ter larguras muito uniformes em cada um de seus traços. Você não verá muita variação aqui. Mas uma fonte com muito contraste vai ter muito mais diferença entre as partes grossas e as partes finas das letras. Dependendo de como eu vou usar o tipo de letra, eu posso querer mais ou menos contraste. de letra com muito contraste podem ser difíceis de usar para texto porque eles têm que ficar tão pequenos, as diferenças entre esses thicks e tons tornam-se mais pronunciadas e isso pode afetar a legibilidade. altura X refere-se ao tamanho das letras minúsculas contra as letras maiúsculas. Você pode ver que aqui, o tipo de letra à esquerda tem uma altura X maior do que o tipo de letra à direita. O que isso significa é que há basicamente mais corpo nas letras do tipo à esquerda do que aquele à direita que ajuda com a legibilidade. Muitas vezes, quando você está configurando tarefas em execução como você veria em um artigo ou um parágrafo, essa legibilidade pode realmente somar. Então, se você está definindo algo mais do que dizer um parágrafo, se você está fazendo um artigo ou algum tipo de livro, você quer escolher um tipo de letra que vai ser não só legível, mas vai manter bem esse tamanho do tipo. O tipo de letra à direita não é necessariamente uma má escolha, mas pode ser um pouco difícil de ler por causa do tamanho dessa altura X. Como a maior altura X dá um pouco mais de corpo, há basicamente apenas mais informações para definir como uma letra se parece. Uma coisa que é realmente importante para manter o controle é, se o seu tipo tem todos os caracteres que você precisa muitas vezes isso realmente se resume a pontuação. Algumas três fontes ou fontes de exibição podem não ter um conjunto de caracteres completo, elas podem ter apenas letras. Mas não com o tipo de execução definido ou realmente qualquer tipo de tipo. Muitas vezes você vai precisar de algum tipo de pontuação, você precisa de aspas, você precisa de pontos e vírgulas e um conjunto de traços. Estes irão certificar-se de que qualquer tipo que você deseja definir você terá os formulários certos para. Se o seu tipo de letra está faltando algumas dessas marcas importantes, o navegador pode cair de volta em uma fonte diferente algum tipo de padrão e ele vai parecer realmente discordante com o tipo de letra que você está usando. Isto também é importante se o seu texto for traduzido para outros idiomas. Muitos idiomas exigem algum tipo de formas acentuadas ou um conjunto de caracteres maior que pode não estar contido em um idioma baseado em latim em si. Se eu vir que a fonte está faltando esses caracteres chave, eu geralmente vou continuar procurando. Outra consideração a fazer ao escolher um tipo de letra é certificar-se de que ele tem todos os pesos e estilos que você precisa. Normalmente, você precisa de um romano ereto e um itálico e um ousado e que deve ser sobre isso. Alguns tipos de letra podem não incluir aqueles ou pode incluir alguns pesos adicionais mais pesados, semi-bolds coisas como isso, bem como negrito e itálico. Eu normalmente não me preocupo tanto com ousado e itálico porque é uma espécie de dupla ênfase. E é uma coisa a menos que você tem que carregar em sua página. Ao procurar um tipo de letra. Gosto de procurar formas de letra únicas ou, pelo menos, reconhecíveis pelo que são. Muitos tipos de letra podem ter letras que são semelhantes entre si e está tudo bem. É isso que os torna coesos. Mas, quando uma forma de letra pode ser confundida como outra, isso pode afetar a legibilidade. Então, em uma fonte como Helvetica que não tem muita variabilidade e são formas de letra, como esse tipo fica menor é mais fácil confundir algumas dessas letras umas com as outras um D maiúsculo pode parecer um zero. Eu gosto de procurar tipos de tipos que são uma espécie de cavalos de trabalho, coisas que eu posso usar em uma variedade de tamanhos. Então, um tipo de letra que vai olhar bom para um texto em execução, mas também bom para um título, pode ser bom para uma data em um post de blog ou navegação em um site. A maneira mais fácil de determinar isso, é procurar alguns desses recursos. Será que ele tem uma altura X alta o suficiente? As letras são reconhecíveis? E então para realmente cavar e começar a jogar com ele em uma variedade de tamanhos. Então, quais são algumas bandeiras vermelhas que você quer estar ciente ao procurar por tipos de letra? Falamos sobre consistência de traço, mas também há consistência de letterforms. Alguma das letras parece fora do lugar? Eles parecem ser de uma fonte diferente ou tipo de fazer suas próprias coisas? Às vezes, só se resume a sentir quando você vê todas as letras alinhadas e vendo como elas se olham umas contra as outras. Mas, algumas das peças devem parecer parte de uma família. As aberturas e letras do jeito que um descendente cai abaixo de uma linha, do tamanho de uma letra maiúscula. Essas coisas devem parecer consistentes e parte de um sistema. Eu geralmente tento evitar fontes que eu chamo readymades. Coisas que parecem ter design já assado. Tipografia é realmente de onde vem o design e se a fonte tem muita opinião, vai ser difícil fugir disso. Esta pode ser uma fonte que é muito grunhida ou muito extrema. Essas coisas são meio que empacotadas no tipo de letra e você não pode separar seu design deles. A maioria dos tipos bons custam dinheiro. Muitas fundições independentes ganham a vida vendendo esses tipos. Mas há um monte de serviços lá fora também que fornecem nível de entrada e planos gratuitos. As fontes do Google terão muitas fontes que são boas e ruins, mas certamente acessíveis. Typekit outro serviço tem um plano gratuito, bem como tutores pagos e um monte de tipos de letra em lá são realmente bons também. Existem fontes livres que são bem projetadas, mas há muitas fontes livres que não são bem projetadas. É sempre bom pagar pela qualidade se você puder pagar, especialmente se você estiver apoiando uma fundição independente. A coisa boa também sobre pagar por uma fonte é que outras pessoas podem não ter pago por uma fonte, então, você pode ter um tipo de letra que outras pessoas não estão usando. Mesmo que você não queira pagar por fontes, algumas das que vêm no seu computador estão totalmente bem para usar também. Helvetica é usado muito, mas ainda é um tipo muito bom. Georgia, Verdana até Times, todos eles têm seu lugar. Então, agora nós olhamos para algumas coisas para estar ciente e algumas bandeiras vermelhas para evitar. Mas agora vamos procurar na verdade escolher um tipo de letra. 5. Inspiração tipográfica: Algumas pessoas mantêm imagens de cortes de cabelo que eles podem gostar de ter algum dia ou a maneira que eles podem gostar de estilizar um quarto em sua casa. Eu guardo páginas de tipos que eu gostaria de usar algum dia. Eu mantenho as notícias do tipo porque eu estou realmente interessado em novos desenvolvimentos e novas fontes que saem, e eu gosto de sinalizar tipos de letra que podem ser úteis em projetos futuros. Então, eu coleciono tipos de letra no Pinterest. A maioria deles é dividida por classificações para san serif para serif, script e até mesmo algumas decorativas. Gosto de manter o controle dos tipos de letra dessa maneira porque nem sempre preciso deles imediatamente, mas talvez no futuro, e alguns deles realmente me falam por razões diferentes. Eu poderia gostar que algo é realmente extremamente largo e excêntrico, ou que ele só tem algumas formas muito interessantes e elegantes. Eu não sei para que eu usaria isso, mas ele fala comigo e é útil para guardá-lo em algum lugar para uso futuro. Então estes em particular, são um pouco mais decorativos. Alguns destes podem desviar um pouco para o território pronto, mas tudo vai depender de como eles são realmente usados. Porque eu mantenho o tipo de letra, eu acho que essas placas são muitas vezes minha primeira parada quando eu estou procurando um tipo de letra, porque eu coletei o suficiente que eu sei que há muito aqui que eu gosto, e é mais fácil apenas passar por alguns desses primeiro tipo de como eles são pré-aprovados para pelo menos consideração em vez de apenas saltar para grandes listas de tipos em outro lugar. Estas são algumas das minhas fontes favoritas agora. Essa lista de tipos de letra que eu quero usar muda muito, mas estes são aqueles que falaram comigo de alguma forma. Este primeiro, Harriet, é um tipo de serif muito interessante, muito contrastado. Você pode ver que ele tem um monte de looks diferentes dependendo de como você deseja usá-lo. De usá-lo realmente pesado e todas as tampas para alguns dos usos itálico. Tem um belo fluxo para ele e algumas dessas letras são decorativas sem ser demasiado arrogante. Se você está cansado de usar Helvetica, mas ainda quer um san serif muito claro e agradável, Proxima Nova é uma escolha fantástica. As letras são muito abertas, há uma altura X muito grande, e vem em uma variedade de pesos e tamanhos também. Do regular ao condensado e comprimido, as letras são um pouco mais abertas, especialmente os espaços abertos, como dentro de C ou E. Eles não seriam tão fechados como Helvetica é. Mallory é outro san serif muito bom e como um estilo mais novo. Tem algumas características muito interessantes que lhe dão um pouco de peculiaridade e um pouco de singularidade. O que é bom também é este tipo de letra foi projetado para funcionar muito bem para tamanhos pequenos, então você pode realmente vê-lo aqui na margem em algumas configurações menores, e ele se mantém muito, muito bem para texto como este. Não há diretrizes reais para o que funcionaria melhor para o texto, tamanho pequeno ou grande, realmente depende de como as formas de letra se parecem. Isso funciona bem porque algumas das coisas que temos olhado antes tem uma altura X alta realmente agradável e algumas letras realmente abertas, modo que quando ele fica pequeno, é muito legível. Você pode ver todas essas letras claramente, e você pode dizer o que elas são e lê-las. Mas isso não significa necessariamente que um serif faria mal na situação também. A entrada é uma família monoespacial realmente fantástica que também é personalizável. Você pode personalizar o que você deseja que algumas das letras se pareçam quando há versões diferentes. Existem variantes de coisas como o número um ou um zero. Fontes monoespaciais são geralmente usados para aplicativos de codificação, e este é realmente o que eu uso quando eu código sites. Mas este é um muito interessante, e que ele se mantém muito bem para o texto em um site também. A fonte monoespacial não é necessariamente san serif ou serif para realmente qualquer coisa diferente das letras ocupam a mesma quantidade exata de espaço para cada caractere. Então, cada caractere ocupa exatamente a mesma quantidade de espaço horizontal, modo que as letras estão sempre indo para alinhar em uma grade muito específica. Tanto assim que você pode realmente contar as letras e alinhar e prever exatamente quantas vão caber, e será sempre o mesmo. frete é uma superfamília, e o que isso geralmente significa é que, há mais de um tipo de tipo dentro dessa família que pode ser um serif e um san serif. Frete é muito bom porque a superfamília inclui não apenas texto em san serif, mas alguns tipos de letra de uso maior, bem como um display. Então, esta é na verdade uma dessas famílias em que você pode ficar completamente dentro e apenas par, dizer, o san serif com o serif e provavelmente chamá-lo de um dia. Freight tem algumas letras realmente bonitas, mas uma das minhas coisas mais favoritas sobre ele é, ele tem itálico fantástico. Eles são muito expressivos e eu me sinto super encantador. Eles só têm um olhar muito interessante para eles. Sobre o tema de estilos adicionais, se você estiver definindo algo para executar texto, geralmente é útil ter um itálico e um negrito muito bom, que você possa alternar para enfatizar as coisas quando precisar. Muitas vezes estes são bastante simples e você não precisa necessariamente se preocupar com eles. Mas esta é apenas mais uma consideração a fazer ao escolher o seu tipo de letra. Certifique-se de que o itálico parece que é itálico, e é suficientemente distinto do normal vertical, e que o ousado parece ousado o suficiente para se destacar. Se você quiser acompanhar a tipografia, geralmente é útil encontrar alguma fundição que você gosta e se inscrever para seus boletins informativos. Mas há uma série de sites lá fora também que post tipo notícias. Um dos meus favoritos é, Fonts In Use, que não só mostra tipos de letra, mas projetos nos quais eles são usados. 6. Encontrando o tipo certo de fonte: Então, quando se trata de escolher tipos de letra para seus próprios propósitos, existem algumas maneiras de abordá-lo. Eu, pessoalmente, gosto das coisas abstratas para fora um pouco. Gosto de escrever alguns adjetivos do que procuro e depois encontrar tipos de letra que se parecem com essas coisas. Não é muito longe de pensar em como você pode se aproximar de uma roupa, ou de uma cadeira em seu quarto, ou até mesmo estilos musicais. Então, se pensarmos nisso como uma cadeira, digamos que queremos algo moderno, pode ser muito mínimo. Pode não ser muito adorado de forma alguma. Pode usar madeira, e pode revelar muito dessa madeira. Talvez não haja muita cor. Talvez a forma seja muito elegante. Pensando em adjetivos como este, ajuda você a encontrar os atributos físicos que podem incorporar essas coisas. Então, se você está procurando algo que é forte e poderoso, você pode encontrar letras que são realmente grossas. Se você está procurando algo que tenha um pouco de delicadeza ou um pouco de elegância, talvez essas letras sejam finas ou tenham um pouco de roteiro para elas. Eles são de baixa vazão. Este exercício com adjetivos é muito semelhante. Se você já fez um exercício de branding para sua empresa, você encontra palavras que podem descrever essa empresa ou se você tem a tarefa de apresentar um amigo a alguém novo, como você pode descrevê-las? Então é fácil fazer uma correlação um-para-um entre um adjetivo e um tipo de letra. Mas é aqui que a tipografia fica realmente interessante. Você também pode usar esse mesmo exercício para encontrar contrastes para justapor esses adjetivos usando o tipo de letra de uma maneira diferente. Uma coisa que é fácil de cair é encontrar um tipo de letra que é uma espécie de pronto que parece um pouco próximo demais do que é que você está tentando emular. Se você está projetando algo para um filme de terror, você pode encontrar o tipo de letra que está realmente pingando em sangue ou se você estava projetando um logotipo para um playground, talvez isso seja feito de blocos de construção infantil. Essas coisas só podem dizer uma coisa. Ready-mades só será capaz de ser uma coisa. Então, é mais útil encontrar um tipo de letra que tenha algumas dessas qualidades, mas então você destaca através do design esses adjetivos. Como a tipografia é uma espécie de voz do seu design, você quer ter certeza de que seu design tem sua própria identidade única. Então, se você estiver usando uma fonte de bloco de construção, assim como todos os outros que estão fazendo um logotipo do playground. É importante ser capaz de se destacar. Então, procure alguns dos outros atributos que podem ser úteis para incorporar também. Reuni algumas fontes aqui que evocam alguns dos adjetivos que estou olhando. Primeiro, temos algo que é um pouco mais literário. Estes parecem ser lidos em casa num livro ou numa revista. Você lê-lo-ia em parágrafos longos. Muitos destes têm serifas e parecem peças antigas do tipo livro. Dependendo do que você precisa, pode ser difícil escolher entre uma fonte neste tipo de uso. A melhor maneira de olhar para eles é definir algum tipo neles e ver como é ler neles. Aqui estão alguns que eu sinalizei como sendo elegantes. Muitas vezes, isso geralmente significa letras muito simples e ou algumas letras de alto contraste ou algumas letras muito finas. Nós equiparamos isso com algo que geralmente é chique ou talvez um pouco caro. Você também pode conseguir isso com algumas fontes de texto de script. Por causa desse tipo de olhar fluído para eles, eles sentem que são um pouco mais caros. Se você quiser evocar poder ou força, você pode procurar algumas letras muito densas. Não apenas negrito, mas letras que têm espaços muito fechados. Estes podem incluir traços grossos ou letras muito bem embaladas. Algumas serifas de estilo antigo, especialmente serifas de laje, fazem isso muito bem. Você também pode olhar para algumas das serifas sans mais grossas e pesadas, tanto em alguns dos góticos e alguns dos mais novos estilo sans serifs. Como você pode esperar, contrastar duro com algo suave ou leve pode significar apenas usar um peso mais leve do mesmo tipo de letra. Isso tem algumas correlações com o que chamaríamos de elegante, pois algumas dessas letras são finas. Mas ser macio também pode significar arejado. Então, procure formas de letras que tenham grandes espaços abertos que se sintam meio flutuantes. Uma maneira de ter certeza de que você não está desviando muito para um ready-made é ver se esse tipo de letra pode ser usado para outra coisa. A coisa boa aqui é que você tem alguma flexibilidade. Não há regras reais ou escolhas corretas na topografia. Há escolhas diferentes. Então, o que é leve e arejado para alguém também pode ser elegante para outra pessoa. Há muitas maneiras diferentes de obter o mesmo sentimento. Então, quando penso em como me descreveria, os adjetivos que compunham o meu design, penso em como me considero um designer. Eu me sinto como se eu fosse uma espécie de colarinho azul, não super-intelectual, mas um pouco de livros, mais como um livro em vez de uma edição especial de um livro. Então, eu não estou definido em um serif ou um sans serif para começar, mas eu quero algo que se sente um pouco livreiro, mas sendo realmente meio denso e forte também. 7. Escolhendo seus tipos de fontes: Então, uma vez que temos alguns adjetivos definidos e talvez até tenhamos visto algumas fontes ou tido uma idéia geral do que estamos procurando, para onde vamos a seguir? Eu montei uma lista de sites que eu gosto quando estou procurando por tipo. Algumas delas são fundições, algumas delas são blogs e outras fontes de notícias. Eu os incluí na seção de recursos da turma. Typekit tem um mecanismo de filtragem muito útil, onde você pode entrar e filtrar por classificação, bem como o uso pretendido. Então, digamos que eu quero um sans serif para parágrafos, eu clico nesses botões, eu quero ter certeza de que talvez ele tenha um tipo muito de peso normal, a largura é normal, talvez eu queira um contraste muito baixo, e Eu sou dado um monte de realmente boas opções que eu posso, em seguida, verificar com mais detalhes. Se você tem uma conta ou não, isso é gratuito para, pelo menos, navegar. Eu geralmente divido o tipo em duas categorias; Tipo para um Momento e Tipo para Viver com. Tipo para viver com é o tipo de coisa que você tem que ler muito. Então, este pode ser um artigo ou um monte de texto fluído que você veria em um livro ou uma revista. Type for a Moment é uma espécie de manchete. Isso poderia ser um pouco mais expressivo e tem um pouco mais de flexibilidade para ter letterforms interessantes ou coisas que não necessariamente aguentariam muitos textos, mas são boas para algumas palavras. Como você tem muito mais flexibilidade com essas fontes por um momento, você pode ser um pouco mais expressivo com elas. Você pode usar uma fonte de script ou algo que é o que nós chamaríamos de tipografia de exibição. Na fonte de exibição, você normalmente usaria apenas grande e para uma pequena quantidade de texto. Você não gostaria de colocar um parágrafo nele, mas é bom para uma manchete. Você tem a opção de usar um tipo de letra para seu layout, mas muitas vezes, você pode querer emparelhar com outra coisa. Isso é bastante comum quando se trabalha na web ou realmente qualquer tipo de design de publicação. Poderíamos gastar muito tempo apenas no emparelhamento de tipos de letra, mas como algumas diretrizes gerais, muitas vezes você quer procurar contraste. Se uma fonte já está fazendo uma coisa para você, você provavelmente não precisa escolher uma fonte que faça uma coisa semelhante. Então, se estiver usando um sans serif, uma maneira fácil de contrastar é escolher um serif. Da mesma forma, se você está escolhendo um serif, vá com um sans serif para outra coisa. Há também uma espécie de pedaços dessas letras que você pode pegar. Há uma natureza esquelética na aparência de uma letra. Talvez seja a redondeza da forma de letra, a abertura de um personagem, a altura de algo ou a espessura de algo, e você pode meio que ecoar isso com o que você emparelha. Alguns dos maiores erros que vejo na maioria das vezes quando se trata de emparelhamento tipo é escolher algo que tem muitos traços semelhantes. Dois serifs juntos ou dois sans serifs juntos que fazem coisas muito semelhantes geralmente não são tão úteis. O que estamos procurando é construir uma paleta realmente forte para que tudo nessa paleta esteja fazendo um trabalho diferente e apoiando seu próprio peso. Com o tempo, você provavelmente vai começar a desenvolver sua própria paleta pessoal de tipos de letra que você gosta. Não há nada de errado em usar o mesmo tipo de letra uma e outra vez. Na verdade, é muito gratificante encontrar novos usos e novas maneiras de usar esse tipo de letra. Não sinta que tem que tentar algo novo o tempo todo. Eu provavelmente tenho cerca de 10 tipos de letra que eu costumo usar quando estou começando um projeto. Às vezes acabo usando isso até o final do projeto, mas às vezes eles simplesmente se configuram e evocam um sentimento que eu estou procurando desde o início. Esta é muitas vezes uma abreviação útil porque permite que você entre no design mais rápido e não gaste todo o seu tempo apenas procurando um tipo de letra. Então, essas fontes podem evocar algo como força ou apenas ser realmente bom para o texto. Agora que eu tenho uma boa idéia do que eu estou procurando, eu estou pronto para começar a brincar com o tipo um pouco para ver como ele vai funcionar com o conteúdo que eu tenho. Eu peguei uma biografia que eu quero colocar no meu site e o que eu geralmente gosto de fazer é reunir todo o conteúdo que eu sei que vou estar usando e tipo de colocar tudo na minha frente. Como se eu estivesse juntando os ingredientes para cozinhar algo. Então, eu sei que eu vou ter algum tipo de manchete que para mim vai ser meu nome, minha ocupação e minha localização, e então um parágrafo curto que é uma espécie de biografia para mim e o que eu faço. Logo de cara, podemos dizer que temos o nosso Tipo de Momento e Tipo para Viver Com. Você tem um parágrafo que queremos que alguém leia, então isso vai ser mais como o texto de um artigo, e então temos outra coisa que é mais como uma manchete. Nós provavelmente poderíamos ser um pouco mais expressivos, este tipo provavelmente será um pouco maior, e talvez esta seja uma espécie de âncora visual para a nossa peça. Então, vamos começar apenas assumindo que isso será um pouco maior. Podemos fazer isso maior e então podemos começar a experimentar algumas das fontes que encontramos antes. Você tem algumas opções sobre como proceder. Você pode começar com seu tipo de corpo e encontrar um tipo de letra que vai ser muito bom para isso e, em seguida, trabalhar na manchete depois ou você pode começar com a manchete e trabalhar no tipo de corpo a seguir. Para o meu artigo, porque temos um tipo tão grande de manchete, quero deixar que isso seja mais um ponto focal. Então, vou começar por aí. Alguns dos rostos tipo que eu gosto têm pesos muito densos. Este é um serif e tem algum contraste realmente agradável, bem como algumas áreas muito densas de espaçamento. É uma espécie de armadilhas em um monte de espaço em branco entre as letras. Você pode ver como o E está muito fechado e não há muito espaço dentro das aberturas e letras como o D e o P e o H Este outro tipo de letra é muito bom, também. Este é um tipo muito, muito denso de blocos sem serif, parece que pode ser um reboque de trator ou algo assim. Ambos parecem muito bonitos, mas acho que estou mais inclinado para o serif. Eu gosto que ele traz em um pouco de que qualidade bookish que eu estava falando, mas não é excessivamente decorativo também. Agora que eu sei que vou usar este serif, vamos olhar para o nosso tipo de corpo. Então, uma maneira que podemos ir é apenas contrastando o serif. Poderíamos ir com algum tipo de sans serif que parece muito bom, digamos fonte sans. É um tipo de letra que eu acho que parece muito bom. É legível em tamanhos pequenos, tem um ritmo muito bom. letras são muito bem resolvidas. Ele tem todos os pesos e estilos que eu preciso e fornece um contraste muito agradável para o nosso serif para a manchete. Poderíamos também ir numa direcção diferente. Poderíamos tentar algo que seja um serif também, algo que talvez tenha uma sensação diferente do que a nossa manchete, algo que seja um pouco mais brega e tenha um pouco mais de excentricidade. Ele tem algumas letras que não são necessariamente perfeitamente quadrados e têm um pouco de caráter para eles. Mas isso pode ser um pouco próximo demais da nossa manchete, não só porque é um serif, mas porque realmente não fornece muito mais variabilidade do que se usássemos nosso serif da manchete como corpo tipo dois. Eu acho que eu prefiro ir com um pouco mais de contraste em nosso tipo de corpo. O sans serif fornece contraste que estou procurando, mas também cumpre todos os meus requisitos técnicos. Agora que selecionamos alguns tipos de letra, é hora de olhar para como realmente queremos um conjunto de tipos isso. Vamos analisar o espaçamento entre linhas e o tamanho do tipo, bem como o alinhamento com os outros elementos em nossa página, notavelmente uma foto e alguns links adicionais fora do nosso site. 8. Layout: dimensionamento e espaçamento: Então, hoje, estamos focados principalmente em fazer uma composição de design em vez de uma página web, mas o processo que estamos usando é basicamente o mesmo. Estamos procedendo de uma forma levando em consideração todas as coisas que precisaríamos se estivéssemos projetando um site. Então, mesmo que eu esteja fazendo isso em um aplicativo de design de desktop, eu estou pensando sobre como isso precisaria ficar na web. Na seção de recursos, vou postar alguns links para como você pode realmente obter essas fontes em seu site, quer você esteja ou não hospedando você mesmo ou usando um serviço como o Typekit. Então, agora que temos nossas fontes escolhidas, nós realmente mergulhamos na própria tipografia. A tipografia é mais uma prática de definir o tipo e a combinação de todas as decisões que tomamos. Este é o lugar onde o design realmente se junta. Então, temos o nosso tipo de manchete e o nosso tipo de corpo. Queremos começar a pensar sobre como estes interagem com os outros elementos da nossa página. Então, sabemos que vamos usar uma foto, então temos uma grande foto minha que sabemos que vai estar na página, e podemos mascarar isso em uma forma menor depois. Mas podemos começar a pensar sobre como esse layout vai realmente funcionar. Desenvolvi uma grade muito simples para nos ajudar a dimensionar e alinhar as coisas. Um tipo de manchete pode ser grande porque não vai ser lido por tanto tempo, então podemos fazer isso tão grande quanto quisermos. Precisamos ter certeza de que a altura da linha também nos dá ar suficiente, que o espaçamento entre nossas linhas não pareça muito apertado e congestionado. Em geral, quando estamos falando de altura da linha para executar texto, quanto mais longas forem suas linhas, mais altura da linha você precisará entre elas. Basicamente, porque é um pouco mais difícil para o seu olho terminar em uma linha e voltar para o início da próxima, se eles estão muito apertados. Para o comprimento da linha, queremos que ela caia em algum lugar ao longo de um espectro de cerca de 45 a 75 caracteres ou assim por linha. Essa não é uma regra difícil e rápida, mas é uma boa diretriz. Podemos espaçar isso um pouco mais. Temos alguns termos aqui que sabemos que são livros ou coisas que precisarão ser itálico porque são publicações. Então, é uma coisa boa nós escolhemos o tipo que tem um bom itálico porque nós estamos usando isso um pouco aqui. Então, nós temos uma grade muito simples configurada aqui, nós sabemos que nosso tipo vai ser sobre esse tempo, e nós também queremos ter alguns links para alguns de nossos perfis em outro lugar. Para mim, eu queria ter um link para contato para me enviar e-mail, bem como minhas páginas do Twitter e Dribbble. Agora, não precisamos necessariamente fazer nosso parágrafo e nossa manchete da mesma largura. Na verdade, o nosso parágrafo poderia provavelmente ser um pouco mais estreito, especialmente se colocarmos essas ligações ao lado dele. Isso cria um bom equilíbrio. Temos uma boa resolução e uma caixa para este layout que se sente muito bem. Se quisermos trazer esta imagem para o layout, temos algumas opções. Podemos encaixá-lo dentro deste layout em algum lugar, talvez entre o título e o parágrafo, podemos trazê-lo para o lado, ou permitir que esses elementos se sobreponham um ao outro. Tenho algumas diretrizes que gosto de seguir quando estou projetando. Em geral, eu quase sempre vou fazer as coisas um pouco maiores se eu tiver medo de que elas estão sendo muito pequenas. Eu não sinto que você pode realmente ir muito grande na web porque legibilidade é muitas vezes uma preocupação dependendo de diferentes tamanhos de tela. Nem sempre é uma coisa difícil e rápida de seguir quando se trata de design, mas geralmente, eu prefiro tornar as coisas maiores em vez de tê-las muito pequenas. Você também deseja configurar alguma hierarquia para suas informações. Pensa em como queres que alguém leia isto. Nós temos nossa manchete, que vai ser maior e no topo, então é bem óbvio que eles vão começar por lá muito provavelmente. Além disso, queremos que eles pulem para o parágrafo e depois encontrem nossa informação secundária depois disso. A maneira como nós colocamos isso para fora, bem como o tamanho dos elementos, determina como esse fluxo realmente vai. A grande coisa vem primeiro, então esse bloco ou um pouco de conteúdo virá em segundo lugar, e então nossa lista menor para o lado direito virá por último. O caso em que você definiu seu tipo é realmente importante. Algumas pessoas podem definir uma manchete em maiúsculas, o que é certamente uma opção. Todas as tampas podem ser gritantes, não só parece que você pode estar gritando em seu design, mas reduz um pouco a legibilidade. Essas formas de letras maiores parecem ocupar a mesma quantidade de espaço, são um pouco mais difíceis de distinguir. Em geral, eu uso todas as maiúsculas com moderação quando pode ser apenas uma palavra ou pode melhorar o significado de algo. Então, essas ligações para o lado, isso seria bom. Poderíamos colocar isso em maiúsculas e eu sinto que eles ficariam bem, mas talvez não nossa manchete. Se o texto tiver caracteres especiais ou pontuação, como aspas e apóstrofos, você deve estar ciente de que está usando os certos. Um erro comum é usar o que é chamado de aspas estúpidas. Estes geralmente se parecem com aspas retas e apóstrofos. Eles são um vestíbulo remanescente da era das máquinas de escrever quando o espaço em um teclado era realmente valioso. Então, eles precisam fazer a mesma marca para abrir e fechar aspas. Mas uma boa tipografia usa aspas inteligentes, esses encaracolados. Isso se encaixa mais em linha com o tom do tipo que você está usando e não se destaca como um erro. Sempre que possível, você deseja usar aspas inteligentes e apóstrofos. Diz-se frequentemente que a música é realmente o espaço entre as notas, e a tipografia é muitas vezes sobre o espaço entre as letras. Quando se trata de seu layout, o espaço ao redor dos elementos geralmente pode ser tão importante quanto os próprios elementos. A fim de dar ao design um pouco de espaço para respirar e ao leitor um pouco de espaço para entender e compreender o que está na frente deles, é bom não embalar muito o layout. Você não quer ir borda a borda com todos os seus elementos ou ter o seu tipo em seu rosto. Você quer dar-lhes um pouco de espaço para respirar e para encontrar o seu caminho através das próprias páginas. Quando eu estou preocupado se algo não é bem legível ou se eu quero ter certeza de que o tamanho do tipo que estou usando é certo, eu costumo trazer um amigo para me dar uma verificação rápida do intestino para ter certeza de que ele é legível e que os tipos de letra que estou usando são legíveis. Então, eu brinquei um pouco mais com o meu layout. Eu decidi fazer a foto não só sentar em um círculo, mas ser sobreposta pelo tipo. Eu acho que isso cria um pouco de interesse e um pouco de um ponto focal e conecta os elementos um pouco melhor. Minha manchete ficou um pouco menor e agora está ocupando cerca de metade do nosso layout. O parágrafo abaixo um pouco menor também, e nossos links para o lado agora têm ícones para ir com eles, apenas para um pouco mais de interesse visual. Como esses elementos estão se sobrepondo, preciso ter certeza de que há contraste suficiente para que esse tipo possa ser lido em cima da minha foto. Então, talvez o que eu preciso fazer é tornar uma cor de fundo um pouco mais escura, a foto pode se misturar um pouco, e então meu tipo no topo pode ser revertido em branco. A manchete também, talvez possamos dar a isto uma cor e torná-lo um pouco mais brilhante. Esses links podem ser secundários, talvez também sejam brancos, ou talvez apenas uma versão complementar da nossa paleta de fundo. Isso nos dá contraste suficiente para que o tipo possa ser lido em cima da imagem. A imagem é grande o suficiente para não nos preocuparmos com isso ser tão visível. Pode ser mais um pouco agradável elemento de design sutil para o fundo. Nosso tipo ainda é grande e legível, e nós fornecemos um pouco de contraste agradável e interesse com as opções de cores. Agora que temos algo que está funcionando bem, podemos brincar com outras opções de cores. Talvez não queiramos esse cerco mais escuro, mas vamos com algo um pouco mais brilhante. Nosso amarelo não lê tão bem na parte superior da tela, não há tanto contraste. O branco ainda é mais bonito, muito bom. Talvez queiramos ir com algo mais quente. Isso funciona muito bem. A cor vermelho-alaranjado salmônia tem muito bom contraste com a nossa manchete. O branco ainda lê muito bem e nossos links aqui estão se aguentando bem. Eu gosto disso, também. Então, antes, quando estamos falando de ready-mades já tendo feito design, é aqui que o design realmente vem. É o arranjo dos elementos na página. São as opções de tipografia, nossas opções de cores, e você pode ver mesmo através dessas cores diferentes que estamos escolhendo, estamos dando ao design uma sensação diferente. A cor tem sua própria história histórica de teoria e ethos em torno de seu uso. Cores diferentes podem significar coisas diferentes em diferentes culturas, e cores diferentes juntas também podem significar coisas diferentes. Então, ao escolher uma cor, você também está dando ao design algum tipo de sensação. Isto é o que você quer procurar, em vez de encontrar uma fonte que tenha o design já cozido, porque você não pode realmente separá-lo disso. Acabou gostando deste azul-petróleo o melhor. Eu sinto que tem o contraste que eu estou procurando, e eu realmente gosto da maneira que as cores estão trabalhando juntas. Agora que eu descobri basicamente como eu acho que o tamanho da área de trabalho deve ser, eu trabalho através de como algumas das outras telas podem ser parecidas, também. Aqui temos um tablet e também um telefone celular. Se este fosse um site maior ou uma publicação, eu poderia ter começado com a visualização móvel primeiro, porque muitas vezes você quer começar com a versão mais pequena e a versão mais simples e rápida, e, em seguida, aumentar progressivamente a partir de Lá. Mas porque eu sabia que este ia ser um site bastante simples, eu não me importava de começar com a versão desktop primeiro. Eu acho que este projeto realmente ilustra como a hierarquia de informações e layout pode realmente desempenhar uma parte importante do seu processo de design. Não é apenas sobre qual tipo de letra você está escolhendo, mas como você usá-lo em seu layout. Esses tipos de letra funcionam bem juntos porque eles não só fornecem contraste, mas eles são ambos muito claros e legíveis e eu acho legíveis. Espero que você também explore um pouco disso em seus projetos. Talvez sua manchete seja apenas seu nome, talvez seja mais longa, talvez você tenha muito mais de uma biografia que você queira colocar lá fora, talvez você não queira usar uma foto. Estas são todas as considerações que farão o seu site e o seu design sincronizar ou não. 9. Considerações finais: Muito obrigado por fazer esta aula. Espero que você veja o quanto a tipografia realmente pode adicionar ao seu design e realmente fazer o que você quer dizer muito melhor. tipografia é uma prática que realmente recompensa muito mais pesquisas e aprofundar os detalhes. Espero que através desta classe, você tenha visto como algumas dessas peças de design de letterforms para pontuação para apenas usar tipos de letra pode realmente fazer ou quebrar seus projetos. Se você está procurando algo para enfrentar em seguida, talvez olhar para alguns projetos que você gosta que estão fora no mundo. Veja quais tipos de letra eles estão usando, quais tipos de letra eles estão emparelhando e algumas das considerações de design que eles fizeram. Use uma extensão como web font ninja, que eu tenho ligado nos recursos, passe o mouse sobre qualquer pedaço do tipo que está na página e ele vai dizer-lhe o que é. Você também pode clicar nele e digitar o que quiser na mesma fonte. Esta é muitas vezes uma boa maneira de entrar no cérebro de um designer e também descobrir como melhorar seus projetos. Adoraria ver seus projetos. Por favor, carregue-os para a galeria do projeto para que possamos dar feedback uns aos outros. Obrigado mais uma vez. Estou ansioso para ver seus projetos. 10. Qual é o próximo?: maneira.