Princípios básicos de tipografia no Web Design: Estas são as coisas que deves considerar

Mark Max Henckel Última atualização em 21.10.2020
14 min.
typographie grundlagen webdesign
Última atualização em 21.10.2020

Fácil é difícil. Esse é o meu lema. E assim é com o uso de tipografia em web design, de fontes no site - na verdade bastante simples e ainda assim bastante complicado. É por isso que hoje gostaria de te mostrar quais as regras tipográficas básicas que deves seguir para exibir o texto no teu site da melhor maneira possível.

Não é segredo que é difícil para muitas pessoas se expressarem de forma clara e compreensível. Porque deveria ser mais fácil através dos media? Para facilitar isto - comunicação - existe a tipografia. Por um lado, é o conhecimento das fontes e, por outro é um elemento de design para apresentar textos ou conteúdos de uma forma inteligente, apropriada ou "esteticamente apelativa". A distinção entre microtipografia e macrotipografia não é relevante aqui.

Tipografia no web design - Porque é tão importante?

typographie grundlagen webfonts

Não há dúvida de que as fontes podem animar e enriquecer visualmente um site. As fontes - tipos de letra - são elementos importantes de qualquer bom design. Mas na internet, ou seja, no web design, a questão da tipografia está sujeita a condições especiais, que eu gostaria de destacar aqui e que devem ajudar-te a entender melhor a questão das fontes nos sites.

"A boa tipografia não procura tudo o que anda é possível, mas pede o que é necessário."
Kurt Weidemann

Muitas vezes os sites não são feitos por designers gráficos ou designers de media formados, mas projetados e implementados por principiantes ou "habilidosos". Isto pode explicar porque em muitos sites até mesmo as regras gráficas mais simples são desconsideradas. Especialmente quando se trata de tipografia, isto torna-se rapidamente claro. O uso incontido da fonte VERSALETE pouco legível, a falta de contraste entre a cor da fonte e o fundo, assim como a estrutura confusa dos textos, dificultam a leitura dos utilizadores.

Mas é exatamente disso que se trata a tipografia: a legibilidade dos textos. Caso contrário, de que serve ter textos no site se não são bons e agradáveis de ler? Aparentemente, as opiniões divergem sobre como os textos legíveis devem parecer no final. Eu não consigo entender, porque testámos e , comprovámos e regras tipográficas muito simples e úteisa fim de criar textos de facilmente legíveis. Apenas tipografia.

Uma delas é o contraste - a relação de cor entre a cor da fonte e o fundo. Num fórum, critiquei uma vez um layout da web orgulhosamente apresentado exatamente por este motivo. No gráfico chamamos ao fenómeno que o alegado web designer queria vender aqui de "águia branca sobre fundo branco". Neste caso, ele tinha um texto corrido cinza escuro sobre um fundo cinza claro, pelo que o contraste era muito mau.

Isto pode parecer bonito - uma questão de gosto, suponho - mas é extremamente difícil de ler. Relatei isto e descobri que este não é um bom design para mim se eu consigo ler o texto com dificuldade. E eu tenho olhos saudáveis. O que fazem aqueles que têm problemas visuais? Também é um problema muitas vezes subestimado - palavra-chave: acessibilidade. Em qualquer caso, o designer assumiu a posição de que este era o seu design e que o faria desta forma. Já conhecemos a expressão: "Podes fazê-lo assim, mas depois vai sair uma grande m****."

Para mim, isto é mais uma prova do pouco conhecimento que existe em relação à legibilidade dos textos, ou seja, em relação a uma boa tipografia. Durante a minha formação como designer de media (impressa) há muitos anos, tive uma designer gráfica e tipógrafa experiente, com quem aprendi muito.

Web design e tipografia: Os requisitos especiais

typographie grundlagen webfonts

No web design, no entanto, temos outros requisitos de tipografia para além da legibilidade, nomeadamente os requisitos técnicos. A boa legibilidade na internet também significa que a página é carregada rapidamente. Portanto, quando integramos fontes, estamos a lidar com o desempenho do site.

