Quali sono i rapporti standard per la tipografia sul web?


25

Nel preparare un web design, cerco spesso di assicurarmi che la mia tipografia sia proporzionale e coerente. Tuttavia, non sono stato in grado di trovare articoli o risorse definitivi su quali rapporti e dimensioni dovrebbero essere utilizzati. In particolare, quali sono le pratiche consigliate o standard per:

  • Dimensione del font
  • Altezza della linea
  • Larghezza della linea
  • Interlinea

Si prega di considerare sia il paragrafo che il testo dell'intestazione nelle risposte. Inoltre, qualsiasi studio sull'efficacia di vari rapporti o metriche sarebbe molto utile.

Risposte:


18

Elements of Typographic Style di Robert Bringhurst è un riferimento completo e meraviglioso per cose come questa. È lungo ma molto prezioso.

Molti designer raccomandano una griglia di linee standard in modo che una linea + imbottitura si adatti sempre, per esempio, a 16 pixel. Quindi qualcosa di meno avrebbe un'altezza di linea di 16, tutto quanto sopra avrebbe un'altezza di linea di 32.

La lunghezza ideale di una riga per la lettura del testo è considerata di 45 caratteri da alcuni e 55-75 da altre fonti.

Ci sono alcune medie comuni di siti Web qui: modelli di design tipografico e buone pratiche


1

Direi che inizia con il paragrafo a 16px e usa la sequenza di Fibonacci per calcolare il resto. Sembra che i principali browser stiano usando questa logica. Nel corso degli anni (per la ricerca futura, utilizzando "Gli elementi dello stile tipografico: versione 4.0" di Robert Bringhurst, Hartley e Marks), il leader è stato impostato su 12pt per un carattere 10pt.

Convertendo 12pt in pixel otteniamo un carattere base di 16px.

La maggior parte dei fogli di stile predefiniti del browser utilizza 16 pixel per il testo del paragrafo su come è possibile ispezionare il DOM da soli o leggendo gli elenchi https://www.w3.org/TR/CSS21/sample.html e http: //. w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

Il problema che stiamo avendo oggi è proprio che stiamo parlando di un nuovo tipo di tipografia. L'attuale tipografia web che deve adattarsi a diversi dispositivi è completamente diversa dai concetti passati come quelli raffigurati sugli Elementi di stile tipografico di Robert Bringhurst. Nonostante questo sia un libro eccellente, la realtà è che il designer moderno ha bisogno di codice. Di solito considero una matrice standard dai principali fogli di stile del browser creando uno scheletro di un file HTML con h1, h2, h3, h4, h5, h6, paragrafo, footer di base. Ispeziono il foglio di stile del browser per capire la dimensione della dimensione standard dei pixel che usano l'altezza della linea e la gerarchia delle intestazioni. Prima che la dimensione della tipografia web fosse regolata dal tipo mobile metallo / legno ma dal 1985, con l'accordo tra Adobe e Apple le cose iniziarono a cambiare. Ritengo che oggi, i principali regolatori dei concetti tipografici siano Apple, Safari, Windows, con Internet Explorer, Chrome, Firefox ... Dovrai guardare i loro fogli di stile del browser per adattare la tua tipografia a ciò che verrà effettivamente visualizzato e in dispositivi diversi. Dovresti ancora seguire le pratiche di Elements of Typographic Style di Robert Bringhurst, che è un libro eccellente, o seguire il sistema di sequenze di Fibonacci. Di solito mi tengo aggiornato sulle modifiche apportate ai fogli di stile del browser e leggo le specifiche di w3 qui: Dovresti ancora seguire le pratiche di Elements of Typographic Style di Robert Bringhurst, che è un libro eccellente, o seguire il sistema di sequenze di Fibonacci. Di solito mi tengo aggiornato sulle modifiche apportate ai fogli di stile del browser e leggo le specifiche di w3 qui: Dovresti ancora seguire le pratiche di Elements of Typographic Style di Robert Bringhurst, che è un libro eccellente, o seguire il sistema di sequenze di Fibonacci. Di solito mi tengo aggiornato sulle modifiche apportate ai fogli di stile del browser e leggo le specifiche di w3 qui:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 Penso che il campo Design debba tenerne conto e trovo che l'educazione alla pratica non sia aggiornata con realtà attuali. Puoi anche leggere di più qui sul mio blog: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/


Ciao @EstelaG e benvenuto su GD.SE! Abbiamo regole rigide per spam e risposte nei link. Non vorrei vedere la tua risposta contrassegnata. È necessario modificare la domanda per riepilogare i punti principali dell'articolo.
curioso
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.