Quais são as proporções padrão para tipografia na web?


25

Ao criar um design da web, muitas vezes tento garantir que minha tipografia seja proporcional e consistente. No entanto, não consegui encontrar artigos ou recursos definitivos sobre quais proporções e tamanhos devem ser usados. Especificamente, quais são as práticas recomendadas ou padrão para:

  • Tamanho da fonte
  • Altura da linha
  • Espessura da linha
  • Espaçamento entre linhas

Considere o texto do parágrafo e do cabeçalho em suas respostas. Além disso, qualquer estudo sobre a eficácia de várias proporções ou métricas seria muito útil.

Respostas:


18

Elements of Typographic Style, de Robert Bringhurst, é uma referência completa e maravilhosa para coisas como essa. É longo, mas muito valioso.

Muitos designers recomendam uma grade de linhas padrão para que um preenchimento de linha + caiba sempre em, digamos, 16 pixels. Portanto, qualquer coisa menor que isso teria uma altura de linha de 16, tudo acima disso teria uma altura de linha 32.

O comprimento ideal de uma linha para leitura de texto é de 45 caracteres por algumas e de 55 a 75 por outras fontes.

Existem algumas médias comuns de sites aqui: Padrões tipográficos de design e práticas recomendadas


1

Eu diria que comece com o parágrafo em 16px e use a sequência de Fibonacci para calcular o restante. Parece que os principais navegadores estão usando essa lógica. Ao longo dos anos (para pesquisas futuras, usando os "Elementos do estilo tipográfico: versão 4.0" de Robert Bringhurst, Hartley e Marks), o líder foi definido em 12 pontos para uma fonte de 10 pontos.

Convertendo 12pt em pixels, obtemos uma fonte base de 16px.

A maioria das folhas de estilo padrão dos navegadores usa 16 pixels para o texto do parágrafo, como você pode inspecionar no DOM ou lendo as https://www.w3.org/TR/CSS21/sample.html e as listas http: //. w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

O problema que estamos enfrentando hoje é justamente o fato de estarmos falando de um novo tipo de tipografia. A tipografia da web atual que precisa se encaixar em diferentes dispositivos é completamente diferente dos conceitos anteriores, como os descritos nos Elements of Typographic Style de Robert Bringhurst. Apesar de ser um excelente livro, a realidade é que o designer moderno precisa de código. Normalmente, considero uma matriz padrão das principais folhas de estilo do navegador criando um esqueleto de um arquivo HTML com o rodapé básico h1, h2, h3, h4, h5, h6, parágrafo e rodapé. Inspeciono a folha de estilo do navegador para entender o tamanho do tamanho padrão de pixel usado pela altura da linha e pela hierarquia nos títulos. Antes do tamanho da tipografia da web ser regulado pelo tipo móvel de metal / madeira, mas a partir de 1985, com o acordo entre Adobe e Apple, as coisas começaram a mudar. Considero que hoje, os principais reguladores dos conceitos de tipografia são Apple, Safari, Windows, com Internet Explorer, Chrome, Firefox ... Você precisará olhar as folhas de estilo dos navegadores para acomodar sua tipografia ao que realmente será renderizado e dispositivos diferentes. Você ainda deve seguir as práticas de Elements of Typographic Style, de Robert Bringhurst, que é um excelente livro, ou seguir o sistema de sequência de Fibonacci. Costumo manter-me atualizado sobre as alterações nas folhas de estilo dos navegadores e ler as especificações da w3 aqui: Você ainda deve seguir as práticas de Elements of Typographic Style, de Robert Bringhurst, que é um excelente livro, ou seguir o sistema de sequência de Fibonacci. Costumo manter-me atualizado sobre as alterações nas folhas de estilo dos navegadores e ler as especificações da w3 aqui: Você ainda deve seguir as práticas de Elements of Typographic Style, de Robert Bringhurst, que é um excelente livro, ou seguir o sistema de sequência de Fibonacci. Costumo manter-me atualizado sobre as alterações nas folhas de estilo dos navegadores e ler as especificações da w3 aqui:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 Acho que o campo Design precisa levar isso em consideração e acho que a educação para a prática não é atualizada com realidades atuais. Você também pode ler mais aqui no meu blog: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/


Olá @EstelaG e bem-vindo ao GD.SE! Temos regras estritas para spam e respostas nos links. Eu odiaria ver sua resposta sinalizada. Você deve editar sua pergunta para resumir os pontos principais do artigo.
curious
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.