Cum se creează o tipografie receptivă cu CSS

Dezvoltarea unui site web cu atât de multe puncte de întrerupere poate fi obositoare. Există multe tehnici noi de învățat în CSS, indiferent dacă sunteți un dezvoltator experimentat sau un dezvoltator de nivel mediu.

Dar cum începi cu tipografia receptivă? Iată cum puteți face pași pentru a adapta paginile web la orice dimensiune de ecran.

Importanța tipografiei receptive

Tipografia joacă un rol vital în dezvoltarea și designul web, asigurând lizibilitatea, gradul de utilizare și estetica generală a unui site web. Toată lumea își dorește un site web receptiv. Nu ar fi grozav dacă textul sau fonturile s-ar ajusta automat la diferite dimensiuni ale ecranului? Alte avantaje ale tipografiei receptive în dezvoltarea web includ următoarele;

• Îmbunătățește experiența generală a utilizatorului pe diferite dispozitive sau dimensiuni de ecran, asigurând lizibilitatea și lizibilitatea.
instagram viewer
• Mărește accesibilitatea prin adaptarea utilizatorilor cu deficiențe de vedere sau alte dizabilități. Se potrivește diferitelor preferințe ale utilizatorului, cum ar fi dimensiunile reglabile ale fonturilor.
• Tipografia consecventă între dispozitive și rezoluții ajută la păstrarea identității mărcii și a unității vizuale.

Iată un șablon de cod pe care îl puteți copia în editorul de cod înainte de a începe, astfel încât să puteți urma tehnicile care vor fi discutate.

Fișierul cod HTML

index.html
html>
<htmllang="ro">
<cap>
<metaset de caractere=„UTF-8”>
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1.0”>
<legăturărel="foaia de stil"href=„style.css”>
<titlu> Tipografie receptivă titlu>
cap>
<corp>
<divclasă="container">
<h1> Lorem ipsum h1>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
p>
div>
corp>
html>

Fișierul codului CSS

/*style.css*/
corp{
afişa: contracta;
justifica-conținut: centru;
alinierea elementelor: centru;
înălţime: 100vh;
}
.container{
lăţime: 400px;
culoare de fundal: alb antic;
căptușeală: 15px;
cutie-umbră:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
culoare: roz fierbinte;
}

Acum, să explorăm câteva metode și tehnici eficiente pentru implementarea tipografiei receptive folosind CSS

1. Prindere

Aceasta este o tehnică de tipografie CSS modernă care permite și asigură că dimensiunea fontului unui element rămâne într-un anumit interval. Funcția de fixare „Clamp()” preia trei parametri, valoarea minimă, valoarea ideală și valoarea maximă. Funcția de clemă nu se limitează la tipografie. Poate fi folosit pentru imagini, carduri, videoclipuri și alte medii. Asa functioneaza.

Clemă (valoare minimă, valoare ideală, valoare maximă):

h1{
marimea fontului: clemă(2rem, 5vw, 3rem);
}
p{
marimea fontului: clemă(1rem, 3vw, 2rem);
}

În acest exemplu, dimensiunile fontului pentru titlu și paragraf sunt setate folosind funcția „clamp()”. Pentru titlul „h1”, valoarea minimă este setată la „2rem”, asigurându-se că dimensiunea fontului nu va scădea sub de două ori dimensiunea fontului rădăcină. Valoarea ideală sau preferată este setată la „5vw”, care reprezintă 5% din lățimea ferestrei de vizualizare, făcându-l să răspundă la diferite dimensiuni de ecran. Valoarea maximă este setată la „3 rem”, asigurându-se că dimensiunea fontului nu va fi mai mare de trei ori dimensiunea fontului rădăcină. Viceversa pentru stilul de paragraf.

Este cea mai bună practică să utilizați lățimea ferestrei „vw” sau procentul „%” pentru valoarea ideală, deoarece permite proprietății să se scaleze proporțional în funcție de spațiul disponibil, făcând designul mai receptiv. Asigurați-vă că știți ce unitate CSS ar trebui să utilizați pentru scenariul dvs.

