CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units

S-a dezbătut mult despre pixeli vs em vs procente vs rem și despre ce proprietate de font trebuie folosită și când. În ciuda celor peste 100 de articole online, acest subiect poate fi foarte confuz, având în vedere modul în care utilizarea acestor proprietăți de font diferă în funcție de nevoile proiectelor noastre. De exemplu, unele persoane sugerează să nu se utilizeze valori fixe de pixeli la nivelul de bază (elemente html și body), deoarece utilizatorul nu va avea posibilitatea de a reseta dimensiunea fontului conform specificațiilor sale. Dar, pentru cei ca mine, care sunt dependenți de bootstrap, acest lucru nu este recomandabil. Ajungem să avem o valoare de bază fixă în pixeli și trebuie să creăm proprietățile de font ale întregului nostru proiect în raport cu valorile pixelilor de bază.

Acest articol explică diferența dintre aceste proprietăți de font și cum să le folosim cel mai bine. Bineînțeles, nu există un mod corect de a face acest lucru și o mare parte din ce dimensiuni de fonturi să folosim și cum vom folosi va fi în mare parte deterministă pe baza înțelegerii noastre a acestor unități de dimensiuni de font și a proiectului în cauză.

Pixeli: Înainte de apariția designului responsive, pixelul a fost utilizat pe scară largă ca dimensiunea fontului pentru orice, de la tipografie la lățime, umplutură și înălțime. Cu toate acestea, pixelii sunt unități de mărime fixă și nu se modifică în funcție de dimensiunea viewportului sau sunt scalabili. Dacă doriți să construiți un site web responsive folosind pixeli, poate deveni foarte dificil să țineți evidența tuturor valorilor bazate pe pixeli în toată foaia de stil CSS, inclusiv a valorilor din cadrul media queries. Așadar, ce proprietate de font putem folosi care ne va permite să facem modificări minime la foaia de stil CSS, dar să fie totuși scalabilă? Aici intră în scenă unitățile em, rem, procente și viewport.

Em:Em este o unitate flexibilă, scalabilă, care este convertită de browser în valori de pixeli. Dacă dimensiunea implicită a fontului în Chrome este de 16 px, 1 em = 16 pixeli. O mare concepție greșită despre em este că este relativ la dimensiunea fontului elementului părinte. Conform specificației W3, em este relativ la dimensiunea fontului elementului pe care este utilizat. Acest articol de aici a făcut o treabă minunată explicând conceptul de em într-o manieră clară și detaliată. Dacă doriți cu adevărat să învățați cum funcționează em, nu săriți peste articolul menționat mai sus. Em-urile sunt utilizate în mod obișnuit pentru tipografie, cum ar fi titlurile, textele , paragrafele și elementele asociate cu tipografia, cum ar fi marginile, padding etc. Dacă ați setat dimensiunea fontului elementelor html de bază și a elementelor de corp în pixeli și proprietățile elementelor tipografice sunt definite folosind ems, pentru un design responsiv tot ce trebuie să faceți este să schimbați dimensiunea implicită a fontului la nivelul de bază, cum ar fi

@media (max-width: 400px) {
html, body { font-size: 15px; }
}

și toate valorile em se vor recompune automat la nivelul de bază.

Cu toate acestea, ems au un avertisment major, Moștenirea!!! De exemplu, un <div> cu o dimensiune a fontului de 16px care conține un <p> cu o dimensiune a fontului de 2em se traduce prin 32 px pentru elementul <p>. Acum adăugați un <div> în interiorul <p> cu o dimensiune a fontului de 0,5em de asemenea, rezultatul div-ului va fi 16px, jumătate din 32 px, nu 8px. Aici intră în scenă rems.

Rem: Rem este relativ la dimensiunea fontului elementului rădăcină (elementul html). Dacă dimensiunea fontului elementului html este de 16 px, atunci 1rem = 16 px. Rem va fi ÎNTOTDEAUNA relativ la elementul rădăcină, indiferent de cât de imbricate sunt elementele. Cu toate acestea, utilizarea numai a rems și fără ems poate avea propria sa parte de probleme, deoarece tipografia poate deveni fie prea mare, fie prea mică, ceea ce poate duce la probleme de scalare. Acest articol explică o modalitate excelentă de a rezolva această problemă.

Percente: Valoarea procentuală este întotdeauna relativă la o altă valoare, fie că este vorba de valoarea părintelui elementului sau de o altă proprietate a elementului însuși. Procentajele sunt utilizate pe scară largă în designul responsiv. Un exemplu excelent ar fi cadrul Bootstrap de la Twitter. Layout-ul Bootstrap cu 12 coloane are lățimile sale setate în procente, astfel încât acestea sunt întotdeauna fluide și dimensionate în raport cu elementul părinte
Porcentajele sunt utilizate în mod obișnuit pentru lățimea și înălțimea containerelor, div-urilor și pentru dimensionarea imaginilor responsive.

Unități de vizualizare: Proprietățile de lățime și înălțime ale viewportului sunt relative la lățimea/înălțimea dimensiunii curente a viewportului.

1vw = 1% din lățimea viewportului
1vh = 1% din înălțimea viewportului

Viewport înseamnă aici dimensiunea ferestrei browserului. Dacă doriți să vă dimensionați elementul pe baza lățimii viewportului și nu a elementului părinte/elementului rădăcină, atunci unitățile viewport este unitatea de dimensionare a fontului pe care trebuie să o utilizați. unitățile vw/vh funcționează foarte bine cu tipografia și sunt utilizate în mod obișnuit pentru același lucru.
Iată un articol grozav care explică cum să folosiți această proprietate.

Verdict final: Deoarece folosesc bootstrap frecvent, dimensiunea mea de bază implicită este în pixeli. Folosesc procente pentru a seta lățimea și înălțimea imaginilor, containerelor și div-urilor, ems și rems pentru tipografie și elemente legate de tipografie, cum ar fi margin, padding etc. În prezent mă joc cu unitățile viewport pentru tipografie responsive și mi se pare minunat. Experimentați mult cu aceste proprietăți ale fonturilor și veți cădea în curând într-un stil făcut pe măsură pentru voi.

.