Noções básicas sobre tipografia escrita para a Web

No Web Design, o tema da tipografia é importante quando se considera todas as áreas da experiência do usuário. Cada site tem necessidade de texto e há diretrizes que você pode seguir para criar layouts excepcionalmente impressionantes. Linhas de grade, letras, altura da fonte, espaçamento de texto, esquemas de cores e outras propriedades semelhantes devem ser levadas em consideração.

Neste artigo, gostaria de me aprofundar no reino da tipografia da web. Nós vamos olhar para idéias populares por trás da criação de textos credíveis na web. Ao longo do caminho eu vou apresentar alguns propriedades úteis do CSS3 quais designers frequentemente esquecem.

Eu tentei colocar mais foco na teoria e ideologias para a web. Isso dá um foco mais amplo no texto digital em geral, e você, o web designer, pode escolher quais estilos aplicar para cada finalidade. O contexto é sempre fundamental e você tem que determinar isso apropriadamente para cada projeto em que você trabalha. Considere este guia como um pacote de referência repleto de tendências modernas da Web de inovadores tipográficos em todo o planeta..

Meça seus parágrafos

Você não precisará estourar o bastão para esse tipo de medida. Na verdade, a medida em relação à tipografia refere-se à largura (horizontal) de qualquer parágrafo na sua página. Não é um tópico sempre discutido, mas influencia a legibilidade do seu conteúdo. Como regra geral, você quer limitar qualquer linha única em torno de 75-85 caracteres de comprimento (não necessariamente incluindo espaços).

Agora, isso pode parecer um pouco complicado para alguns layouts mais amplos. Especialmente se seu design for fluido e adaptado à medida que o usuário redimensiona a janela do navegador. Você sempre pode definir um CSS largura máxima propriedade no seu conteúdo principal div. Margens de codificação e tamanhos de fonte em unidades escalonáveis (porcentagens, ems) em vez de pixels permitirão essa flexibilidade em qualquer layout.

Não há uma unidade máxima de medida a ser cautelosa. Como você escreve conteúdo e forma palavras em frases é muito mais importante que a largura de cada linha. Mas tenha em mente que sentenças mais longas são muito mais difíceis de ler em comparação com declarações mais curtas e concisas.

Liderando Explicado

Ao projetar, junto com sua medida de parágrafo, você também deve considerar a idéia de conduzindo. A palavra é pronunciada “ledd-ing”, como o chumbo usado em lápis. Este nome tem origem nos velhos tempos da tipagem mecânica, onde as faixas de chumbo eram colocadas entre as linhas de texto..

Liderar ainda é um conceito muito importante em web design e anda de mãos dadas com medidas de parágrafos. À medida que sua largura de parágrafo aumenta, você deve aplicar um aumento igual à quantidade de entrelinha, ou espaço entre linhas de texto. Este espaço extra torna a leitura muito mais fácil para os seus olhos.

Se você fosse folhear com texto muito bem enrolado, pode ser difícil se concentrar em uma única linha. Se este for o caso, tente aumentar a quantidade de líderes com o CSS altura da linha propriedade. Você sempre quer mais espaço entre as linhas de texto do que entre as palavras. Caso contrário, seus blocos de texto podem aparecer como impressão de jornal e não serão muito amigáveis ao usuário..

Uma técnica sólida é aplicar mais espaço do que o originalmente necessário e reduzi-lo, se necessário. Nem todo texto é criado da mesma forma e você certamente precisará de parágrafos com diferentes formatações internas, como palavras em negrito, links âncora, sublinhados, etc. Com um pouco mais de liderança, essas alterações não parecerão tão desalinhadas em comparação com o outro texto..

Use tamanhos de fontes naturais

Ainda há um punhado de sites que escolhem manter tamanhos de fonte menores que a média. 11px-12px pode parecer muito mais do “profissional padrão” para layouts de negócios. Mas esses tamanhos não ajudam a maioria dos visitantes que estão procurando informações específicas.

Geralmente, os navegadores da Web usam o padrão 16px se você não aplicar nenhuma regra CSS. Mesmo isso pode ser considerado um pouco pequeno se você tiver o espaço extra em seu layout para acomodar textos maiores. Os tamanhos de fonte maiores parecem mais agradáveis e são muito mais fáceis de analisar em palavras-chave relativas. As fontes serif não são frequentemente escolhidas como material de parágrafo, mas você ainda pode usá-las. Sugiro usar tamanhos de texto muito maiores para fontes baseadas em serif para melhorar a legibilidade e atrair atenção.

Responder ao ambiente do usuário

À medida que você experimenta famílias e tamanhos de fontes diferentes, sua área de conteúdo terá que se adaptar de acordo. A unidade padrão que eu uso é ems como eles podem facilmente redimensionar com base no espaço disponível e resolução de tela. Isso otimiza o desempenho no final do usuário, que é o mais importante.

Mas quando você tem conteúdo tão flexível, torna o seu layout propenso a um resultado problemático. O conteúdo no seu rodapé ou na barra lateral pode acabar distorcido ou desequilibrado em alguns navegadores. Ou você pode ter dificuldade em alinhar imagens ou outras formas de mídia no texto principal. Existem algumas outras alternativas para usar o ems se você precisar de um layout de estilo fixo - mas tente as duas soluções para ver qual delas você mais gosta.

