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 ainda é 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 é disso que se trata a tipografia: a legibilidade dos textos. Por que outra razão teria textos no seu website se não são bons e agradáveis de ler? Supostamente, as opiniões divergem sobre como devem ser, no final, os bons textos legíveis. Eu não consigo entender, porque temos no gráfico simples, comprovado e regras tipográficas muito sensataspara criar textos bem legíveis. Tipografia apenas.

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 você é um designer e quer mostrar o que pode fazer, é aconselhável usar os serviços existentes para tipografia - em fontes da web comprovadas - a fim de integrar a fonte desejada de forma segura e eficiente em seu próprio site.

Às vezes também parece ser um dado adquirido converter o estilo de fonte desejado em formatos adequados para a web e integrá-los individualmente. Se isto então sempre e a longo prazo funciona perfeitamente, é outra questão. Portanto, prefiro nesses casos Fontes do Googleporque é rápido, seguro e fácil de usar. Mas isto talvez seja também 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 fonte

Depende da fonte e é baseado no design básico do site. Note que o usuário sempre tem a possibilidade de alterar o tamanho da fonte em seu navegador ou smartphone. Tente pegar tamanhos relativos de fontes, ou seja, %, EM/REM ou pequeno/normal/médio/grande.

2. Largura 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ª largura de barril

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: bem e textos estruturados semanticamente corretamente! Em HTML, isso significa, por exemplo, as tags de cabeçalho H1/H2/H3, as marcas de parágrafo, as marcas de lista, o uso inteligente de destaque por meio de negrito, itálico e cor, e muito mais. Isto tem um efeito directo na legibilidade e também no ranking do Google.

7. um máximo de dois tipos de letra

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. Capitais

Abstenha-se de utilizar maiúsculas nos cabeçalhos e no menu. Eles são muito difíceis de ler. Mas se se tratar de palavras únicas, por exemplo no NAVIGATION, pode utilizar maiúsculas. Mas não os escreva em maiúsculas, mas use CSS com "formato texto-transformação:maiúsculas".

9. Fontes padrão

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

Um recuo está no CSS da fonte sucessora, como a BMW: "bmwTypeWebBoldAll", "Arial", "Helvetica", sans-serif; Aqui, Arial, Helvetica e Sans-Serif (a primeira fonte em Sans-Serif) são os fallbacks que são exibidos se a fonte antes deles for ("bmwTypeWebBoldAll") não está disponível.

10. treinamento

Minha dica: Eduque-se em tipografia através de workshops, livros e revistas, ou mesmo assistindo a um vídeo no YouTube sobre o assunto. Eu posso, por exemplo... este vídeo recomendado. Embora Sven Wolfermann aconselhe contra fontes de sistema em sua apresentação na "MobileTechCon" - ao contrário de mim - ele fornece muitas informações valiosas sobre o tema aqui!

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 à sua disposição configurações sutis para as fontes de uma página. Mas será que eles fazem sempre sentido? Para que os uso e quando? O que eu quero alcançar? Legibilidade? Desenho bonito? Nem todos os programadores - ou seus clientes - parecem pensar sobre isso. Eles às vezes fazem tudo o que é possível. Não só mudam a altura da linha, o que por vezes causa problemas de altura, espaçamento e posicionamento, como também mudam a espaçamento de cartas ou colocar sombras ao redor do texto ("sombra de texto"“). Mau, o que pode ser visto às 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 isso em seu site, como você acabou de ver: font-family: "bmwTypeWebBoldAll", "Arial", "Helvetica", sans-serif;font-weight: normal; - no corpo do texto bastante normal Arial. A Amazon também usa Arial na página da loja. A Apple, por outro lado, usa o seu próprio fonte própria como webfont. A companhia petrolífera TEXACO usa fontes Adobe. São apenas pequenos exemplos.

Felizmente, existem agora muitos fornecedores de fontes web que funcionam bem e são geralmente fáceis de integrar. Infelizmente, estas "fontes web" são normalmente cobráveis, com preços que variam muito. Como exemplos, além de Fontes do Googlesão as seguintes: Fontes Adobe (Typekit), Webtype, Fontes Web Adobe Edge e muito mais - 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 o chamado RGPD foi tornado obrigatório para todos em maio de 2018, a comunidade da rede se afastou do uso de Fontes do Google Pânico. As pessoas tinham medo que o uso do Google Web Fonts - – Google como o "polvo de dados" contra o qual esta legislação foi dirigida - não cumpriria as leis de protecção de dados e, portanto, correria o risco de avisos dispendiosos.

Este medo ainda difundido ilumina a grande confusão que infelizmente ainda existe em torno do RGPD. Para o benefício de advogados e escritórios de advocacia na Internet, é claro. Se você está preocupado com o uso de Google Analytics com Google para o uso do Google Analytics e referir-se ao uso das fontes - e em caso de dúvida aos cookies - na política de privacidade, o problema está fora da mesa.

Se você ainda tiver medo, você pode usar todos Google Fonts também localmentefaça o download das Fontes Web do Google e salve-as em seu próprio espaço web.

Além disso, a performance foi repetidamente denunciada, o que supostamente foi tão ruim quando as fontes foram utilizadas através de Google montes. Não se menciona que o Google tem uma arquitetura de servidor rápida e extremamente estável e que ainda há falhas (ver acima). Além disso, você carrega as fontes de um URL diferente, o que pode acontecer ao mesmo tempo em que carrega os arquivos do seu próprio servidor. Mas você está, mais uma vez, 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 seu site precisa de tempos de carregamento rápidos, talvez você não tenha o alojamento apropriado por trás e a empresa não tenha uma fonte CI que tenha absolutamente que ser integrada, eu iria sempre para o padrão. Assim como a Amazon faz com as fontes do sistema. Arial faz. Isso 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 você tem que considerar em qualquer caso são as licenças para as fontes usadas. Se você usar Fontes do Google ou fontes do sistema, que são carregadas a partir do computador do usuário, você está no lado seguro. Para todas as outras fontes que você usa no seu site, você tem que se certificar de que você é dono da licença para elas - e isso pode se tornar rapidamente bastante caro - a fim de usá-las no seu próprio site, ou se é um fonte livre que às vezes causa outros problemas, tais como a umlauts alemã e o Eszett (ß).

