Home/Artigos/Guia de Fontes da Web
Tire o mistério da seleção de fontes com a nossa orientação passo-a-passo
Se você acertar, a tipografia pode ser incrivelmente poderosa. Volte-se para os escritos de Robert Bringhurst, cujos Elementos do Estilo Tipográfico têm servido como um texto sagaz de referência há décadas, e você encontrará uma articulação de alto nível da arte. A tipografia "existe para honrar o conteúdo", de acordo com Bringhurst, e quando é bem feita, "revela cada elemento, cada relação entre os elementos e todas as nuances lógicas do texto".
Se você acha essas palavras inspiradoras ou intimidantes, o fato é que a escolha tipográfica correta sempre reflete as necessidades específicas do projeto em si. Essas necessidades não são apenas estéticas, mas também técnicas e funcionais – e há muito o que você pode contar a partir de trechos de texto à medida que você percorre um menu suspenso de Alegreya até Zapf Dingbats. Certas fontes funcionam melhor nas manchetes, enquanto outras são bem lidas nos parágrafos. Algumas famílias de fontes são grandes o suficiente para incluir scripts internacionais e caracteres especiais. E se a fonte vem em uma variedade de estilos diferentes (como itálico ou letras pequenas) e pesos (de linha fina a ultra-preta), ela oferecerá mais ferramentas para ajustar o design à medida que o projeto se une.
Há muito o que pensar, com certeza, mas algumas das considerações mais importantes são os recursos práticos e funcionais do projeto. Começando com o que você já sabe, pensando nas considerações a seguir, você encontrará uma fonte que atende às suas necessidades.
Comece com o escopo do seu projeto
Você está começando algo que pode durar alguns meses ou mesmo anos, como uma revista, ou é um projeto único, como um slide, logo ou apresentação?
As chances são de que um grande projeto de longo prazo (como um periódico ou boletim informativo) terá uma variedade de diferentes necessidades tipográficas ao longo do tempo. Sua melhor aposta para cobrir essas necessidades diferentes é escolher uma família grande de tipos que inclua uma variedade de pesos, estilos e variantes, como pequenas capas e ligaduras. Famílias grandes tornam a marca mais fácil porque manter uma única fonte ao longo do tempo garante que você será capaz de lidar com situações diferentes sem precisar adicionar outra fonte à mistura. Tente estes exemplos: Alegreya , Alegreya SC , Merriweather , Merriweather Sans , Roboto , Roboto Condensado , Trabalho sem
Mas se esse for um projeto de curto prazo (como um pôster, capa de álbum ou logotipo), talvez você não precise de pesos extras ou das versões condensada e estendida de uma fonte. Você pode até escolher uma fonte com um único peso se achar que é certo para essa tarefa específica. Apenas tenha em mente que a versatilidade de uma grande família de tipos ainda pode ser útil à medida que você faz ajustes finos no texto em um projeto de curto prazo. Experimente estes exemplos: Bubblegum Sans , Graduate , Scope One , Space Mono
O que você quer que sua fonte diga?
Embora o escopo do seu projeto possa restringir sua pesquisa eliminando as fontes que não têm o intervalo necessário ou orientando você em relação àquelas que o fazem, lembre-se de que não há regras rígidas para determinar a fonte com a estética correta. Essa é uma questão de personalidade da fonte, mas até certo ponto a personalidade depende da familiaridade.
Muitos aplicativos e sites ainda usam uma pequena seleção das fontes mais comuns – um resquício de uma época em que essa era a abordagem mais prática para a tipografia digital. Foi uma vez que usar fontes do sistema seria a escolha mais segura, pois você poderia contar com elas em funcionamento e disponíveis na maioria dos dispositivos. Hoje, não há necessidade de fazer concessões, selecionando uma fonte comum de "workhorse". As fontes da Web tendem a ser tão confiáveis ​​quanto as fontes do sistema, mas com uma variedade maior de escolha. Tente estes exemplos: Proxima Nova, Helvetica, Museo, Futura, Brandon Grotesque (popular); Arial, Times New Roman, Courier New, Helvetica, Times, Courier, Verdana, Georgia (sistema); Gibson , Gotham ,Classic Grotesque , Montserrat (fontes da web)
Mas se você ainda estiver interessado em encontrar uma fonte incomum para ajudar seu projeto a se destacar, existem dezenas de fundições de tipos comerciais que vendem fontes proprietárias por uma taxa fixa ou mensal. Se você quer um tipo de letra personalizado e exclusivo, e quem não o faria, pode ser caro e demorado, portanto, comece por procurar citações nas fundições. No lado positivo, quem você contratar provavelmente vai lidar com muitas das preocupações listadas neste guia. Entre suas opções gratuitas, você sempre pode procurar uma fonte da Web menos usada. Como regra geral, a escolha de uma nova versão significa que ela não será usada amplamente – pelo menos não ainda. Nós, claro, somos parciais ao Google Fonts. Dê uma olhada no diretório para ter uma noção de quantas fontes da web estão disponíveis e use as páginas de amostra de família para ver a quantidade de uso de cada fonte na web.
Quanto texto você está escrevendo?
"Designers fornecem maneiras de entrar e sair do fluxo de palavras", escreve a crítica de design Ellen Lupton, "dividindo o texto em pedaços e oferecendo atalhos e rotas alternativas através de massas de informações". Além da personalidade da sua escolha de fonte, Os layouts projetados também usam dicas visuais, regularidade e variação para orientar os leitores naturalmente. E escolher o tipo de acordo com a duração do texto pode dar aos leitores muitas sugestões e atalhos para ajudar na navegação.
Para títulos e subtítulos, você pode escolher uma fonte expressiva, única e idiossincrática, incluindo os estilos Display, Decorative, Handwritten e Script . Esses designs não convencionais e de alto contraste tendem a funcionar bem nesse contexto, porque seus detalhes e sua complexidade visual ajudam a atrair os olhos. Se você quiser usar uma fonte sans serif para pequenos trechos de texto, especialmente em tamanhos grandes, o peso normal tende a parecer um pouco fora do lugar. Considere usar os estilos negrito e compactado. Se você preferir serifas, as fontes de linha fina como Playfair Display ou Rufina tendem a funcionar bem em linhas curtas porque o contraste de alto traçado tende a atrair a atenção do leitor.
O texto de comprimento médio, definido de maneira simples como três a quatro parágrafos, é na verdade bastante flexível, o que significa que você tem opções. Se você está inclinado para uma fonte com serifa, opte por algo no estilo antigo como Quattrocento , um estilo de transição como Libre Baskerville , ou uma laje como Arvo . Prefira um sans serif? Então a melhor escolha seria algo no estilo humanista ou grotesco como Cabin ou Raleway , mas até mesmo alguns estilos geométricos como Montserrat funcionarão. Experimente experimentando alguns deles e veja o que funciona melhor no layout.
Ao compor seções de texto mais longas, excedendo cinco parágrafos, recomenda-se um tipo de letra serifada. Esta é a escolha tradicional para a tipografia de livros, mas também funciona bem na tela. Fontes estilo serif Transição ou estilo antigo, como EB Garamond ou Libre Baskerville , tendem a ser fáceis para os olhos para leituras mais longas, como notícias e artigos de revistas. Embora seja possível usar uma fonte humanista sans serif para longos trechos de texto do corpo, a aposta mais segura é um design familiar de serif que os leitores possam processar rapidamente.
O que importa quando se trata de tamanho de ponto?
Ao escolher fontes da Web, você geralmente precisa ponderar várias considerações em conjunto. Embora o tamanho do seu texto ajude a determinar qual fonte você selecionou, o tamanho no qual você está definindo o tipo é outro fator importante. Em tamanhos relativamente pequenos, até 16pt, tente opções sem serifa como Roboto , Montserrat e Raleway . Em comparação com desenhos de serif, aqueles sem ou semas serifas tendem a ter uma altura x mais alta, definida como a distância entre a linha de base e a linha média de um alfabeto e normalmente a altura da letra 'x', o que torna um desenho mais legível em tamanhos pequenos. Sans serifs também tendem a ter um contraste de curso relativamente baixo e um peso de traçado mais uniforme, o que lhes dá uma "cor" uniforme quando reduzidos e embalados em um espaço pequeno.
"Para um parágrafo, que precisa ser altamente legível, você não deve usar algo com formas ambíguas", diz o designer de tipos Octavio Pardo. Fontes decorativas como a Comfortaa (mostrada acima) podem ser difíceis de ler por completo, de modo que, para textos longos, se apegue a fontes de trabalho muito legíveis como Alegreya ou Bellefair .
Você também pode ter uma ideia da qualidade geral de uma fonte examinando as letras que tendem a exigir mais tempo de um designer de tipos – ou apenas cair na sua lista de prioridades. "Olhe para as formas de 'a', 'g' e os numerais", diz o designer de tipos Octavio Pardo. "Escolhas arriscadas de fontes se revelam nesses glifos. Eles devem ser ousados, mas também legíveis. Você pode permitir designs extravagantes em glifos de baixa frequência como 'v' 'x' 'y' e 'z', além de itálicos. "
Em tamanhos médios – como subtítulos, citações de rascunho ou títulos menores que variam de 16 a 24 páginas – considere usar uma fonte sem serifa no estilo geométrico, grotesco ou humanista. Montserrat , Lato e Quattrocento Sans são bons exemplos. Evite pesos extremos, nem muito grossos nem muito finos, para manter o texto fácil de ler de imediato. Se, em vez disso, você quiser uma fonte Serif contemporânea e não muito livre, procure por algo sem muito contraste de pincelada, como as fontes Arvo , Sanchez e Slabo .
Fontes projetadas para serem usadas em tamanhos grandes, maiores que 24pt, são chamadas de 'Fontes de exibição'. Estes tendem a ter características marcantes que se destacam em tamanhos de pontos mais altos, enquanto que em tamanhos menores essas mesmas características tendem a dificultar a legibilidade. Ainda assim, quase qualquer gênero tipográfico é um jogo justo para textos grandes, contanto que os sentimentos evocados pelo tipo de letra sejam apropriados para o contexto. Este é o momento ideal para usar uma fonte decorativa ou manuscrita com swashes e contraste de traçado muito alto, como Lobster ou Berkshire Swash.. Tente algo altamente geométrico, retro ou até mesmo sujo se atingir o tom certo. Apenas evite fontes com contadores grandes (os espaços interiores fechados de letras como B ou q) e alturas altas de x, já que esses recursos servem para ajudar os olhos com textos menores e tendem a parecer fora de lugar quando são ampliados. .
Quem é seu público e que idiomas eles falam?
Lembre-se de que seu aplicativo ou website provavelmente alcançará usuários em todo o mundo. Mesmo que você esteja fornecendo conteúdo em um único idioma, muitas pessoas usam um recurso de tradução no navegador para que o conteúdo apareça no idioma nativo.
"A tradução automática como um serviço torna quase certa a chance de alguém ver seu conteúdo em outro idioma", diz o designer de livros Eben Sorkin, cujo Merriweather (mostrado acima) foi expandido nos últimos anos para dar suporte a mais idiomas europeus e aqueles que usam o Roteiro cirílico. "Ter os glifos necessários para a sua linguagem disponível ajudará o usuário a se sentir atendido", diz Sorkin. "Quanto mais globais seus clientes, mais você provavelmente se importará com isso".
Em outras palavras, se a fonte escolhida tiver apenas letras latinas básicas, a auto-tradução tirará a tipografia do seu projeto de suas mãos – mudando o layout para outra fonte para essas letras, dando-lhe um "efeito de resgate" onde letras individuais acentuadas mudam e se destacam. A escolha de uma fonte que inclua caracteres para outros idiomas garante que o design do seu site permaneça consistente para uma faixa mais ampla de seus leitores. Isso pode soar como uma batalha perdida, mas há muitas famílias de fontes que incluem suporte multiscript.
Se a sua principal preocupação é que uma fonte permaneça consistente em todo o maior número possível de scripts, considere o uso da família de fontes Noto (mostrada acima).
Mesmo com fontes latinas básicas, você deve verificar se a fonte inclui os caracteres "Extended Latin" usados ​​em idiomas europeus específicos. Considere caracteres acentuados com marcas diacríticas como circunflexo (â), grave (á), trema (ä), overring (å) ou ogonek (ą). Há muito mais, mas a escolha de uma fonte com um conjunto de caracteres latinos estendidos garantirá que as letras acentuadas não sejam padronizadas por engano na versão não acentuada.
Uma família tipográfica deve parecer consistente, até mesmo harmoniosa em diferentes roteiros – o que não é pouca coisa. Designers combinando dois ou mais scripts para uma fonte devem equilibrar histórias separadas e tradições de escrita. Se você espera usar dois scripts diferentes lado a lado, teste alguns conjuntos de texto de amostra para ver se os dois scripts estão confortavelmente juntos.
Fontes da Web como Alegreya , Merriweather , Nunito , Roboto e Quattrocento incluem uma grande variedade de caracteres, pesos e estilos que as qualificam como "superfamílias", e essas cinco superfamílias agora também suportam caracteres cirílicos . Uma ressalva: assim como o latim, existem certos caracteres cirílicos usados ​​apenas em algumas línguas, como sérvio e búlgaro. Para fornecer esses idiomas, verifique se a fonte tem suporte para "Cirílico estendido".
Outras fontes da Web suportam uma variedade maior de sistemas de gravação. Dependendo do projeto, pode ser uma prioridade para sua fonte ter caracteres em árabe , grego ou hebraico . Você também pode encontrar fontes da web para suportar uma variedade de scripts em hindi, como bengali , devanagari , gujarati e tâmil , além de idiomas do sudeste asiático, como o tailandês . Para ver suas opções no Google Fonts , filtre por idioma com o menu suspenso.
Como você pesa a funcionalidade de uma fonte versus seus recursos de design?
O intervalo estilístico de uma família de tipos se divide em duas partes: sua funcionalidade e recursos de design. Funcionalidade refere-se ao intervalo de estilos disponíveis para modificar a aparência geral da fonte. Uma fonte funcional deve ter itálico e uma faixa de pesos de Fino a Preto. Experimente estes exemplos: Barlow , Poppins , Libre Franklin
Os recursos de design de uma fonte são variações estreitamente personalizadas de caracteres específicos. Estes incluem pequenas capitalizações, alternativas contextuais e diferentes estilos de numeração. Letras pequenas podem ser úteis para títulos e cabeçalhos em determinados contextos. Eles podem emprestar sofisticação ao texto adicionando variedade e criando um senso de hierarquia visual. Tente estes exemplos: Carrois Gothic SC , Cormorant SC , Patrick Hand SC
E, embora seja incomum que as alternativas contextuais sejam consideradas "essenciais" para que uma fonte funcione bem, elas podem agregar variedade de várias maneiras que podem ser muito desejáveis ​​para o seu projeto (consulte Montserrat Alternates ). Se você estiver usando uma fonte cursiva ou de script, suas alternativas poderão fazer com que o texto pareça mais "natural", adicionando a variedade que apareceria na caligrafia ( Caveat , Sriracha ). Por outro lado, os caracteres alternativos em uma fonte serif ou sans podem adicionar um toque de distinção que se destaca do texto normal.
Dependendo do que é necessário para o seu projeto, lembre-se de comparar os estilos das figuras da sua fonte. A diferença entre o estilo antigo e o estilo tabular (mostrado acima) afetará o layout e as opções de formatação. Figuras tabulares são frequentemente usadas em tabelas porque cada número tem a mesma largura de caracteres, enquanto figuras Oldstyle lêem mais confortavelmente em parágrafos.
Se você espera usar muitos números, tenha em mente que eles vêm em vários estilos diferentes, destinados a diferentes contextos. Figuras Oldstyle são preferíveis para blocos de texto como parágrafos. Se você olhar de perto, você notará que alguns números estão alinhados abaixo da linha de base que orienta o restante do texto. Isso ajuda na legibilidade de números em longas cadeias de texto. As figuras tabulares são verticalmente centralizadas e monoespaçadas horizontalmente. Isso os ajuda a parecer mais regulares e consistentes em tabelas, daí o nome. Também tenha em mente que apenas algumas fontes incluem sinais de frações adequadas . Idem os cem símbolos de moeda usados ​​em todo o mundo. Tente estes exemplos: Alegreya , Exo , Montserrat , Roboto, Spectral , Google Fonts com recursos OpenType
E se você quiser usar mais de uma fonte?
Com o básico fora do caminho, você pode passar com segurança para decisões mais complicadas, como o emparelhamento de fontes. O emparelhamento pode ser uma questão bastante sutil e complicada, mesmo para especialistas em tipos, mas isso não significa que deva ser totalmente evitado. "Há combinações infinitas e encontrar o par certo pode levar muito tempo", diz o designer Yuin Chen, que liderou a atualização do Google Fonts do ano passado. Há prazer em experimentar combinações diferentes, então abrace o processo e teste quantas opções você puder – o que funciona melhor pode surpreendê-lo.
Alguns emparelhamentos funcionam bem devido ao seu contraste, enquanto outros pares se desenvolvem na similaridade. Diferenças fortes podem fazer um layout parecer mais dinâmico, enquanto o uso de estilos diferentes de uma superfamília adiciona coesão visual. Se você escolheu uma fonte de exibição única e marcante para a titulação, experimente algo mais familiarizado com o texto do corpo. Uma escolha clássica seria usar o estilo sans serif para titulação e o estilo serif para texto do corpo. Tente estes exemplos: Alegreya e Alegreya Sans (similar), Libre Franklin e Libre Baskerville (contraste)
Dica profissional: ao navegar por páginas de espécimes familiares no diretório de fontes do Google, você pode experimentar e personalizar os emparelhamentos populares.
Vale a pena fazer uma pequena lista e conhecer as fontes que você está considerando. Revise toda a gama de personagens e estilos para cada opção. Confira como eles são em cirílico ou tailandês. Encontre uma biografia para o designer e veja como essa fonte foi usada no passado. Acima de tudo, você não quer subestimar suas necessidades tipográficas ou as necessidades de seus leitores. Quanto mais estilos, caracteres e scripts uma fonte suportar, melhor você estará preparado.
A tipografia é uma arte sutil, mas menos elusiva do que sua reputação pode sugerir. Se você já pensou um pouco sobre a organização do seu projeto, seu escopo e seu público, estará preparado para fazer escolhas tipográficas inteligentes.
Vários designers emprestaram seus conhecimentos para a construção deste guia: Yuin Chien, Joana Correia, Dave Crossland, Natanael Gama, Octávio Pardo, Eben Sorkin e Eduardo Tunni.