Aceasta este cea mai comună tehnică de tipografie folosită de dezvoltatori. Aceasta implică crearea de interogări media pentru fiecare punct de întrerupere. Vă permite să aplicați stiluri specifice bazate pe diferite dimensiuni de ecran. Iată o ilustrare:

/* Dimensiunea implicită a fontului */
h1{
marimea fontului: 38px;
}
p{
marimea fontului: 20px;
}
/* Dimensiunea fontului pentru ecrane mici */
@mass-media (lățimea maximă:800px){
h1{
marimea fontului: 32px;
}
p{
marimea fontului: 18px;
}
}
/* Dimensiunea fontului pentru ecrane mai mici */
@mass-media (lățimea maximă:400px){
h1{
marimea fontului: 28px;
}
p{
marimea fontului: 15px;
}
}

În acest exemplu, titlul și paragraful sunt setate la o valoare implicită de „38px”, respectiv „20px”. Apoi, sunt stabilite condiții pentru dimensiuni mai mici ale ecranului pentru ca aspectul să răspundă pe telefoanele mobile. Puteți crea câte interogări media doriți, pe baza designului și a capacității de răspuns dorite, printre multe alte Trucuri CSS de interogare media pe care ar trebui să le cunoașteți.

3. Proprietăți personalizate CSS

Cunoscută și sub numele de variabile personalizate CSS, stochează valori care pot fi reutilizate pe tot parcursul stilului. Poate fi utilizat pentru tipografie pentru a permite gestionarea și personalizarea ușoară. Iată un exemplu.

:rădăcină {
--titlu-dimensiunea fontului: 3rem;
--paragraf-font-size: 1.5rem;
}
h1{
marimea fontului: var(--titlu-dimensiunea fontului);
}
p{
marimea fontului: var(--paragraf-font-size);
}
@mass-media (lățimea maximă:800px){
:rădăcină {
--titlu-dimensiunea fontului: 2rem;
--paragraf-font-size: 0.9rem;
}
}
@mass-media (lățimea maximă:400px){
:rădăcină {
--titlu-dimensiunea fontului: 1.5rem;
--paragraf-font-size: 0.8rem;
}
}

În acest exemplu, proprietatea CSS este setată la nivel rădăcină, ceea ce ne permite să o accesăm global. --heading-font-size și --paragraph-font-size sunt nume descriptive pentru titlu și, respectiv, paragraf, cu valorile implicite date pentru ambele. Această tehnică poate fi reutilizată pentru diverse interogări media pentru a asigura coerența la nivel general.

Cele mai bune practici de tipografie receptivă

Este o practică obișnuită printre dezvoltatori să folosească lățimea ferestrei de vizualizare (vw) direct pentru a efectua tipografie. Deși este simplu și pare să funcționeze, devine mic pe ecran de dimensiuni mici și extrem de mare pe ecran de dimensiuni mari. Acest lucru se întâmplă și când măriți și micșorați pagina dvs. Dacă puteți, evitați să utilizați vizorul direct astfel;

h1{
marimea fontului: 2vh;
 }

Testați întotdeauna și asigurați-vă că tipografia dvs. poate fi citită pe diferite dimensiuni de ecran și testați întotdeauna compatibilitatea browserului. Luați în considerare lizibilitatea și asigurați-vă că dimensiunile fonturilor nu sunt prea mici sau prea mari

Tipografia receptivă, cheia unui design web lizibil

Tipografia receptivă joacă un rol esențial în design și dezvoltare web. Prin implementarea metodelor și tehnicilor, cum ar fi blocarea, interogările media și proprietățile personalizate CSS, vă puteți asigura că tipografia dvs. se scarifică pe diferite dimensiuni de ecran și dispozitive. Există atât de multe tehnici de explorat atunci când încercați să creați receptivitate folosind CSS - utilizați aceste tehnici pentru a începe să dezvoltați expertiza în acest domeniu.