Além disso, deve ser assegurado que os textos sejam igualmente legíveis no maior número possível de dispositivos de saída, o que representa um desafio adicional. No final, com as possibilidades da linguagem de marcação CSS, tens tantas maneiras de intervir na tipografia de um site, que as coisas rapidamente se tornam mais complexas do que o esperado.

E, claro, queremos ter um texto bem estruturado que também aumente a legibilidade, evite a fadiga e tenha um efeito no Google, ou seja, na classificação no motor de busca. Como exemplo, são mencionadas as tags de título H1, H2, H3 etc., o uso de listas e formas de marcação como negrito/forte e em/i, bem como as marcas de parágrafo e outros elementos HTML úteis.

Eu sou fã de fontes padrão. Em primeiro lugar. Quer dizer, não é realmente necessário incluir fontes especiais personalizadas num site. Um exemplo de porque deves integrar a tua própria fonte é a fonte CI. Esta é uma fonte desenvolvida especialmente para as empresas, que tem uma função importante na identidade corporativa. Ou tu é realmente um bom designer, artista ou fotógrafo e dás grande importância a uma aparência extravagante ou muito individual orientada para o design. Por isso, não se trata necessariamente de grandes blocos de texto ou informação escrita.

Uma fonte CI personalizada é normalmente utilizada por empresas maiores que operam com seu próprio departamento de TI e uma torre de servidores. Não existem por isso problemas de desempenho e a incorporação das fontes CI é monitorizada tecnicamente.

Se és um designer e queres mostrar o que podes fazer, é aconselhável usares os serviços de tipografia existentes - em fontes da web comprovadas - a fim de integrares a fonte desejada no teu próprio site de forma segura e eficiente.

Às vezes, parece fácil converter o tipo de letra desejado em formatos compatíveis com a web e integrá-los individualmente. Se isto funciona sempre corretamente a longo prazo, é outra questão. Portanto, eu prefiro neste caso Google Fonts, porque é rápido, seguro e fácil de usar. Mas até isto é talvez uma questão de gosto.

Estas 10 regras de tipografia vão ajudar-te

typographie grundlagen webfonts

Primeira regra e muito simples: menos é mais. Considera os hábitos de leitura das pessoas. Inspira-te em sites que apresentem textos editoriais amplos e aprende.

A legibilidade dos textos está sujeita a certas regras, cientificamente fundamentadas. Elas dizem respeito não só à escrita em si, mas também ao seu ambiente, ao contraste, clareza e estrutura dos textos, bem como à nitidez das suas margens.

1. Tamanho da letra

Depende da fonte e é baseado no design básico do site. Repara que o utilizador tem sempre a opção de alterar o tamanho da fonte no seu navegador ou smartphone. Tenta usar tamanhos de fonte relativos, ou seja, %, EM/REM ou pequeno/normal/médio/grande.

2. Extensão da linha

Isto é claramente subestimado. Foi determinado qual a extensão de texto que as pessoas ainda gostam de ler: É uma extensão até um máximo de cerca de 70 caracteres, que é um tamanho de texto A4 padrão de um documento Word. Basta dares uma olhada nos jornais online para veres a extensão dos seus blocos de texto.

3. Espaçamento entre linhas

Para uma ótima legibilidade, o chamado "espaço entre as linhas", ou seja, a distância entre as linhas individuais de um texto - incluindo a altura de um parágrafo - é de grande importância. Na rede, dependendo da fonte, um bom "line-height" de 140-150% provou ser muito eficaz.

4. Espaçamento entre caracteres

Esta é a distância entre as letras, que é manipulada pelo "letter-spacing". Deve-se ter muito cuidado aqui e usar esta opção de design com cuidado - por exemplo, com determinados títulos. Em caso de dúvida, não configurar.

5. Contraste

A relação entre a cor e a cor de fundo é chamada de contraste. Este deve ser muito alto para texto corrido. O contraste máximo é, claro, um texto preto sobre um fundo branco. Isto é fácil de ler.

