A escolha da fonte ou tipologia de interfaces de mídias digitais ajuda a definir o impacto visual e a contextualização do conteúdo da página, de acordo com o projeto comercial e editorial. Sua configuração se faz a partir da combinação de HTML com CSS. Baseia-se em fontes disponíveis online ou às fontes pré-instaladas pelo fornecedor do sistema comuns à maioria das plataformas.
No início da web comercial, não havia muitas possibilidades de escolha para os designers de interfaces, as fontes online deviam estar disponíveis no computador dos usuários, para que o browser não precisasse substitui-las pelas de sua configuração padrão.
Seguindo essa tendência, e para aumentar o número de opções de tipologias online, em maio de 2010 a Google lançou um conjunto de fontes de uso gratuito, cujo número cresce continuamente, para serem aplicadas em interfaces online. Outros serviços incluem Typekit (mais de 130 fontes gratuitas, milhares de opções para assinantes do Creative Cloud), e Typotheque (28 famílias, com preço especial para web), MyFonts, Typography, Font Squirrel.
Para usar as fontes hospedadas nos servidores destes serviços, aplica-se o endereço da fonte no <head> da página e configura-se os CSS.
Por exemplo, para inserir no <head> a fonte Cantarell, coloca-se o endereço:
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
E aplica-se a fonte ao CSS:
h5 { font-family: 'Cantarell', arial, san-serif; }
Pode-se também fazer upload da fonte para um servidor web e a partir daí acessá-la com o uso da regra @font-face, que define a origem do arquivo, o modo como se quer chamá-la e seu estilo (normal, bold, itálico), como por exemplo:
@font-face {
font-family: 'texto geral';
src: url('_fonts/nomedafonte.otf') format('opentype');
font-style: normal;
font-weight: normal;
Quando o browser carrega a página ou tela com este código, a fonte também é carregada e aparece nos textos configurados com a fonte.
Alguns padrões de uso de fontes permitem a importação de fontes para uso online. Entre os principais formatos, encontram-se: o TrueType (especialmente para browsers em Windows), EOT (para o Internet Explorer), SVG (browsers como o do iPhone e do iPad), WOFF (funciona compactado em diversos browsers, especialmente no Firefox 3.6 e mais recentes, e pode ser compilado com TrueType ou PostScript). (1)
De qualquer forma, é importante ficar atento aos diferentes modos como cada browser renderiza (ou não) diferentes formatos de fontes. O formato .eot ( Embedded Open Type Font) é reconhecido apenas pelo Internet Explorer, enquanto o True Type (.ttf) e o Open Type (.otf) são mais aceitos pela maioria dos browsers.
Designers que precisam usar certas fontes, podem também optar por convertê-las para os diferentes formatos aceitos pelos browsers através de programas conversores, como o FontSquirrel @font-face Generator. Neste caso, é importante verificar se o uso é protegido por seus autores ou outros detentores de direitos.
Ao escolher uma fonte, é preciso considerar fatores como a legibilidade em tela, a disponibilidade de todos os estilos e estilos adicionais, o código necessário para aplicá-las, a possibilidade de baixá-las e usá-las nos discos locais na elaboração de testes e layouts, as condições econômicas para o uso.
Caso seja necessária a compatibilidade da fonte com os ambientes de todos os usuários, pode ser mais seguro optar pelas usadas universalmente na web:
Com serifa
■ Times New Roman
■ Georgia
■ Courier New
■ Palatino Linotype
■ Book Antiqua
Sem serifa
■ Verdana
■ Arial
■ Helvética
■ Trebuchet
■ Tahoma
■ Comic Sans
■ Impact
■ Lucida Sans Unicode
Monospace
■ Courier New
■ Lucida Console
Para evitar problemas, caso o dispositivo do usuário não tenha a fonte especificada, com a aplicação da fonte default do browser, pode-se usar combinações pré-definidas com as fontes citadas acima ou importar fontes escolhidas para o browser do usuário.
O browser procura a primeira fonte disponível da combinação, e só usará a fonte default se nenhuma das fontes especificadas estiver disponível.
Algumas combinações de fontes tradicionais:
■ Arial, Helvetica, sans-serif
■ Times New Roman, Times, serif
■ Courier New, Courier, mono
■ Georgia, Times New Roman, Times, serif
■ Verdana, Arial, Helvetica, sans-serif
■ Geneva, Arial, Helvetica, sans-serif
Em dispositivos móveis, fontes utilizadas incluem BBMillbank (Blackberry), Droid Sans e Roboto (Android), e Helvética (iOS).
Uso de fontes online
Pesquisas mostraram que leitores leram textos nas fontes Times e Arial (sem serifa) mais rapidamente que na Courier, Schoolbook ou Georgia. De modo geral, a Arial, a Georgia e a Courier foram consideradas pelos leitores as fontes convencionais mais legíveis, embora fontes proporcionais como as duas primeiras aparentem ser mais rápidas para a leitura do que as com espaçamento uniforme, como a terceira (embora isto seja importante apenas se os textos publicados forem longos).
Jakob Nielsen, em pesquisas de 2012, mostra que não há nenhuma forte indicação de que a usabilidade das fontes sem serifa é maior do que a das sem serifa. Na prática, a legibilidade equivale ao que a média dos leitores está acostumada. Assim, a escolha da fonte depende principalmente da escolha do designer, seja devido a conveniências de marca, do conceito a comunicar ou do desenho específico de uma fonte ou estilo de fonte. (2)
As fontes para textos mais longos precisam ser familiares aos leitores, e ter altura x relativamente alta. Precisam também ter os estilos necessários à redação, como bold e itálico, e se adaptar bem ao veículo e dispositivo em que serão veiculadas, seja por criar identidade com a realização de uma tarefa, seja por criar identidade com a marca de um produto, ou identidade geográfica, cultural, histórica com os leitores.
As fontes de textos longos normalmente têm poucos desenhos e elementos que estimulam a distração dos leitores e, se delicadas, continuam legíveis mesmo em tamanhos pequenos. Seu conjunto, na mancha do texto, fica homogêneo, sem letras e detalhes que chamem demais a atenção. Nesses textos, letras sem serifa, em cor contrastada em relação ao fundo, estão relacionadas ao hábito de grande número de pessoas e parecem ter melhor rendimento na tela e facilitar a leitura.
Por outro lado, para logos ou anúncios, ou situações em que o texto é curto e se procura maior efeito emocional, usa-se fontes que chamem mais a atenção e sejam únicas, memoráveis.
Também as características de cada texto podem condicionar a escolha da fonte. Textos com muitas marcações e variações, como títulos, subtítulos, legendas, citações, notas de pé de página, podem exigir diversas variações de peso e de estilos (thin, light, roman, medium, semibold, bold, black, mais as variações em itálico de cada uma).
Fontes como a Open Sans, por exemplo, oferecem grande número de variações e podem ser selecionadas para textos com muitas marcações editoriais.
Também a Roboto, oficialmente usada no sistema Android, oferece muitas variações de estilos.
Aspectos como o uso de maiúsculas e minúscula permanece relevante. O uso dos dois modos misturados em uma sentença (maiúsculas nas iniciais e nomes próprios) permite uma leitura mais rápida do que a de um texto inteiro em maiúsculas. Isto ocorre possivelmente porque a variação vertical entre hastes ascendentes e descendentes provê mais informação para os olhos durante a leitura.
Textos corridos em caixa alta são difíceis de ler e soam com “gritos”, na web.
Também o uso de fontes com diferentes espaços entre as letras facilita a leitura, em detrimento do uso de fontes “monospace”, que têm espaço homogêneo entre os caracteres, o que aumenta o tempo de leitura, especialmente em textos grandes.
Mais de duas fontes diferentes no mesmo projeto aumentam as chances de combinações não muito harmônicas, que podem confundir o leitor e dificultar a identificação das diferentes áreas de informação – cada fonte e estilo deve ter uma função visível. Caso se opte por usar mais de uma fonte e suas variações, estas devem ser suficientemente diferentes para não serem avaliadas como configurações erradas da mesma fonte.
Títulos usados como imagem permitem mais flexibilidade no uso de tipologias, mas aumentam o tempo de carregação das páginas e dificultam a atualização.
(Atualizado em 26.8.2015)
Referências
→ Selecting typefaces for body text, Tim Brown (User Interface Engeneering, acesso em 20.9.2014)
2) Serif vs. sans-serif Fonts for HD screens (Alertbox, acesso em 3.7.2012)
→ What you need to know about webfonts: Part 2, Jason Cranford Teague (acesso em 12.10.2011)
→ What you need to know about webfonts: Part 1, Jason Cranford Teague (acesso em 14.9.2011)
→ Expand your web design font choices, Part 2, Dave Sawyer (acesso em 21.8.2010)
→ Expand your web design font choices, Part 1, Dave Sawyer (acesso em 21.8.2010)
1) WOFF frequently asked questions (W3C, acesso em 18.8.2010)
→ The elements of typographic style applied to the web, Richard Rutter com ajuda de Steve Marshall (acesso em 22.6.2010)
→ Como maximizar a legibilidade de um texto – segunda parte, Jorge Marmion (Instituto Brasileiro de Amigabilidade e Usabilidade, acesso em 10.1.2009)
→ Livro: The elements of typographic style, Robert Brighurst. Point Roberts, WA: Hartley & Marks, Publishers, 1992.
→ Google font directory – font previewer. O usuário escolhe a fonte da Google, o aplicativo gera o CSS para usá-la (acesso em 21.7.2010)
→ W3C CSS3 module: Web fonts – Documento publicado pelo World Wide Web Consortium (W3C) com propriedades que permitem a descrição de fontes por dispositivo ou programa do usuário
Recursos
→ MyFontes -> What the font – Para o reconhecimento de fontes em arquivos de imagens
→ EM Calculator – Conversor de medidas de tamanho de textos de pixels para ems