Com relação às dicas do livro, eu já tenho alguma familiaridade em criar uma hierarquia de conteúdo bem organizada, por exemplo usando as tags de título de h1 a h6. Isso realmente faz diferença.
Gostei também muito do conselho de buscar tipografias de qualidade para garantir legibilidade, profissionalismo e também causar um impacto emocional, pois a fonte certa gera a impressão apropriada no público: seriedade, divertido, sofisticado, assessível.
No entanto, a dica do livro que mais chamou minha atenção foi: Combinar uma fonte serifada com uma sem serifa.
O autor explica que, ao selecionar e combinar tipografias, é importante focar em dois princípios orientadores: distinção e harmonia. Para manter um sistema visual claro e eficaz, as fontes escolhidas devem se complementar sem entrar em conflito, mas ainda assim ser distintas o suficiente para não se confundirem.
Ele também observa que não combinaria duas fontes serifadas como Caslon e Baskerville, já que compartilham tantas características que a maioria dos leitores não perceberia diferença. Nesse caso, é melhor usar apenas uma delas ou, melhor ainda, introduzir uma fonte sem serifa contrastante, como a Museo Sans.
Esse é um princípio que eu desconhecia antes de ler o livro: fontes um pouco diferentes, mas ainda assim harmoniosas entre si. O resultado é uma interface envolvente, mais intencional e, por que não dizer, bonita.
Antes de ler este livro, eu só sabia que a tipografia tinha ou não serifa. Mas depois de explorar o conteúdo e observar a tipografia mais de perto, percebi que há muito mais do que apenas a presença de serifas. Como você pode ver na próxima imagem, cada parte de uma tipografia tem sua função.
| Parte | Definição |
|---|---|
| x-height | Altura‑x (altura da letra “x”, define proporção das minúsculas) |
| cap height | Altura das maiúsculas |
| Crossbar | Travessa (barra horizontal em letras como “A”, “H”, “e”) |
| Shoulder | Ombro (curva em letras como “n”, “m”, “h”) |
| Finial | Terminal (final arredondado ou decorativo de um traço) |
| Ascender | Ascendente (parte da letra que sobe acima da altura‑x, como em “b”, “d”, “h”) |
| Aperture | Abertura (espaço aberto em letras como “c”, “e”, “s”) |
| Counter | Contraforma (espaço interno fechado ou semi‑fechado, como em “o”, “p”, “a”) |
| Stem | Haste (traço principal vertical ou diagonal de uma letra) |
| Overshoot | Ultrapassagem (quando curvas como “o” ou “s” passam levemente da linha de base ou da altura‑x para parecerem alinhadas visualmente) |
| Descender | Descendente (parte da letra que desce abaixo da linha de base, como em “p”, “q”, “y”) |
| Ear | Orelha (pequena projeção em letras como “g”) |
| Serif | Serifa (pequeno traço decorativo nas extremidades das hastes) |
| Eye | Olho (contraforma específica da letra “e”) |
| Spine | Espinha (traço curvo central da letra “s”) |
Também aprendi que é necessário usar aspas adequadas para deixar o texto mais elegante. Aspas curvas, geralmente chamadas de smart quotes, costumam se parecer com os números 6 e 9 preenchidos. Já as aspas retas, muitas vezes chamadas de dumb quotes, são normalmente retas e verticais. Você pode ver a diferença na página: https://smartquotesforsmartpeople.com/
Depois de observar cada tipografia com mais atenção, como o autor didaticamente orienta a fazer, finalmente entendi quando uma fonte é apropriada de acordo com o contexto. Recomendo muito a leitura deste livro maravilhoso.
Transforme sua leitura em prática: adquira o livro agora mesmo: On Web Typography - Jason Santa Maria