Comprendere la tipografia 10 Strumenti e risorse utili

Nel mio ultimo articolo su Understanding Typography, ho scritto su cosa va nella progettazione della tipografia e su come manipolarlo per migliorare il layout del tuo sito Web e migliorare l'esperienza dell'utente. In questo articolo, sto elencando 10 dei miei strumenti preferiti per la tipografia In rete.

Questi possono aiutare a costruire griglie e aree di contenuto HTML, creare stili CSS, generare nomi di font e un sacco di altre cose interessanti. Consulta alcuni dei link qui sotto e assicurati di farci conoscere i tuoi pensieri nell'area di discussione post.

Lettura consigliata: Comprendere la tipografia: scrivere per il web

Font Matrix

Questa guida online è stata pubblicata dal blog di design 24ways. È dotato di una tabella a matrice di tutti i tipi di carattere web standard che troverai per impostazione predefinita da vari fornitori di software. I titoli più diffusi includono i programmi Windows, Mac OS X, Microsoft Office e Adobe Creative Suite.

Controllo del contrasto del colore

Il contrasto del colore è spesso un problema quando ci si avventura fuori dal modello standard in bianco e nero. Quando trovi una corrispondenza sembra la perfezione del design. Tuttavia, una scelta combinata di colori scadenti sembra molto negativa e influenzerà negativamente il design generale. Questo piccolo strumento web può aiutarti a scegliere un insieme di colori da abbinare tra loro per qualsiasi layout di stile.

HTML-Ipsum

Hai bisogno di uno strumento Lorem Ipsum che possa fare molto di più del semplice output del testo? Questo generatore HTML online creerà blocchi di codice per gli elementi di pagina più comuni. Alcuni esempi includono elenchi non ordinati, elenchi di definizioni, moduli Web, tabelle e molte altre soluzioni.

Typechart

Typechart è uno dei miei strumenti preferiti come sviluppatore CSS. Spesso sto cercando di abbinare un font specifico sul mio sistema a un progetto web, ma semplicemente non ho il tempo di sfogliare tutta la mia collezione. Questo fantastico strumento ti consente di setacciare le scelte più popolari delle famiglie di font e persino di scaricare il codice CSS corretto!

PX-to-EM.com

A meno che non si ripristini la dimensione del testo del browser predefinito, è probabile che ci siano problemi con gli sme con pixel. Questa app nel browser fornisce sia una tabella di conversione che un'interfaccia utente per px in em. È sicuramente uno strumento molto semplice, ma offre una guida pratica con funzionalità davvero semplici - e non si può battere il prezzo di listino gratuito.

Set di tipi CSS

Non consiglio di attenermi a CSS Type Set per troppo tempo poiché è veramente uno strumento per principianti. Ti consente di generare codice CSS in base a proprietà specifiche dei font che selezioni. Mentre all'inizio è molto utile, col passare del tempo diventa una stampella su cui appoggiarsi. E non sarai in grado di padroneggiare le proprietà CSS da solo. Ma se è necessario risparmiare tempo su un progetto, questo strumento non può essere trascurato.

capovolgimento tipico

Ecco un esempio davvero unico di una libreria di anteprima dei font. Il flipping tipico include una manciata di caratteri che sono nativi del tuo sistema operativo. Esegue la scansione automatica della directory dei caratteri per raccogliere le soluzioni più sicure sul Web. Puoi confrontarli fianco a fianco e scegliere facilmente tra le tue opzioni preferite. Questo è un altro ottimo risparmio di tempo che aggiungi ai segnalibri e non ci pensi fino all'ultimo minuto.

Griglia tipografica

Si parla molto della progettazione intorno alla griglia in HTML e CSS. Probabilmente capisci il concetto di come funzionano le griglie e misurare un sito web in pixel non è diverso. Questo tutorial sulla griglia di CSS-Tricks è più simile a uno sforzo guidato per introdurre le basi della tipografia per l'era digitale. È un argomento molto più avanzato nel regno del web design. Ma se hai un po 'di pazienza, ti consiglio di esaminare i dettagli per vedere come queste proprietà della griglia possono effettivamente influenzare il layout della tua pagina.

WhatTheFont!

Abbiamo trovato tutti un logo o un'immagine con un font non identificabile davvero interessante. WhatTheFont ha fatto giri su Internet per alcuni anni ed è ancora uno dei miei preferiti. Scegli un'immagine da caricare e il loro script analizzerà il testo all'interno dell'immagine per abbinare qualsiasi tipo di carattere simile. L'app ti collegherà anche a prodotti esterni dove potrai acquistare ogni font a tuo piacimento.

Calcolatore linea di base / altezza

Finalmente uno strumento davvero potente per generare l'altezza della linea e le proprietà del ritmo. Basta inserire valori per la dimensione del carattere di base e l'altezza della linea, oppure includere il proprio codice CSS personalizzato a lato. L'app genera anteprime in alcuni stili diversi in modo che tu possa avere un'idea di come queste proprietà apparirebbero sul tuo sito web.