Rafael Fernandes

Notas sobre Tipografia para Web Design

Atributos e pontos importantes a serem considerados ao decidir sobre a tipografia utilizada no design do site.

Measure

É a largura de uma linha, significando a quantidade de caracteres que contém cada linha.

Measure entre 40 e 80 caracteres para uma leitura mais agradável. O ideal é próximo de 65, mas design responsivo para adaptação de site tanto para cada tamanho de dispositivo como computadores e celulares dificulta esta restrição.

Para designs de site de várias colunas, uma média melhor é entre 40 e 50 caracteres.

Se utilizarmos a unidade de medida ch para definição da largura de um contêiner de texto, podemos fazer a largura da linha em uma medida próxima à quantidade de caracteres, como por exemplo:

main {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}

No exemplo acima, forçamos todo o conteúdo dentro da tag main a ter no máximo 65 caracteres 0 de largura máxima, ajustando as margens automaticamente. Como o tamanho é baseado em um caractere específico, uma linha com vários caracteres de largura fina, como i, fará que a quantidade real seja maior, mas é uma boa aproximação.

Outra maneira de ter uma aproximação do tamanho da linha é definir a largura do contêiner em px, e então dividir pelo tamanho da fonte básica, também em px.

Usando em para ajustar a largura do contêiner também é possível. Cada caractere usa aproximadamente 0.5em de espaço horizontal, portanto um ajuste de 33em faria com que o contêiner se ajustasse para uma largura de linha de aproximadamente 66 caracteres. Um ponto bom de se utilizar este método é que ele se ajusta automaticamente ao tamanho da fonte. Este método é preferível no ponto de vista tipográfico, já que mantêm o relacionamento entre o tamanho da linha e o tamanho da fonte.

Leading

Leading, o espaçamento entre linhas, muito importante para facilidade de leitura. Uma dica de como ajustar isto é o seguinte:

Creio que essa dica se baseia no fato que ao aumentar o tamanho da fonte também diminuimos a quantidade de caracteres possível em uma linha. Entretanto, dependendo do tamanho e resolução da tela do usuário, e também de como chegamos ao tamanho final ideal para o design da página, alguns ajustes fora dessa dica devem ser necessários.

Leading é ajustado no atributo line-height. Padrão é normal, ou 1.2. O ideal é iniciar os testes de espaçamento de linha entre 1.3 e 1.6 do tamanho da fonte. Ex.:

* {
    font-family: Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.3;
}

// ou

* { font: 1em/1.3 Helvetica, sans-serif; }

Escala

Não escolher tamanhos aleatoriamente, existem certas escalas que tem eficiência já comprovada:

Escala personalizada simples

Para criar uma escala personalizada, basta definir uma constante e utilizá-la para multiplicar o tamanho base, elevando essa constante primeiro pela etapa de escala. Por exemplo, para uma escala com uma constante de 1.4, o resultado seria assim:

Etapa de ampliação Valor [px] Valor [em] Cálculo
3 54,88px 2.744em 20px * 1.4^3
2 39,2px 1.96em 20px * 1.4^2
1 28px 1.4em 20px * 1.4^1
0 = Tamanho de referência 20px 1em 20px * 1.4^0
-1 14,28px .71em 20px * 1.4^-1
-2 10,20px .51em 20px * 1.4^-2
-3 7,29px .36em 20px * 1.4^-3

Existe sites que fazem este cálculo de escala automaticamente dependendo do estilo que você escolher:

Eles até geram o código CSS para ser integrado!

Escala padrão da W3C não chega a ser ruim, dá para utilizar:

absolute-size Fator de Escala Percentual Cabeçalho HTML
xx-large 2/1 200% <h1>
x-large 3/2 150% <h2>
large 6/5 120% <h3>
medium 1 100% <h4> e <p>
small 8/9 89% <h5>
x-small 3/4 75%
xx-small 3/5 60% <h6>

Também podemos utilizar larger e smaller para aumentar ou diminuir uma fonte em um elemento filho de um elemento qualquer.

Tamanho

Para definição de tamanho existem várias unidades. Unidades para medidas absolutas são:

Unidade Referência
px 96 pixels por polegada (para telas modernas de alta resolução)
mm milímetro*
cm centímetro*
in polegada*
pt ponto = 1/76 de polegada = 76 pontos por polegada
pc 1pica = 12 pontos

* Tamanho final destas unidades depende do ajuste de resolução do pixel do dispositivo.

Usar px onde apropriado (leitura digital, 16px geralmente é o padrão em navegadores), pt para impressão (padrão de 12pt).

Unidades para medidas relativas são:

Unidade Referência
ch Tamanho horizontal do zero (0). Medida relativa baseada na largura do caractere, não altura. Melhor usado no ajuste de fontes mono-espaçadas (fontes de programação). Também pode ser usado no ajuste de largura de contêiner de conteúdo para forçar uma largura de linha aproximada pré-definida.
ex Altura do caractere x. Padrão é 0.5em
em Altura do caractere M maiúsculo. Padrão é 1em.
rem Mesmo que em, mas relativo ao elemento raiz do documento html.
cap Tamanho do topo da fonte (cada fonte usa a linha de topo em relação ao tamanho do x de maneiras diferentes). Padrão é 0.5em. CSS4.
lh Valor calculado da propriedade line-heightdo elemento atual. CSS4.
rlh Valor calculado da propriedade line-height do elemento raiz (<html>). CSS4.

Também pode ser utilizado % para definição do tamanho da fonte em relação ao elemento superior.

Quando as unidades relativas são utilizadas no atributo font-size, o tamanho usado como referência é do elemento superior, quer dizer, o elemento html que contém o elemento atual. Nos outros atributos, as unidades relativas se referem ao tamanho de fonte calculado no elemento atual.

Recomendações de uso de unidades

Um exemplo de um css que ajusta o tamanho para conteúdo padrão e para conteúdo que aparece lateralmente:

/* Definição do tamanho base da fonte no elemento raiz */
html {
    font: 16px/1.3 "Lucida Grande", sans-serif;
}

/* Ajustar escala de texto para conteúdo que não seja o principal */
aside {
    font: .9rem; /* em relação ao elemento raiz! */
}

/* Ajuste de fonte para cabeçalhos */
h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, serif;
}

/* Ajuste relativo dos cabeçalhos, usando 1.2 como escala personalizada */
h1 {
    font-size: 1.728em; /* Em relação ao elemento pai/superior */
}
h2 {
    font-size: 1.44em;
}
h3 {
    font-size: 1.2em;
}
h4, p {
    font-size: 1em;
}
h5 {
    font-size: .833em;
}
h6 {
    font-size: .694em;
}

Estilo de fonte

Usando font-family selecionamos qual fonte usar. Uma lista de nomes define uma ordem de prioridade, e o navegador usará a primeira fonte encontrada na lista.

Famílias de fontes sem-serifa normalmente utilizadas que existem por padrão nos sistemas operacionais:

Tabela de combinações comuns de fontes que são similares e instaladas por padrão tanto em Windows quanto em OSX:

Sites com a lista de fontes de cada sistema operacional:

Fontes disponíveis por padrão no Android:

Família Tipo Versão do Android
Droid Sans sans-serif 4.0+
Droid Serif serif 4.0+
Droid Sans Mono monospace 4.0+
Roboto sans-serif 4.1+
Noto Sans sans-serif 5.0+
Noto Serif serif 5.0+
Cutive Mono monospace 5.0+
Coming Soon (estilo Comic Sans) cursive 5.0+

Difícil saber o que teria de padrão em Linux pois não há padrão entre as distribuições.

Lista de fontes "seguras" para web: https://www.w3schools.com/cssref/css_websafe_fonts.asp.

Ideal é criar um design de layout que não dependa tanto da família de fonte desejada, mas se for extremamente importante manter a mesma família na maioria dos dispositivos, usar Google Fonts, Font Squirrel ou serviço similar.

Usar fontes carregadas via url é uma boa para ter consistência visual em todos os dispositivos, mas aumenta bastante a quantidade de dados necessários para o carregamento da página. Dar preferência para um conjunto padrão de fontes pode acelerar bastante páginas "pesadas".

Note que mesmo assim ainda há a possibilidade de não ser utilizada a mesma família que a desejada, tanto por limitação do navegador ou sistema utilizado pelo usuário, quanto por configurações personalizadas pelo próprio usuário por questões de acessibilidade.

Combinação de estilos de fonte

Em primeiro lugar, se perguntar se realmente se faz necessário utilizar mais de uma fonte. Obviamente, a fonte utilizada para código-fonte vai ser diferente por ser um caso específico, mas para todo o resto, experimentar primeiramente com apenas uma única família de fonte.

Claro que se for desejável criar uma lista de nomes de fontes para ajustar no CSS de uma maneira que seja encontrada uma fonte similar para cada sistema, será utilizada mais de uma fonte. Mas a questão aqui é puramente estética, no intuito de se evitar um carnaval de fontes no design do site.

Caso seja mais interessante utilizar mais de uma família de fonte:

Site para auxiliar a encontrar combinação de fontes: https://www.canva.com/font-combinations/.

Cor

Se quiser usar a cor da fonte atual em outro atributo (como background-color), pode usar o nome de cor currentcolor.

Definição de fonte em uma linha

* {
    font: [font-weight] [font-style] [font-variant] [font-size[/line-height]] font-family;
}

Aqui, apenas normal ou small-caps podem ser definidas em font-variant.

Alinhamento de texto

As recomendações da W3C são de texto alinhado à esquerda.

Caso seja necessário justificar, existem novas opções no CSS3, em navegadores modernos; O atributo text-justify que pode ser ajustado com inter-word, onde o espaçamento necessário para justificação é feita de modo simples, apenas aumentando o espaço entre as palavras, ou inter-character onde além do ajuste entre palavras, é feito ajuste entre caracteres.

Outro atributo interessante para melhorar a justificação é hyphenate: auto para fazer a hifenização automática das palavras. Infelizmente, dependendo da implementação do navegador, isso pode acarretar em erros de ortografia.

Espaçamento vertical de elementos de texto

O espaçamento vertical determina o ritmo de leitura do texto, sendo o equilíbrio entre espaço com texto e espaço em branco. É extremamente importante para que o texto seja de leitura fácil e agradável.

A adição mais comum de espaço em branco é entre os elementos de texto, principalmente entre parágrafos. Ao ajustar as margens superiores e inferiores desses elementos, o ideal é utilizar unidades relativas (em), para melhor ajuste quando o tamanho do texto for alterado pelo usuário ou pelo dispositivo. Lembrando que em é a altura relativa ao tamanho de fonte do pai do elemento atual.

No caso de sequência de parágrafos, para manter o ritmo de texto como num livro, o ideal é ajustar as margens para o mesmo valor de altura de linha.

p {
    line-height: 1.5;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

O mesmo é válido para cabeçalhos, mas também há a possibilidade de um ajuste mais estilizado, de forma assimétrica. Neste caso, ao aumentar o valor de uma margem, a mesma quantidade deverá ser reduzida da outra margem.

/* ajuste simétrico do h2 */
h2 {
    line-height: 1.3;
    margin-top: 1.3em;
    margin-bottom: 1.3em;
}

/* ajuste assimétrico do h2 */
h2 {
    line-height: 1.3;
    margin-top: 1.8em; /* adição de .5em */
    margin-bottom: .8em; /* redução de .5em */
}

O padrão dos navegadores é tratar as margens dos parágrafos como 1em, portanto não devemos deixar as margens dos elementos principais de texto no padrão.

Um ótimo site para auxiliar no cálculo destes valores para um belo alinhamento de texto é https://nowodzinski.pl/syncope/

Grade de ritmo vertical

Para um cálculo básico do tamanho de altura de linha e margens que se encaixam em uma grade de ritmo vertical, calcularíamos em múltiplos do tamanho da linha base.

Se, por exemplo, tivermos definido que o tamanho da fonte base seja 20px, e a altura de linha 1.5, então a altura de linha base será 30px (20 * 1.5).

Em seguida, calculamos o tamanho da fonte do elemento em questão: por exemplo, um cabeçalho de 1.4em seria 28px (20 * 1.4).

html {
    font: 20px/1.5 sans-serif; /* altura de linha de 30px */
}

h3 {
    font-size: 1.4em; /* 28px */
}

Assumindo que gostaríamos de um h3que ocupasse 2 linhas da altura base para cada linha própria, com 2 linhas base de margem superior e 1 linha base de margem inferior, o resultado seria assim:

h3 {
    font-size: 1.4em; /* 28px */
    line-height: 1.867em; /* (28/30) * 2 */
    margin-top: 1.867em; /* (28/30) * 2 */
    margin-bottom: 0.933em; /*(28/30) * 1 */
}

Como demonstrado, as alturas de linha e margem são calculados de acordo com o tamanho de fonte do elemento atual.

Notas laterais

Para texto lateral como notas laterais e notas de rodapé, fica mais elegante manter o ritmo de texto similar ao do texto principal. Geralmente, aumentar a altura do espaçamento de linha (line-height) proporcionalmente à diferença de tamanho de fonte. Por exemplo, se o tamanho da fonte principal for 12px e o tamanho da fonte das notas for 10px, teremos que aumentar o espaçamento de linha das notas em 12/10. Neste caso, se o espaçamento do texto padrão for 1.5, o espaçamento das notas será 1.8 (1.5 * 12/10).

Com esse ajuste, nós podemos manter a mesma grade de texto mesmo quando alteramos o tamanho da fonte.

Referências