Share
Benvenuti alla nona lezione della nostra serie Web Design for Kids, interamente dedicata alla tipografia.
In questo tutorial vedremo cos'è la tipografia e perché è così importante nel design. Abbiamo parlato molto dell'esperienza dell'utente finora e questo tutorial non farà eccezione; lavoreremo sodo per assicurarci che il nostro testo sia bello e facile da leggere!
Non dimenticare di porre domande nella sezione commenti in fondo a questa pagina!
La tipografia è ovunque. È così che vediamo le parole scritte, quindi ovunque incontriamo le parole vediamo la tipografia. Queste parole possono essere trovate su schermi, carta e segni intorno a noi.
Con la tipografia possiamo cambiare il "look and feel" di queste parole, cambiando il loro impatto sui lettori. Il design di parole spesso interessano i nostri utenti prima ancora che abbiano la possibilità di leggere i nostri contenuti, quindi è importante che il design e la sensazione generale della nostra tipografia corrispondano al tatto del contenuto stesso.
Nella lezione precedente abbiamo parlato di quanto siano importanti i contenuti. Dopotutto, non importa quanto sia buono il nostro sito se non contiene informazioni che qualcuno vuole leggere! Il modo in cui presentiamo queste parole all'utente, tuttavia, diventa tanto parte del messaggio quanto le parole stesse.
La tipografia implica una terminologia abbastanza simile.
UN carattere tipografico è il disegno generale di una raccolta di caratteri (parole e simboli), mentre a font è una dimensione specifica, il peso (quanto sono spesse le lettere), lo stile e l'uso di un carattere tipografico.
I nostri Tuts + Town design utilizza a carattere tipografico chiamato "Open Sans". Usiamo diverse dimensioni e pesi di questo carattere tipografico, che ci dicono quale font caricare nella pagina.
Quindi, mentre utilizziamo i caratteri sul nostro sito, questi font sono basati su caratteri tipografici che qualcuno ha dedicato molto tempo alla progettazione.
Un carattere tipografico può essere serif o sans-serif. UN serif è meglio descritto come le code o le estensioni alle estremità di alcune lettere.
Un carattere tipografico serif ha queste estensioni:
Open Sans è un carattere tipografico sans-serif; senso senza serif. Un carattere sans-serif non ha estensioni come la lettera sopra:
Non c'è una risposta giusta o sbagliata su quale usare sul nostro sito, ma vorremmo che corrispondesse al design generale e sentire stiamo cercando di ottenere oltre che l'opzione più leggibile considerando il nostro layout e la quantità di testo.
Un carattere tipografico serif è generalmente più facile da leggere su carta o quando c'è molto testo, mentre un sans-serif può essere migliore su uno schermo o con una quantità minore di testo.
Per ottenere la migliore tipografia per i nostri siti web, dobbiamo pensare a cosa rende ogni carattere diverso da un altro. Ci sono molte parti differenti di ciascun carattere tipografico che qualcuno ha progettato e pensato in modo molto dettagliato.
Sono questi dettagli che costituiscono l'unicità di ognuno e tocca a noi scegliere quale si adatta meglio a diversi progetti e situazioni.
Diamo una breve occhiata ad alcuni dettagli dei caratteri tipografici per capire meglio come questi possano migliorare (o peggiorare) i nostri progetti:
Non è necessario memorizzare queste parti in questo momento, ma sappi che le loro variazioni contribuiscono a rendere speciale ogni carattere.
Come per la maggior parte delle cose legate alla tipografia, la spaziatura è estremamente importante quando si crea la migliore esperienza per i nostri utenti. La quantità di spaziatura tra ogni lettera, tra le parole e tra le righe di parole può fare un'enorme differenza leggibilità.
Non c'è abbastanza spazio per darci lettere e parole che sono troppo ammucchiate per leggere bene, mentre troppa spaziatura spezzerà tutto e sarà altrettanto difficile da leggere e seguire.
I font hanno una propria spaziatura che è in genere piuttosto piacevole da leggere, ma diamo un'occhiata a cosa è chiamato questo intervallo diverso e come apportare modifiche al nostro CSS nel caso in cui avessimo bisogno di farlo nei nostri progetti.
puntamento è la spaziatura generale tra tutti i caratteri (lettere) in un pezzo di testo.
Possiamo apportare modifiche a questo nel nostro CSS se lo vogliamo, usando il spaziatura del carattere proprietà:
h1 letter-spacing: 5px;
Accentsconagua
word-spacing proprietà:h1 spaziatura parole: 15px;
crenatura è la spaziatura tra due caratteri.
Il crenatura tra ogni coppia di caratteri viene cambiata dal progettista del carattere, poiché alcune lettere sembrano più vicine e altre più lontane. Questo è dovuto al fatto che le cose sembrano bilanciate ed è difficile da fare solo con i CSS.
principale si riferisce alla spaziatura tra le righe di frasi.
Possiamo apportare delle modifiche a questa spaziatura dando un valore che modifichi il valore predefinito impostato dal carattere in uso attraverso altezza della linea proprietà.
p altezza linea: 2;
Un valore di 2 qui assicureremo che il nostro vantaggio sia il doppio rispetto all'importo predefinito per quel tipo di carattere.
Se una sola parola è lasciata su una linea da sola (aaaah) alla fine di un blocco di testo, viene chiamata a Vedova.
Diciamo che i blocchi nell'immagine seguente rappresentano parole all'interno di colonne. La vedova è il blocco blu, seduto da solo alla fine della colonna perché è lì che finisce la frase:
Un Orfano è una singola parola esistente su una riga da sola all'inizio di una colonna, che abitualmente si trova accanto alla colonna in cui la maggior parte del testo correlato è.
Le vedove e gli orfani sono considerati una cattiva tipografia a causa di come possono essere distrazioni, peggiorando l'esperienza di lettura complessiva.
Esistono diversi approcci che è possibile adottare per correggere uno di questi problemi se si verificano sui nostri siti, ad esempio:
Possiamo scegliere di allineare il nostro testo a sinistra (predefinito sul Web per le lingue scritte da sinistra a destra come l'inglese), al centro o sulla destra.
Il testo sul Web dovrebbe in genere essere allineato a sinistra (di nuovo, per le lingue scritte da sinistra a destra) perché è il modo in cui gli oratori e i lettori di quelle lingue sono utilizzati per leggere.
L'allineamento al centro viene spesso utilizzato su titoli e intestazioni che li aiuta a distinguersi maggiormente dal testo principale di una pagina. Possiamo farlo nel nostro CSS con il text-align proprietà, ad esempio:
h1 text-align: center;
Il testo allineato in questo modo si trova di solito su cartelli e volantini che cercano di attirare l'attenzione di qualcuno, ma non dovremmo centrare l'allineamento di un grande corpo di testo sul Web perché sarà molto più difficile da leggere per i nostri utenti. Il testo allineato al centro crea larghezze molto diverse da una linea all'altra, rendendo più difficile il controllo dell'occhio.
Alcune lingue (come l'ebraico) sono scritte da destra a sinistra, rendendo l'allineamento di destra l'allineamento predefinito.
Come designer possiamo anche scegliere di avere alcuni piccoli pezzetti di testo allineati in modo che possano risaltare un po 'di più, come le didascalie delle immagini. Queste didascalie sono titoli o descrizioni per immagini con il proprio elemento HTML, figcaption.
L'allineamento di cui sopra è fatto dichiarando destra sull'elemento in un documento CSS:
figcaption text-align: right;
Gran parte della tipografia che progettiamo sarà per noi stessi a leggere il contenuto e apportare le modifiche necessarie. Vi sono, tuttavia, alcuni suggerimenti generali che possono aiutarci a migliorare le nostre capacità tipografiche.
UN dimensione del font meno di 16px sul testo che costituisce la maggior parte dei nostri contenuti è generalmente considerato troppo piccolo e difficile da leggere sugli schermi.
Ne abbiamo parlato molto gerarchia visiva nel precedente tutorial sulle basi del design. L'impostazione della gerarchia per il testo in tutto il nostro design garantirà che il sito sia più facile da navigare separando i contenuti correlati e evidenziando ciò che è più importante.
Il testo sul nostro sito Tuts + Town presenta diversi livelli di gerarchia, con il titolo che è il più importante, seguito dalle categorie di attività commerciali e negozi specifici e termina con la sezione "creata da" in fondo.
La gerarchia qui è stabilita da diverse dimensioni, colori e posizioni sulla pagina.
Parleremo più a lungo del colore e del contratto nel prossimo tutorial, quindi basta sapere di essere a conoscenza del colore del testo e se si scontra o meno con il colore di sfondo, rendendo difficile la lettura.
Ecco un esempio di cattivo contrasto a sinistra e contrasto migliore a destra:
Il testo rosa acceso su uno sfondo turchese scuro a sinistra mostra l'impatto di uno scarso contrasto. Il testo è difficile da leggere, sembra un po 'sfocato e fa male agli occhi!
Come regola generale, è meglio non utilizzare più di due o tre caratteri diversi per progetto. I caratteri accoppiati dovrebbero adattarsi l'un l'altro ed entrambi supportano il tatto e le idee generali dietro al design.
Non tutti i font funzionano bene sul Web e sono i migliori per la sola stampa. Fortunatamente Google Fonts, che abbiamo usato per importare Open Sans nel nostro sito Tuts + Town, ci fornisce una straordinaria lista di caratteri adatti al web.
In questo tutorial abbiamo toccato cosa è esattamente la tipografia, esaminato come diverse parti di un carattere tipografico possono distinguerlo dagli altri, e concluso con alcuni suggerimenti generali da tenere a mente quando si lavora con testo e caratteri sul web. Tutto per raggiungere un unico obiettivo: rendere i nostri contenuti più facili da leggere.
Successivamente ci tufferemo in alcune regole generali relative all'uso dei colori sul web e quale messaggio stiamo comunicando ai nostri utenti in base alla nostra selezione generale dei colori.
Ci vediamo in giro per la città!