6. Estrutura

Isto significa: textos bem estruturados e semanticamente corretos! Em HTML, isto significa, por exemplo, as tags de título H1/H2/H3, as marcas de parágrafo, as marcações de lista, o uso inteligente de destaque por meio de negrito, itálico e cor, etc. Tem efeito direto na legibilidade e também na classificação do Google.

7. Máximo de duas fontes

Muitas vezes uma fonte/ letra por site, livro ou documento é suficiente. Em casos especiais, mais também pode funcionar, mas tens de ser cuidadoso ao usar mais de 2 fontes por documento.

8. Verselete (maiúsculas)

Evita usar maiúsculas nos títulos e no menu. Elas são muito difíceis de ler. No entanto, se estiveres a lidar com palavras únicas, por exemplo NAVEGAÇÃO, poderás usar maiúsculas. Mas não escrevas com letras maiúsculas, fá-lo usando CSS por meio de "text-transform:uppercase".

9. Fontes padrão

Em caso de dúvida e como substituto, deves escolher fontes de sistema comprovadas. Arial, Verdana, Georgia são fontes de sistema tão bem legíveis, que quase todos os dispositivos de saída têm e são sempre bem exibidos.

Um substituto é a fonte seguinte em CSS, como na BMW: "bmwTypeWebBoldAll", "Arial", "Helvetica", "sans-serif"; Aqui, Arial, Helvetica e Sans-Serif (ou seja, a primeira fonte disponível em Sans-Serif) são os substitutos que são exibidos se a fonte anterior ("bmwTypeWebBoldAll") não estiver disponível.

10. Formação contínua

A minha dica: Aprende sobre tipografia através de workshops, livros e revistas ou até mesmo através de um vídeo no YouTube sobre o assunto. Eu posso, por exemplo, recomendar este vídeo . Embora Sven Wolfermann desaconselhe as fontes do sistema na sua palestra na “MobileTechCon” - ao contrário de mim - ele fornece muitas informações valiosas sobre o assunto!

Design de fonte com CSS: faz sentido?

Uma palavra sobre o design ou configuração da fonte usando CSS: Não menos importante desde a introdução do CSS3 , os desenvolvedores têm opções de configuração subtis para as fontes numa página. Mas será que elas fazem sempre sentido? Para que devo usá-las e quando? O que é que eu pretendo? Legibilidade? Design bonito? Nem todos os programadores - ou os seus clientes - parecem pensar nisso. Às vezes, eles fazem tudo o que é possível. Eles não só mudam a altura da linha, o que às vezes causa problemas com alturas, distâncias e posicionamento, mas também o espaço entre letras ou colocar sombras à volta do texto ("text-shadow"“). É terrível o que se vê por vezes.

Portanto, aconselho-te a ter muito cuidado com estas configurações e a usar estas técnicas com cautela. Eles não funcionam em todo o lado e até dificultam a visualização em pequenos ecrãs. Por isso, tens de desfazer as instruções para o ambiente de trabalho via "Media Queries", o que, mais uma vez, custa tempo e código. Será que isto faz realmente sentido? A resposta deve ser muito clara e precisa.

Tipos de letra para a Web: As fontes Web

typographie grundlagen webfonts

A propósito: a BMW usa isto no seu site como acabámos de ver: família de fontes: "bmwTypeWebBoldAll", "Arial", "Helvetica", sans-serif;font-weight: normal; - no texto corrido Arial normal. A Amazon também usa Arial na página da loja. A Apple, por outro lado, usa, naturalmente fonte própria como fonte web. A companhia petrolífera TEXACO usa fontes Adobe. Isto são apenas pequenos exemplos.

Felizmente, agora existem muitos fornecedores de fontes web que funcionam bem e são geralmente fáceis de integrar. Infelizmente, estas fontes web estão normalmente sujeitas a uma taxa, embora os preços variem muito. Como exemplos, para além de Google Fonts, também são mencionadas: Adobe Fonts (tipo kit), Webtype, Adobe Edge Web Fonts e muitas mais - uma questão de gosto.

