10 tool per gestire la tipografia

I tool online permettono spesso di risparmiare del tempo prezioso, sopratutto se ci troviamo di fronti a compiti come calcolare il ritmo verticale, o convertire adeguatamente i pixel in em.

Bene, vediamo 10 strumenti da tenere a portata di mano per velocizzare la messa appunto della tipografia delle nostre pagine.

CSStypeset

Ci permette di impostare la tipografia di un testo in tempo reale attraverso una semplice interfaccia e genera automaticamente le regole CSS.

FontTester

Permette di definire la tipografia di 3 blocchi di testo per poterli comparare tra di loro, e genera il relativo codice CSS. In più visualizza la mappa dei caratteri di ogni font.

Typetester

Anche questo tool permette di comparare la tipografia di diversi blocchi di testo. A differenza di FontTester permette di impostare un font-size di base, e mostra in automatico la resa del testo per ogni stile del font possibile (regular, italic, bold, smallcaps..).

CSS Type

Definite alcune regole di stile genera una preview del testo per ogni stile del font (regular, bold, italic...), e genera il codice CSS. In più mostra anche la resa del testo sugli elementi <button>.

Typechart

Permette di comparare delle soluzioni tipografiche a seconda della loro resa su Windows o su MacOS (mostra uno screenshot di come appaiono su entrambi i sitemi operativi), e genera il codice CSS. Queste "snippet" sono organizzate in base al sistema operativo, alla typeface, allo stile del font, e alla dimensione.

Baseline Rhytm Calculator

Dato il font-size di base e il line-height, genera un foglio di stile che descrive il ritmo verticale.

CSS with vertical Rhytm

Come il Baseline Rhytm Calculator, ma in più genera anche un'anteprima.

Em Calculator

Serve per convertire le dimensioni del testo da pixel a em. Basta impostare un font-size di base.

Syncotype your Baseline

àˆ una bookmarklet che permette di sovrapporre una griglia ad una pagina su cui stiamo lavorando per testare la corretta implementazione del ritmo verticale. Estremamente utile.

Lipsum

Quando occorre generare del dummy text per le nostre prove questo è il tool per antonomasia: Lorem Ipsum... In automatico.

Dite la vostra: se conoscete altri strumenti utili da condividere fatevi avanti!