Lembre-se de que larguras fixas e tamanhos de parágrafo bloquearão muitas das configurações do seu design. É ótimo para conteúdo que inclui muitos efeitos estéticos estacionários - pense em imagens de fundo ou muitos widgets de barra lateral. Também é um processo simples para construir uma área de conteúdo fluido na coluna da esquerda com barras laterais fixas à direita.

Estilo baseado no contexto

Alguns outros truques CSS realmente interessantes foram escondidos do design mainstream. Especificamente, há tendências copiadas do trabalho de impressão que podem ser aplicadas no contexto adequado.

Muitos web designers nunca usaram a propriedade CSS com texto de indentação. Você fornece um valor para recuar a primeira linha de qualquer parágrafo segmentado por essa regra. As unidades seguem as opções de texto padrão, como pixels, pontos, ems, porcentagens ... Certamente não é uma tendência que você encontra na maioria dos blogs. Mas fornece um bom ritmo de página enquanto lê grandes blocos de texto.

Existe outro tipo de seletor de CSS conhecido como pseudo elemento. Isso pode segmentar uma parte específica de qualquer seletor de conteúdo. O pseudo seletor CSS3: first-letter é perfeito para criar estilos extravagantes em parágrafos importantes. Você pode incrementar a letra de abertura de cada parágrafo - semelhante a um conto de fadas - usando negrito, itálico ou até mesmo alterar o tipo de letra. Confira este belo exemplo de capitulares que inclui algum código CSS extra que você pode utilizar.

Jogando com espaçamento entre letras

Tenho certeza que muitos de nós já ouvimos o termo tracking antes, mas nunca percebemos que é a mesma idéia que a propriedade CSS-spacing. Esses dois conceitos são um no mesmo, relacionados entre tipografia impressa e digital. A unidade refere-se ao espaço entre letras dentro de qualquer linha de texto. Este é um efeito realmente interessante para aplicar nos cabeçalhos e até mesmo em alguns blocos de conteúdo menores em seu site.

É importante não confundir os termos letter-spacing com kerning. Ambos estão relacionados à tipografia e à distância entre as letras. No entanto, o kerning refere-se especificamente à distância entre duas letras individuais em uma palavra. A propriedade de espaçamento entre letras será aplicada a um elemento inteiro de texto, seja uma palavra ou parágrafo ou cabeçalho ou link de âncora. Tenha isso em mente quando estiver brincando com novas ideias para estilos.

Costumo usar alguns pixels / pontos de espaçamento entre letras nos cabeçalhos com todos os maiúsculos. Isso quebra os caracteres individuais com algum espaço extra e também aparece como um bem definido “título” Veja. Espaçamento de letra negativa também funciona muito bem no contexto certo. Eu geralmente fico com unidades menores, talvez -0.03em ou -0.1em no máximo.

Combinando e combinando tipos de letra

Os conceitos de design por trás da tipografia da web são certamente uma forma de arte, não tanto da ciência. Existem diretrizes que você pode seguir, mas não há regras firmes com as quais você esteja limitado. Isso significa que você tem uma enorme liberdade para experimentar misturar e combinar as diferentes fontes às quais tem acesso.

De longe, a combinação mais popular de tipos de letra inclui uma divisão serif / sans-serif para o conteúdo do cabeçalho e do parágrafo. Eu gosto de mudar ambos, mas mais frequentemente eu vou usar fontes serif nas seções de cabeçalho. As marcações e traços extras em cada letra fazem com que pareçam mais lisonjeiros como o texto de página dominante.

Além disso, fontes sans-serif são mais limpas e fáceis de juntar em frases. Isso não quer dizer que fontes serifadas não funcionem em parágrafos. Na verdade, há muitos bons exemplos! Mas um conceito pouco conhecido chamado x-height é crucialmente importante para distinguir a complexidade de um tipo de letra. Olhando para a linha de base de algumas palavras, você aprenderá como essas fontes “caber” um com o outro.

É importante notar também a importância do espaço entre esses diferentes elementos. Você provavelmente estará usando 2 ou 3 estilos de cabeçalho diferentes, então cada um deles sairá com uma aparência diferente. Eu costumo manter meus elementos h2 / h3 um pouco mais perto do bloco de parágrafos a seguir, pois isso implica que há uma correlação entre o conteúdo.

Essa correlação é especialmente útil quando você está usando dois tipos de letra completamente diferentes ao lado um do outro. Recomendo não mais do que três famílias de fontes diferentes por conjunto de conteúdo. Depois de muitas personalizações, suas palavras aparecem confusas e toda a página sai parecendo uma miscelânea de fontes mal interpretadas.

Conclusão

Espero que esses conceitos possam esclarecer o assunto complicado da tipografia digital. Pode ser difícil realmente entrar no trabalho como designer, especialmente se todo o tópico for estranho para você. Mas continue estudando e não se esqueça de praticar um monte!

Semana que vem: Fique atento pois veremos alguns ferramentas e recursos úteis para melhor tipografia na web.

Mais…

Veja mais posts relacionados a tipografia:

Vitrine de projetos da Web com bela tipografia
Melhor tipografia para sites modernos
Guia Rápido para Tipografia: Aprenda e Seja Inspirado