A vantagem destes serviços é óbvia: Não tens preocupações com licenças (vê abaixo "Atenção: Licenças!"), as fontes funcionam, e há ajuda ou instruções para incorporar as fontes no próprio site (isto é, suporte ou fóruns). As tarifas são muitas vezes extensíveis e tens uma certa escolha de fontes interessantes.

O mal-entendido com o Google Fonts

Quando em maio de 2018 o chamado RGPD se tornou obrigatório, a comunidade da rede temeu o uso do Google Fonts . As pessoas receavam que o uso do Google WebfontsGoogle como um "polvo de dados", contra o qual esta legislação era dirigida - não cumpra as leis de proteção de dados e, portanto, arriscaria receber advertências caras.

Este receio ainda difundido ilumina a grande confusão que infelizmente ainda persiste em torno do RGPD, para benefício de advogados e escritórios de advocacia, é claro. Se, devido à utilização do Google Analytics tiveres concluído um processamento de encomendas com o Google e indicares a utilização das fontes - e em caso de dúvida das cookies - na política de privacidade, o problema não se coloca.

Se ainda estiveres com receio, também podes integrar Google Fonts localmente, ou seja, fazer download das Webfonts do Google e guardá-las no teu próprio espaço na web.

Além disso, o desempenho foi repetidamente denunciado, supostamente era muito mau quando as fontes eram carregadas através do Google . Nem é mencionado que o Google tem uma arquitetura de servidor rápida e extremamente estável e que ainda existem alternativas (ver acima). Além disso, tu carregas as fontes de um URL diferente, o que pode acontecer ao mesmo tempo que os ficheiros são carregados de teu próprio servidor. Mas mais uma vez estás dependente do Google.

Atenção: Tempos de carregamento!

É bastante simples. Fontes web integradas externamente podem aumentar o tempo de carregamento da página. O código necessário para integrar as próprias fontes na página, também. Apenas as fontes padrão, as fontes do sistema nos computadores e smartphones dos utilizadores, não requerem tempo de carregamento, porque não são carregadas através de um servidor ou pela internet.

Ou dito de outra forma: se o teu site precisa de tempos de carregamento rápidos, talvez ele não tenha o alojamento apropriado por detrás e a empresa não tenha uma fonte CI que tenha mesmo de ser integrada, então eu optaria sempre pelo padrão. Quer isto dizer, por fontes do sistema, como a Amazon faz com Arial . Faz sentido.

Claro que não se trata dos kilobytes das fontes a serem carregadas. Trata-se do facto de que estas fontes vêm por cima, pelo que têm de ser descarregadas adicionalmente e que o servidor que supostamente as deve entregar pode estar fraco neste momento. Isto não é bom e é ... evitável.

Atenção: Licenças!

O que deve ser considerado em qualquer caso são as licenças para as fontes utilizadas. Se tu usas Google Fonts ou fontes do sistema, que são carregadas do computador do utilizaor, estás seguro. Para todas as outras fontes que usas no site, deves certificar-te de que possuis a licença - o que pode rapidamente tornar-se muito caro - para usá-la no teu próprio site, ou se se trata de fontes gratuitas o que às vezes causa outras preocupações, por exemplo, quando pensamos nos acentos ou no cê cedilha (ç).

Para evitar todos estes problemas, usei fontes do sistema ou do Google Fonts. Se o cliente fizer questão da sua própria fonte, o esforço para isso deve ser generosamente incluído no cálculo final, pois a integração de fontes externas no site pode, por vezes, causar alguns problemas. Por exemplo, nas instruções da CSS e aqui, por exemplo, o que eu sempre acho realmente péssimo, é quando procuro o nome correto da fonte para poder controlar corretamente a fonte para a exibição das tags HTML.

Integra as tuas próprias fontes

typographie grundlagen webfonts

