Tutto su come scegliere il font giusto per un sito web

Question

In realtà ho in questo momento due domande:

1) Quali tipi di carattere sono preferiti per un sito Web? In questo momento mi piace molto "Segoe UI", ma è disponibile solo sui più recenti sistemi Windows come Vista e 2008 Server. Così ho definito una sequenza:

font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif; 

non mi piace molto il look di tutti loro tranne che per 'Segoe UI'. Qualche suggerimento su quale font carino potrebbe essere usato in aggiunta a quello? Ho anche provato "Trebuchet MS", sembra fantastico sui documenti, ma non su una pagina.

2) Un modo per specificare con CSS dimensioni di carattere diverse per ogni particolare tipo di carattere? Come "Segoe UI - 9px", Tahoma - 8px ecc. Probabilmente non è possibile, ma forse ci sono alcuni trucchi?

So anche che ora riceverò molti commenti per utilizzare le dimensioni relative dei caratteri, ma non lo voglio. Ho alcuni elementi grafici nel mio design che non sono estensibili. Se l'utente o il browser predefiniti portano al font reso con dimensioni variabili, il design andrà abbastanza presto in pezzi. Preferisco avere un design con limitazioni della dimensione dei caratteri per non avere affatto il design.

Answer 1

1) Quali tipi di carattere sono preferiti per un sito Web?

Vedere questa pagina relativa a safe web fonts.

2) Un modo per specificare dimensioni di carattere diverse per ogni particolare famiglia di caratteri tramite CSS?

No.

Presto, @font-face sarà supportato da tutti i principali browser e sarà possibile utilizzare qualsiasi carattere desiderato sul proprio sito Web.

Fino ad allora, dare un'occhiata a Cufón o sIFR.

Answer 2

Re. la tua scelta di carattere, considererei l'usabilità come requisito fondamentale (a meno che tu non abbia intenzione di un formato appositamente disegnato).

Neilson fatto un study e trovato Verdana o Arial per essere scelte ottimali in termini di leggibilità.

Answer 3

1) Quali tipi di carattere sono preferiti per un sito Web? In questo momento mi piace molto l'interfaccia utente di Segoe " ", ma è disponibile solo su i più recenti sistemi Windows come Vista e il server 2008. Così ho definito una sequenza : famiglia di caratteri: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif; Non mi piace molto l'aspetto di tutti gli di essi ad eccezione di "Segoe UI". Qualsiasi suggerimento su quale font bello potrebbe essere utilizzato in aggiunta a quello? Ho anche provato lo "Trebuchet MS", è bello sui documenti , ma non proprio su una pagina.

Quali tipi di carattere sono preferiti? Questa è una domanda difficile. Ci sono tre principali piattaforme di calcolo che hanno ciascuna il proprio set di caratteri di base.Quindi, alcuni software come Adobe Creative Suite, la suite di Microsoft Office o anche software semplice come il visualizzatore Powerpoint 2007 per XP installano i caratteri per l'utente. Ci sono molti grafici sul web che elencano commonly used fonts.

Per un sito Web, si desidera utilizzare caratteri leggibili. La maggior parte dei caratteri di schermo comunemente usati sul web sono piuttosto leggibili. I caratteri che hai citato, ad esempio, sono buoni esempi. Il font più leggibile sullo schermo è Verdana, anche se è generalmente considerato brutto. Arial è sempre una scelta sicura.

Basta fare attenzione con la dichiarazione dell'interfaccia utente di Segoe: se un utente di Windows XP ha quel tipo di carattere, probabilmente non sarà leggibile con l'anti alias disattivato.

Per le intestazioni, è possibile personalizzare e utilizzare tecniche come sIFR e Cufon per sostituire il testo con caratteri di sistema non nativi.

Una nota rapida sulla dimensione: la maggior parte dei siti tende a impostare una dimensione del carattere molto piccola. 13 pixel rappresentano il minimo per i testi lunghi (vedere relative readibility). Un carattere con una X ridotta come Times deve essere utilizzato solo per intestazioni o dimensioni sufficientemente grandi (ad esempio 15+ pixel).

2) Un modo per specificare con CSS diverse dimensioni per ogni particolare font-familiy di carattere? Come 'Segoe UI - 9px', Tahoma - 8px ecc. Questo è probabilmente non possibile, ma forse lo sono alcuni trucchi?

No, questo non è possibile. Puoi fare ipotesi sul browser e le persone del sistema operativo sono in esecuzione tramite Javascript e quindi fare ipotesi sui caratteri che hanno installato, ma è molto lavoro per un guadagno relativamente piccolo. Lo sconsiglierei.

Answer 4

CSS3 supporterà in modo nativo i font scaricabili (non verrà richiesto il download, funzioneranno solo al volo), quindi sarà possibile utilizzare qualsiasi carattere tipografico desiderato. Non ci resta che aspettarlo ma dato che sarà disponibile solo in Firefox 3.5 e Opera 10.

Puoi anche usare caratteri classici come: Arial/Helvetica, Verdana, Georgia o anche Times Roman per un grande impatto visivo . Hai solo bisogno di trovare la giusta dimensione del carattere e il contrasto con altri elementi sulla pagina.

Answer 5

Utilizzare il carattere corretto per il sito. Non è così semplice come dire "questo è il miglior font per siti web". Qui ci sono due citazioni (leggi principi) di Robert Bringhurst di "The Elements of Typographic Style": "Typography esiste per onorare contenuti"

• "Scegli i volti adatti all'attività e al soggetto."

In un'altra nota, a meno che un quadrante non sia adatto al sito Web, le facce sans-serif sono più appropriate per i supporti digitali.

Riguardo al tuo secondo punto, Phil Oye ha recentemente rilasciato FontUnstack, un plugin jQuery che ti dirà quale font viene usato per un determinato elemento. All'elemento verrà assegnata una classe (ad esempio "set_in_gill_sans") tramite la quale è possibile applicare stili specifici per diversi tipi di carattere.

Inoltre, controlla il font matrix (1,5 anni) e questi ben congegnati font-stacks.

Answer 6

Personalmente, mi piacciono Verdana e Georgia, anche se sono solo Mac/Windows - "sicuri". Nel tuo caso, forse è meglio selezionare un carattere di seconda scelta che abbia le stesse metriche della tua prima scelta.

Answer 7

La maggior parte dei browser principali supporta già @font-face in modo da poter utilizzare qualsiasi font disponibile in modo aperto.
Google Web Fonts host alcuni font liberi di scegliere tra:

Ci sono anche pagati siti web come Typekit che ospiterà pagato font per te e ti permettono di acquistarli: