Quais são os tamanhos de fonte mais comuns para tags H1-H6 [fechado]

107

Sempre tive dúvidas sobre por onde começar como uma linha de base das melhores práticas gerais. Sim, eu sei que depende do seu design - mas o que é mais comum?

Aqui está o que tenho atualmente como iniciante:

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}

Sim, não usamos EMs no meu trabalho atual.

obrigado

html css frontend

— rsturim
fonte

não pense que esta é uma pergunta apropriada, pois não há resposta.

— Treemonkey

Treemonkey, realmente? Não é certo pedir opiniões?

— rsturim

Minha atividade favorita é quando eu procuro algo no Google, o principal resultado é uma postagem StackOverflow e a pergunta está encerrada ou em espera. Nada como o encapsulamento obsoleto de conhecimento para resistir ao teste do tempo.

— Kyle Kelley

Não, @rsturim, não está certo pedir opiniões

— Liam

Eu procurei por uma pergunta como esta, então embora fora do tópico para esta pilha em particular, eu achei útil. Ter esta questão fechada significa que nenhum diálogo, debate ou respostas adicionais podem ser adicionados, reduzindo o valor desta questão para a comunidade em geral. Já vi outras questões fora do tópico migradas para pilhas mais apropriadas. Isso pode ser feito para esta pergunta? Saúde ~

— Pete

Respostas:

213

Dependeria da folha de estilo padrão do navegador. Você pode ver uma tabela (não oficial) de padrões da folha de estilo do agente do usuário CSS2.1 aqui .

Com base na página listada acima, os tamanhos padrão são mais ou menos assim:

    IE7     IE8     FF2         FF3         Opera   Safari 3.1
H1  24pt    2em     32px        32px        32px    32px       
H2  18pt    1.5em   24px        24px        24px    24px
H3  13.55pt 1.17em  18.7333px   18.7167px   18px    19px
H4  n/a     n/a     n/a         n/a         n/a     n/a
H5  10pt    0.83em  13.2667px   13.2833px   13px    13px
H6  7.55pt  0.67em  10.7333px   10.7167px   10px    11px

Também vale a pena dar uma olhada na folha de estilo padrão para HTML 4 . O W3C recomenda usar esses estilos como padrão. Um trecho resumido:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

Espero que esta informação seja útil.

— Rosquinha
fonte

A recomendação HTML 4 para H6 foi ignorada e 0,67em venceu; hoje em dia, o WebKit e o FF usam os mesmos emtamanhos do IE8. w3.org/TR/html-markup/h6.html também diz que a exibição "típica" é de 0,67em.

— Beni Cherniavsky-Paskin

Algum raciocínio por trás disso ou algum cara aleatório disse uma vez "deve haver títulos nesses tamanhos"?

— rzb

Seria uma boa ideia atualizar a resposta para incluir padrões HTML5.

— Moha, o camelo todo-poderoso

Aqui no HTML5 w3.org/TR/html5/rendering.html#sections-and-headings

— Sirenes

@ BeniCherniavsky-Paskinthe link está quebrado. Você pode postar um novo?

— kuldeep

Os títulos normalmente estão em negrito; que foi desativado para esta demonstração de correspondência de tamanho. MSIE e Opera interpretam esses tamanhos da mesma forma, mas observe que os navegadores Gecko e o Chrome interpretam Heading 6 como 11 pixels em vez de 10 pixels / tamanho de fonte 1 e Heading 3 como 19 pixels em vez de 18 pixels / tamanho de fonte 4 (embora seja difícil dizer a diferença mesmo em uma comparação direta e impossível de usar). Parece que o Gecko também limita o texto a não menos que 10 pixels.

— Sujit Agarwal
fonte