Quali sono le dimensioni dei caratteri più comuni per i tag H1-H6 [chiuso]

107

Non sono sempre stato sicuro di dove iniziare come base di riferimento generale per le migliori pratiche. Sì, lo so che dipende dal tuo design, ma cosa è più comune?

Ecco cosa ho attualmente come antipasto:

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

Sì, non usiamo EM nel mio lavoro attuale.

Grazie

html css frontend

— rsturim
fonte

non credo che questa sia una domanda appropriata in quanto non c'è risposta ..

— Treemonkey

Treemonkey, davvero? Non va bene chiedere opinioni?

— rsturim

La cosa che preferisco è quando cerco qualcosa su Google, il risultato principale è un post StackOverflow e la domanda è chiusa o in attesa. Niente di meglio dell'incapsulamento stantio della conoscenza per resistere alla prova del tempo.

— Kyle Kelley

No, @rsturim, non va bene chiedere pareri

— Liam

Ho cercato una domanda come questa, quindi mentre ero fuori tema per questo particolare stack, l'ho trovata utile. La chiusura di questa domanda significa che non è possibile aggiungere ulteriori dialoghi, dibattiti o risposte, abbassando il valore di questa domanda per la comunità in generale. Ho visto altre domande fuori tema migrate a stack più appropriati. Può essere fatto per questa domanda? Saluti ~

— Pete

Risposte:

213

Dipenderà dal foglio di stile predefinito del browser. Puoi visualizzare una tabella (non ufficiale) delle impostazioni predefinite del foglio di stile dell'agente utente CSS2.1 qui .

Sulla base della pagina sopra elencata, le dimensioni predefinite sono simili a questa:

    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

Vale anche la pena dare un'occhiata al foglio di stile predefinito per HTML 4 . Il W3C consiglia di utilizzare questi stili come predefiniti. Un estratto abbreviato:

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; }

Spero che questa informazione sia utile.

— Ciambella
fonte

La raccomandazione HTML 4 per H6 è stata ignorata e 0.67em ha vinto; al giorno d'oggi WebKit e FF utilizzano le stesse emdimensioni di IE8. w3.org/TR/html-markup/h6.html dice anche che la visualizzazione "tipica" è 0.67em.

— Beni Cherniavsky-Paskin

Qualche ragionamento dietro questo o qualcuno a caso ha detto una volta "ci saranno titoli di queste dimensioni"?

— rzb

Sarebbe una buona idea aggiornare la risposta per includere i valori predefiniti HTML5.

— Moha l'onnipotente cammello

Qui su quelli HTML5 w3.org/TR/html5/rendering.html#sections-and-headings

— Sirens

@ BeniCherniavsky-Paskintil link è interrotto, puoi pubblicarne uno nuovo?

— kuldeep

I titoli sono normalmente in grassetto; che è stato disattivato per questa dimostrazione di corrispondenza delle dimensioni. MSIE e Opera interpretano queste dimensioni allo stesso modo, ma si noti che i browser Gecko e Chrome interpretano l'intestazione 6 come 11 pixel invece di 10 pixel / dimensione carattere 1 e l'intestazione 3 come 19 pixel invece di 18 pixel / dimensione carattere 4 (sebbene sia difficile da dire la differenza anche in un confronto diretto e impossibile nell'uso). Sembra che Gecko limiti anche il testo a non più piccoli di 10 pixel.

— Sujit Agarwal
fonte