Convertor de tipografie

Matematica din spatele tipografiei

Tipografia este arta și tehnica de a aranja caracterele pentru a face limbajul scris lizibil, ușor de citit și atrăgător din punct de vedere vizual. Cu toate acestea, în spatele frumuseții estetice a designului grafic se află un cadru matematic rigid. Pe măsură ce lumea a trecut de la tipografiile fizice la ecranele digitale ale calculatoarelor, unitățile utilizate pentru a măsura dimensiunea textului s-au ciocnit, rezultând un sistem hibrid complex utilizat de dezvoltatorii moderni.

Înțelegerea relației matematice exacte dintre unitățile de tipărire (cum ar fi punctele și picas) și unitățile de ecran (cum ar fi pixelii și Rems) este absolut esențială pentru dezvoltatorii web front-end, designerii UI/UX și editorii de presă.

Moștenirea imprimării: Puncte și picături

Timp de secole, standardul absolut pentru dimensionarea tipografică a fost punctul (pt). În era digitală modernă, punctul a fost standardizat matematic de programele de editare desktop (precum Adobe PostScript) pentru a fi exact 1/72 dintr-un inch. Atunci când deschideți Microsoft Word și selectați "font 12pt", instruiți imprimanta să facă textul să aibă exact 12/72 (sau 1/6) de inch înălțime pe hârtia fizică.

Designerii grafici se bazează, de asemenea, pe Pica, o altă unitate fizică utilizată pentru a proiecta lățimea coloanelor din ziare. Există exact 12 puncte într-o pica, ceea ce o face o fracție extrem de utilă pentru proiectarea layout-ului bazat pe grilă.

Ecrane digitale: Pixel (px)

Când s-a născut internetul, centimetrii fizici nu contau. Ecranul era compus din mii de puncte strălucitoare numitePixeli (px). Designerii web au codificat layout-urile pentru a avea o lățime de exact 800 de pixeli, iar textul avea o înălțime de exact 14 pixeli. Cu toate acestea, pe măsură ce rezoluțiile ecranelor au crescut vertiginos - de la monitoarele CRT greoaie la ecranele moderne 4K "Retina" - un pixel a devenit fizic din ce în ce mai mic. Pentru a rezolva această problemă, sistemele de operare au început să utilizeze o logică de mapare standard: presupunând că un ecran digital standard are 96 DPI (puncte pe inch), 1 punct se convertește matematic la 1,33 pixeli.

Web-ul responsiv: Ems și Rems

Pe măsură ce smartphone-urile și tabletele au inundat piața, codificarea textului în pixeli rigizi a rupt internetul. Textul arăta masiv pe un laptop, dar microscopic și ilizibil pe ecranul de înaltă rezoluție al unui telefon. În plus, utilizatorii cu deficiențe de vedere nu puteau scala textul bazat pe pixeli.

Soluția a fost tipografia relativă, în specialEmandRem. Un Em este un multiplicator bazat pe dimensiunea fontului din containerul părinte. Un Rem (Root Em) este un multiplicator bazat pe dimensiunea implicită a fontului din browserul web al utilizatorului (aproape universal 16px). Dacă setați un titlu la 2,0 Rem, acesta va fi redat la 32px pentru un utilizator standard, dar dacă un utilizator cu deficiențe de vedere își mărește valoarea implicită a browserului la 20px, titlul dvs. se mărește dinamic la 40px.

Convertorul tipografic Unitomatic este instrumentul final pentru a face legătura între designul grafic și codul front-end, permițându-vă să traduceți instantaneu machetele Photoshop ale clienților (în puncte și pixeli) în cod CSS complet receptiv (în Rems).