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.
Ci permette di impostare la tipografia di un testo in tempo reale attraverso una semplice interfaccia e genera automaticamente le regole CSS.
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.
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..).
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>
.
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.
Dato il font-size
di base e il line-height
, genera un foglio di stile che descrive il ritmo verticale.
Come il Baseline Rhytm Calculator, ma in più genera anche un'anteprima.
Serve per convertire le dimensioni del testo da pixel a em. Basta impostare un font-size
di base.
àˆ 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.
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!