15 utili strumenti di tipografia Web, librerie e framework

Trattare con la tipografia sul web è stato davvero bizzarro. Ogni browser ha il proprio algoritmo per il rendering dei caratteri che potrebbe portare a discrepanze impreviste. Ci sono solo alcune proprietà CSS che puoi usare per avere un certo controllo sui caratteri, come la crenatura dei caratteri, la levigatura dei font, nella creazione di DropCaps ecc. Per di più, dobbiamo affrontare molti problemi di layout quando si tratta di caratteri.

La buona notizia è che ci sono risorse che è possibile utilizzare per prendere il sopravvento quando si tratta di tipografia del sito web. Ecco 15 strumenti web, librerie e framework puoi usare a tal fine.

Altro su Hongkiat:

9 plugin WordPress per fare di più con i tuoi font
20 migliori plugin di tipografia WordPress per migliorare la leggibilità
Icone UI migliori e più nitide con i caratteri Web

TypeRendering

In poche parole, TypeRendering funziona in modo simile a Modernizr, tranne che identifica solo il motore del browser per il rendering dei font. Questa libreria aggiunge classi personalizzate in base alle sue scoperte che possono essere utilizzate per applicare regole di stile specifiche per il rendering del testo.

KerningJS

Kerning non è ancora personalizzabile per l'uso sul web - font-crenatura il supporto è ancora scarso al momento - ma una nuova proprietà standard sta venendo sulla nostra strada. KerningJS è una libreria Javascript che ti offre alcune nuove proprietà per un migliore controllo del kerning, per esempio -lettera-Kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Tieni presente che l'esempio sopra riportato non è standard e applicabile solo con KerningJS.

DropcapJS

Sebbene la creazione di un dropcap sia fattibile con gli attuali standard CSS, il risultato non è ancora perfetto. A volte è decisamente indesiderabile. DropcapJS, sviluppato da Adobe Web Platform, è incaricato di consentire al web designer di applicare facilmente un dropcap perfetto.

LiningJS

LiningJS è una libreria JavaScript che aggiunge il linea classe in ogni riga del tuo paragrafo. Questo ti consente di personalizzare la linea separatamente. Simula l'idea di :: ennesima-line (), :: nth-last-line () e ::ultima linea pseudo-classi che non sono ancora presenti nei CSS. Ecco un esempio di come si disegna la prima riga di un paragrafo con LiningJS:

 p .line [first] font-weight: 600; text-transform: maiuscolo;

Inoltre, LiningJS supporta anche il flusso di paragrafo cinese.

UnderlineJS

UnderlineJS è una libreria JavaScript che migliora il testo. Guarda la demo per vedere cosa intendo, assicurati di passare il mouse sopra le righe. Confronta la demo con l'output di sottolineatura del CSS corrente text-decoration standard e probabilmente saresti anche un fan di underlineJS.

FlowType

Questo plugin regola dinamicamente la dimensione del carattere in base a una larghezza specifica del wrapper. FlowType ti aiuta ad applicare un numero ideale di caratteri per riga a qualsiasi larghezza dello schermo. La libreria include opzioni in cui è possibile impostare la larghezza dello schermo min / max, la dimensione del carattere min / max e il rapporto font.

HatchShow

HatchShow espande la dimensione di un font per riempire l'intera larghezza del suo contenitore. Il plugin funziona fuori dalla scatola con l'algoritmo; in poche parole, misura la larghezza del contenitore e la lunghezza del carattere del carattere e aggiunge la dimensione corretta del carattere.

GridLover

GridLover è un ottimo strumento per generare stili di base per la disposizione tipografica (dimensioni, altezza della linea e margine) con un'interfaccia utente a scorrimento facile. Genera gli stili in SCSS, LESS e Stylus in modo da poterlo includere subito nel progetto, indipendentemente da quale CSS-Preprocessor usi.

TypeScale

TypeScale è uno strumento online che ti aiuterà a determinare facilmente la giusta dimensione del carattere per il tuo sito web. Lo strumento fornisce una GUI semplice e intuitiva per inserire la dimensione del font di base, la scala e la famiglia di font che si desidera utilizzare. I risultati verranno visualizzati per te in modo da poter giocare con la scala, per ottenere il giusto valore. Basta prendere il CSS una volta che hai finito.

Scala modulare

Scala modulare è uno strumento per generare il ridimensionamento dei caratteri ideale per il testo del corpo e dell'intestazione. Emette in Sass che dovrebbe essere usato insieme alla sua libreria Sass. In alternativa, è possibile utilizzare JavaScript .

Font-To-Width

Font-To-Width (FTW) è una libreria Javascript che adatta un carattere al suo contenitore della larghezza. Determina la dimensione del carattere insieme alla spaziatura delle parole richiesta per il carattere. Se vuoi fare un bel titolo, questa è la libreria che potresti voler provare.

FFFFallback

FFFFallback, uno strumento utile che ti permette di trovare il miglior stack di font che si degraderà con grazia. Lo strumento si presenta sotto forma di bookmarklet, che analizzerà la famiglia di caratteri sulla tua pagina e suggerirà un set di caratteri da utilizzare come fallback.

Coppia di caratteri

Google Font è una delle librerie di font web più utilizzate da milioni e ospita oltre 500 famiglie di font. Coppia di caratteri è una raccolta di Google Fonts accoppiati, in cui è possibile trovare facilmente una diversa combinazione tra famiglie di caratteri e caratteri tipografici. La coppia di caratteri rende la scelta dell'abbinamento dei caratteri un po 'meno travolgente.

TypeSettings

TypeSettings è una raccolta di set di regole CSS per definire il corretto ridimensionamento dei caratteri, il ritmo verticale e il rapporto reattivo della tipografia. TypeSettings è disponibile in Sass e Stylus che consente la flessibilità per soddisfare le esigenze del tuo progetto regolando le variabili.

targhetta

targhetta è probabilmente uno dei kit di avvio più completo per l'impostazione della tipografia. Typeplate contiene una manciata di stili tipografici di base che affrontano ridimensionamento, colori, piccolo capitale, dropcap, rientro, sillabazione, blockquote, blocco di codice e molto altro materiale.

Ora Leggi: Vetrina di Web Design con bella tipografia