Com as fontes da web e/ou as tuas próprias fontes, que tu tornaste utilizáveis para o teu site através de uma ferramenta, podes arranjar rapidamente uma série de problemas para o teu site. Os seguintes fenómenos ocorrem frequentemente:

  • Fonte cintilante ao carregar a página (não raro, às vezes, vê-se uma outra fonte até o CSS a substituir pela fonte da web.
  • Tempos de carregamento mais longos através de fontes muito complexas (muito raramente).
  • Mais comuns é a desfocagem da fontea distorção devido a uma falha de renderização (em certos sistemas).

Para exibir a fonte desejada em tantos dispositivos de saída quanto possível, são necessárias diferentes variantes da mesma fonte. A "TTF" é clara e bem conhecida, mas também precisas da "EOT" e das duas variantes "WOFF". Isto é essencial se quiseres incluir as tuas próprias fontes na tua página. Podes gerar estes formatos gratuitamente com o Webfont Generator . Depois carregas todos os formatos da tua fonte num diretório no teu servidor e os inclui-os na tua folha de estilos (ficheiro CSS) com o seguinte caminho:

@font-face {
font-family: 'Dein Font';
font-style: normal;
font-weight: normal;
src: local('Dein Font'),
      url('/deinfont.woff2') format('woff2'),
      url('/deinfont.woff') format('woff'),
      url('/deinfont.ttf') formato('ttf'),
      url('/deinfont.eot') formato('eot');
}

@font-face {
font-family: 'Dein Font';
font-style: italic;
font-weight: normal;
src: local('Dein Font Italic'), vbx
      url('/deinfont-italic.woff2') format('woff2'),
      url('/deinfont-italic.woff') format('woff'),
      url('/deinfont-italic.ttf') format('ttf'),
      url('/deinfont-italic.eot') format('eot');
}

Podes ver em @font-face-code, que integra a tua fonte, o quão complexo é - e, portanto, o quão sujeito a erros está.

Depois podes usá-los no teu código CSS e atribuí-los a classes e IDs. Desta forma, podem ocorrer alguns erros que não quero abordar aqui. Como eu disse, recomendo fontes padrão ou de sistema ou Google Fonts, que se pode simplesmente integrar através do ficheiro associado ao cabeçalho do site:

Tipografia e apresentação móvel

typographie grundlagen webfonts

Este aspeto é geralmente negligenciado. Do meu ponto de vista, não é absolutamente necessário carregar uma fonte especial num pequeno ecrã ou num smartphone. E quanto aos fallbacks, as fontes do sistema de telemóveis? Se tiver de criar uma página móvel ou optimizar uma página móvel, a primeira coisa que poupo por causa do tempo de carregamento é evidentemente o descarregamento de uma fonte web ou da minha própria fonte.

Embora seja uma decisão estratégica, que naturalmente tem de ser discutida com o cliente, não vejo um único argumento a favor de uma fonte web ou de uma fonte própria para a apresentação móvel.

É claro que nem todas as fontes do sistema disponíveis para a área de trabalho estão disponíveis para o smartphone. Mas do meu ponto de vista, não importa se tens esta ou aquela fonte para o sistema Android. Trata-se apenas de informação rápida e de boa legibilidade. Isto é definitivamente garantido no Android e na Apple com as suas fontes seguras para a web.

Se olharmos para o assunto de dois pontos de vista principais, nomeadamente a velocidade de carregamento e o design, temos de concluir que uma fonte própria para a exibição móvel é supérflua. Por um lado, a fonte afeta a velocidade de carregamento da página móvel, o que é particularmente importante quando a página é solicitada na paragem de autocarro. Por outro lado, reduzimos (esperemos) o conteúdo e o design da versão móvel do site ao essencial precisamente por estas razões. Porquê carregar uma fonte web sofisticada?

O essencial é sempre a legibilidade ou o que queremos alcançar: transmitir conhecimentos, entretenimento literário, comprar um produto, estabelecer um contacto, encomendar uma newsletter ou ver o endereço. E para isso, penso eu, não há necessidade de uma fonte especial ou de uma fonte web.

Fontes Web Seguras

De qualquer forma, deves verificar se uma das fontes do sistema é adequada ao teu projeto. Uma coleção completa das chamadas instruções CSS seguras para a web para fontes do sistema ou fontes seguras para a web pode ser encontrada em www.cssfontstack.com.

O que são fontes seguras para a web? Fontes seguras para a web são fontes pré-instaladas em muitos sistemas operacionais. Embora as mesmas fontes não sejam instaladas em todos os sistemas, podes usar um bloco seguro para a web de configurações CSS para selecionar várias fontes que parecem semelhantes e estão instaladas nos diferentes sistemas que tu desejas oferecer suporte. Se queres usar fontes diferentes das fontes pré-instaladas do CSS3 ou superior, podes usar as configurações para estas fontes web .

Conclusão

Deves considerar cuidadosamente se uma fonte do sistema faz o mesmo ou até melhor do que uma fonte web ou uma própria própria fonte. Fontes comprovadas como Verdana, Arial, Trebuchet, Georgia, Times New Roman , entre outras, podes usar sem hesitação, porque são sempre fáceis de ler. E ainda nem sequer falámos sobre a qualidade do conteúdo dos textos, que, claro, tem um papel decisivo. Mas esse é outro assunto. Não subestimes o tema da tipografia em websites. Considera os aspetos técnicos, como o tempo de carregamento ou os acentos das fontes, mas também a usabilidade do teu design tipográfico, ou seja, a legibilidade, o contraste e a altura da linha.

Pensa cuidadosamente se queres usar uma fonte própria ou externa ou se queres usar fontes padrão ou fontes de sistema. Se decidires usar a tua própria fonte, questiona-te se podes usar essa fonte ou uma variante semelhante com Google Fonts . Ou se realmente desejas integrar as fontes manualmente usando CSS e enviá-las de antemão para o servidor em todos os formatos. As fontes padrão que o utilizador possui no computador ou smartphone e que são carregadas a partir de lá, são comprovadas e testadas e não requerem nenhum tempo de carregamento. Isto é ainda mais verdade para o carregamento móvel, quando a tua página é exibida em smartphones.

Para mim, normalmente não há muito a dizer sobre o uso de uma fonte externa ou de uma fonte web. SSe um tema WordPress já tem fontes Google a bordo, eu utilizo-as, claro. Porque senão tenho de desatarraxar ou escrever por cima de tudo. Isto realmente não faz sentido.

Se não fizer claramente parte da Corporate Identity de uma empresa, uma fonte própria é uma inutilidade. E a maioria dos clientes não tem tempo nem dinheiro para isso. Muitos caminhos levam a Roma - mas o uso incorreto da tipografia num site e em web design provavelmente não. Fontes de sistema e fontes padrão podem ser usadas para criar e preencher designs maravilhosos e ótimos sites.Usá-los é o caminho mais seguro e isto vai continuar a ser assim por bastante tempo. Talvez seja uma questão de gosto, mas talvez esta seja a abordagem mais sensata ao tema das fontes em websites.

Foto: Ksenia Makagonova [Unsplash]
Mais fotos: Alexander Andrews [Unsplash], rawpixel [Pexels], Magda Ehlers [Pexels], Kristian Strand [Unsplash], Aaron Burden [Unsplash], RAIDBOXES

Mark Max Henckel - Web designer, de Hamburgo. Designer de media de formação (impresso), trabalha como web designer desde 2000. Primeiro na mobile.de e, desde 2003, por conta própria. Desde 2005 escreve sobre vários temas em diferentes blogs próprios. Como freelancer de 2007 e 2008 na SPIEGEL ONLINE, esteve envolvido no lançamento da eintages.de na interface entre programação e edição. Mais tarde, trabalhou para a SPIEGEL- canal de qualidade de marketing (Spiegel QC/Spiegel Media). Trabalhou ainda como freelancer para a libri.de e várias agências gráficas e informáticas. Especialista em WordPress desde 2008.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com * .