Para evitar todos estes problemas, eu apenas uso fontes do sistema ou Fontes do Google. Se o cliente quiser absolutamente a sua própria fonte, deve incluir o esforço por ela generosamente no cálculo, pois a integração de fontes externas no site pode, por vezes, causar alguns problemas. Por exemplo, com as instruções CSS e aqui, por exemplo, o que eu sempre acho muito ruim, ao procurar o nome da fonte correta, 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 você vê uma fonte diferente até o CSS substituí-la com a fonte web).
  • Tempos de carregamento mais longos devido a fontes muito complexas (bastante raras).
  • Mais comuns são Desfoque da fontedistorção devido à renderização defeituosa (em certos sistemas).

Para ser capaz de exibir a fonte desejada no maior número possível de dispositivos de saída, são necessárias diferentes variantes dela. A "TTF" é clara e bem conhecida, mas também precisa da "EOT" e das duas variantes "WOFF". Isto é essencial se você quiser incluir suas próprias fontes na sua página. Você pode obter estes formatos gratuitamente com o Gerador de Fontes Web para as gerar de graça. Depois disso, você carrega todos os formatos da sua fonte em um diretório do seu servidor e os inclui em sua folha de estilos (arquivo CSS) com o caminho a seguir:

@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') format('ttf'),
      url('/deinfont.eot') format('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');
}

Você pode ver a partir disto @font-face codeque integra a sua fonte, o quão complexa esta coisa é - e, portanto, o quão sujeita a erros.

Então você pode usá-los em seu código CSS e atribuí-los a classes e IDs. Pode haver alguns erros pelo caminho, que eu não vou cobrir aqui. Como eu disse, recomendo fontes padrão ou de sistema ou Fontes do Googleque você pode simplesmente adicionar ao arquivo vinculado no cabeçalho do seu site:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i' rel='stylesheet' type='text/css'>

Tipografia e apresentação móvel

typographie grundlagen webfonts

Este aspecto é basicamente negligenciado. Do meu ponto de vista, não é absolutamente necessário carregar uma fonte especial num pequeno ecrã ou num smartphone. E os fallbacks, as fontes do sistema de telemóveis? Quando eu faço um site móvel ou preciso otimizar o meu celular, a primeira coisa que eu poupo por causa do tempo de carregamento é, naturalmente, baixar uma fonte web ou uma fonte personalizada.

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

Você deve definitivamente verificar se uma das fontes do sistema é adequada para o seu projeto. Uma coleção completa das chamadas instruções CSS web-safe para fontes do sistema ou fontes web-safe pode ser encontrada em www.cssfontstack.com.

O que são fontes seguras na web? Fontes seguras para a Web são fontes pré-instaladas em muitos sistemas operacionais. Embora nem todos os sistemas tenham as mesmas fontes instaladas, você pode usar um bloco web-safe de configurações CSS para selecionar várias fontes que parecem semelhantes e estão instaladas nos diferentes sistemas que você deseja suportar. Se você quiser usar outras fontes além das pré-instaladas a partir do CSS3, você pode usar o Configurações para estas fontes web configurações da fonte.

Conclusão

Você deve considerar com muito cuidado se uma fonte do sistema vai fazer tão bem ou até melhor do que uma fonte web ou uma fonte personalizada. Fontes comprovadas como Verdana, Arial, Trebuchet, Geórgia, Times New Roman, etc. e outras podem ser usadas sem hesitação, uma vez que são sempre bem legíveis. E ainda nem sequer falamos sobre a qualidade do conteúdo dos textos, o que, naturalmente, desempenha um papel decisivo. Mas isso é outro tópico. Não subestime a questão da tipografia em websites. Considere os aspectos técnicos, como o tempo de carregamento ou umlauts das fontes, mas também a facilidade de utilização do seu design tipográfico, ou seja, a legibilidade, o contraste e a altura da linha.

Pense cuidadosamente sobre se você quer usar sua própria fonte ou uma externa, ou se você quer usar fontes padrão ou fontes de sistema. Se você decidir usar sua própria fonte, pergunte-se se você quer usar essa fonte ou uma variante similar com Fontes do Google pode ser usado. Ou se você realmente quiser incorporar as fontes à mão via CSS e carregá-las no servidor em todos os formatos de antemão. As fontes padrão que o usuário tem no computador ou smartphone e que são carregadas a partir dele são testadas e testadas e não precisam de tempo de carregamento. Isto é ainda mais verdade para o carregamento móvel, ao exibir a sua página 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 estiver claro para a identidade empresarial de uma empresa, uma fonte personalizada é gimmicky. E a maioria dos clientes não tem tempo nem dinheiro para isso. Muitos caminhos levam a Roma - mas o uso errado da tipografia em um site e no web design provavelmente não. Com fontes de sistema, com fontes padrão, podem ser criados e preenchidos designs maravilhosos e grandes websites. Usá-las é o caminho mais seguro, e continuará assim por bastante tempo. Talvez seja uma questão de gosto, mas talvez esta seja a abordagem mais sensata para o tema das fontes em sites.

Imagem contribuída: Ksenia Makagonova [Unsplash]
Outras imagens: 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 blogues 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 *.