15 strumenti di tipografia online che tutti i progettisti dovrebbero conoscere

La tipografia è il fondamento di qualsiasi progetto, perché la lettura è una delle cose più basilari che facciamo sul web. La tipografia scelta ha un impatto su molteplici aspetti di un sito web, tra cui leggibilità, umore e l'esperienza utente complessiva. È essenziale per designer e sviluppatori conoscere i principi di base della tipografia a creare disegni piacevoli leggibili.

Abbiamo già parlato di strumenti di abbinamento dei caratteri e oggi condivideremo con voi strumenti per i tipi di testo che consentono di ottenere una migliore esperienza di lettura nei siti Web creati e / o progettati.

Ecco i plugin, gli strumenti online e gli script che ti aiuteranno crea titoli fantastici e testo pulito e leggibile.

targhetta

Non farà scelte progettuali per te, ma definirà il giusto markup con lo styling per i modelli tipografici comuni. Può anche darti consigli su come adattare correttamente la copia del testo.

Check-out: Demo | Documentazione

Gutenberg

Gutenberg è uno starter kit di tipografia flessibile e facile da usare per sviluppatori e designer. Ti aiuterà a impostare le dimensioni del tipo di base, l'altezza della linea e la larghezza massima. Gutenberg è un progetto open-source, quindi sentiti libero di contribuire, adattarlo e modificarlo.

Check-out: Demo | Documentazione

Lettering.js

Lettering.js è un plugin jQuery che ti dà il controllo sul tipo di kern. Ti permette di ottenere la progettazione editoriale con facilità e gestire il codice. Il sito Web offre straordinari esempi di tipografia realizzati con questo plugin per l'ispirazione.

Check-out: Demo | Documentazione

Typebase.css

Typebase.css è un foglio di stile tipografico personalizzabile. Contiene saas e meno versioni e può essere facilmente modificato in progetti web moderni.

Check-out: Demo | Documentazione

FitText

FitText è un plugin che renderà flessibili le dimensioni del tuo sito web. Ti aiuterà a ottenere titoli scalabili per varie risoluzioni dello schermo; in altre parole, rendi la tua tipografia reattiva. È fatto per mostrare solo testo enorme.

Check-out: Demo | Documentazione

Kerning.js

Kerning.js ti aiuta a trasformare, ridimensionare e modificare automaticamente la tua tipografia con i CSS. È facile iniziare con Kerning.js.

Check-out: Demo | Documentazione

Typesettings.css

Typesettings.css è il tuo parco giochi per la creazione di progetti web o blog minimalisti. Tutti gli stili di tipografia utilizzati qui sono ispirati ai principi di progettazione grafica.

Check-out: Demo | Documentazione

Zaino

Con Rucksack puoi produrre una straordinaria tipografia fluida grazie a una nuova proprietà reattiva sulla dimensione del carattere. La creazione di una tipografia reattiva è resa estremamente facile.

Check-out: Demo | Documentazione

FlowType.JS

La tipografia più leggibile contiene tra 45 e 75 caratteri per riga, ma per trovare che il bilanciamento è un compito impegnativo per gli sviluppatori. FlowType.JS modifica la dimensione del carattere e successivamente l'altezza della linea in base alla larghezza di un elemento specifico.

Check-out: Demo | Documentazione

Blast.js

Blast.js ti aiuterà a separare i testi per rendere più facile la manipolazione della tipografia. Contiene 4 delimitatori integrati: carattere, parola, frase ed elemento. Può anche abbinare espressioni e frasi personalizzate.

Check-out: Demo | Documentazione

slabText

slabText è un semplice script che divide i titoli in righe per riempire perfettamente lo spazio orizzontale disponibile. Lo script calcola un numero ideale di caratteri da impostare in ogni riga dividendo la larghezza disponibile per dimensione del carattere del pixel.

Check-out: Demo | Documentazione

Digitare Scala

Con Type Scale puoi vedere in anteprima e scegliere la scala di testo giusta per il tuo progetto. Non ci sono regole - gioca solo con le dimensioni del carattere, la scala e diversi tipi di carattere web.

Check-out: Demo | Documentazione

Tipografico

Tipografico ti aiuta a rendere la tipografia reattiva. Tutto ciò che devi fare è selezionare alcuni tipi di carattere, impostare alcune impostazioni e ottenere una buona tipografia reattiva.

Check-out: Demo | Documentazione

Typi

Typi è un mix saas che puoi utilizzare per rendere la tipografia reattiva con facilità. Crea dimensioni e altezze dei caratteri per HTML e altri elementi. Inoltre, Typi ha una funzione ritmica verticale per calcolare le altezze delle linee.

Check-out: Documentazione

Lining.js

Con il plugin Lining.js, avrai il controllo completo sulla tipografia web. È supportato sui browser più diffusi come Safari, Google Chrome, Opera e Mozilla Firefox.

Check-out: Demo | Documentazione

Bonus: 2 più strumenti!

Stato del tipo Web

Stato del tipo Web è un sito Web che offre dati aggiornati sul supporto per tipo e funzionalità sul Web. Puoi utilizzare la ricerca o le categorie, come crenatura, spaziatura dei caratteri, caricamento dei font CSS e altro per trovare esattamente ciò di cui hai bisogno.

Typograph

Typograph è un fantastico plug-in per web e sketch che ti permette di inserire spazi senza interruzione dopo le parole di una sola lettera, collega il numero e l'unità. Rimuove anche doppi spazi, inserimenti, punti e altri errori di battitura, così puoi ottenere una bella tipografia pulita e facile da leggere.

Check-out: Documentazione