Gestionarea fonturilor și a dimensiunilor fontului cu Divi 5

Fonturile și tipografia au stabilit tonul pentru site -ul dvs. Obținerea corectă poate ajuta marca dvs. și îmbunătăți lizibilitatea. Divi 5 face să lucreze cu fonturi rapid și ușor. Cu noile caracteristici ale Divi, cum ar fi variabilele de design și presetările grupului de opțiuni, configurarea fonturilor devine ușoară.

Această postare vă învață cum să gestionați fonturi și dimensiuni de fonturi în Divi 5, creând o tipografie receptivă care se scalează frumos pe dispozitive.

Divi 5 este gata pentru noi construcții de site -uri web, dar punem la punctul final pe sistemul de compatibilitate înapoi. Între timp, rețineți site -urile de actualizare construite pe D4. Vă vom anunța când se întâmplă această schimbare.

Considerații atunci când vă gândiți prin fonturi pentru un nou site web

Când începeți un nou site, alegerile de fonturi modelează prima impresie a utilizatorului. Luați în considerare aceste puncte pentru a vă asigura că tipografia dvs. vă susține conținutul:

• Lidebilitate : alegeți fonturi clare, în special pentru textul corpului.
• Coerență : Limitați -vă fonturile - două sau trei funcționează cel mai bine, cu cel puțin unul pentru titluri și unul pentru textul corpului.
• Răspuns : Asigurați -vă că fonturile se adaptează la diferite dimensiuni ale ecranului (ideal de la 320px la 1440px).
• Compatibilitate : optează pentru fonturi de siguranță sau populare pentru a evita problemele de afișare.

Cum se gestionează fonturi și dimensiuni de fonturi în Divi 5

Să folosim un aspect premad din biblioteca Divi. Vom alege aspectul paginii de destinație din pachetul „Business CV” și vom reînnoi tipografia folosind noile caracteristici ale Divi 5. Dacă aveți un site DIVI 5 existent, dar doriți să -și îmbunătățiți tipografia, puteți urma aceiași pași fără a utiliza acest aspect.

Pasul 1: Alegerea împerecherii de fonturi

Bun pereche de fonturi amestecă stilul și lizibilitatea. Fonturile Google sunt, de asemenea, un pariu sigur, deoarece sunt încorporate în DIVI și ușor de utilizat.

În exemplele de mai jos, vom rămâne cu utilizarea de poppins de către aspectul de aspect pentru titluri și textul corpului. Puteți încerca să asociați și Lora și Roboto.

Pasul 2: Setarea fonturilor pentru antetul și corpul primar

Acum că ați ales fonturi, le putem adăuga pe site -ul web folosind Divi. În editorul vizual, deschideți managerul variabil în stânga sus. Variabilele de design ale Divi vă permit să controlați la nivel global fonturile pe site -ul dvs. web.

Există două variabile implicite de fonturi pentru titlul principal și fonturile corpului. Accesați secțiunea fonturi și setați „ Poppins ” ca font de rubrică și „ Roboto ” ca font al corpului.

Setați -vă fonturile la orice se potrivește cu cerințele dvs. de design și de marcă

În acest moment, ar putea fi, de asemenea, o idee bună să vă asigurați că culorile mărcii dvs. sunt setate și ca variabile de design, mai ales dacă intenționați să utilizați unele dintre aceste culori în text.

Asigurați -vă că vă salvați variabilele atunci când ați fost introdusă

Pasul 3: Crearea dimensiunilor fontului

Acum pentru partea mai implicată. Cel mai bine este să vă gândiți cum să faceți ca tipografia dvs. să arate bine la fiecare dimensiune a dispozitivului. Cu Divi 5, aveți două opțiuni. Prima și preferată opțiune este utilizarea Clamp (), iar a doua este să setați fontul de mai multe ori la diferite puncte de întrerupere.

Modul în care vă construiți dimensiunea fontului pentru fiecare nivel de rubrică, textul corpului și alte situații de text depinde în totalitate de dvs.

Tipogrphy fluid cu clemă ()

Clamp () vă permite să setați o valoare minimă, o valoare preferată și o valoare maximă. Într -o altă postare, intrăm în profunzime despre clemă () și oferim o modalitate ușoară de a descoperi aceste valori. Dar iată un exemplu:

Acest aspect are o dimensiune H1 implicită și o dimensiune H1 unică (și mai mare) pentru numele persoanei în prima secțiune. Am purtat același principiu în graficul de dimensionare de mai sus și am adăugat o variație mai mică a fontului corpului.

Puteți testa dimensionarea fontului într -un simplu document HTML pentru a vedea lucrurile în mod izolat (acest lucru se poate face și în Divi). Iată cum arată dimensiunea fontului de mai sus cu împerecherea fonturilor.

După ce sunteți confortabil cu dimensiunile fontului, le puteți adăuga ca variabile de proiectare. Dați fiecăruia un nume discernibil și lipiți valoarea din dreapta.

Unități fixe cu puncte de întrerupere

Clamp () este cea mai versatilă opțiune pentru dimensionarea fonturilor, dar mulți utilizatori folosesc în continuare valori fixe precum pixeli sau REM. Puteți utiliza acestea alături de punctele de întrerupere personalizabile ale Divi pentru a vă extinde fontul în sus și în jos, după cum este necesar.

Deoarece numărul dvs. de valori pentru un efect similar se triplă atunci când îl utilizați în acest fel (în loc de 10 valori de clemă () de mai sus, acestea ar fi 30 de valori individuale). Nu este neapărat recomandat să completați managerul variabil cu aceste valori, dar puteți, dacă doriți,

Puteți să vă construiți structura de dimensionare pentru fiecare punct de întrerupere și să o duceți la pasul următor. În loc să le plasați ca variabile de proiectare, le puteți aplica direct la presetări de grupuri de opțiuni și elemente.

Pasul 5: Adăugarea dimensiunilor fontului de la manager variabil la presetări

Cu variabilele dvs. de număr setat (sau cel puțin formulat), este timpul să le aplicați la presetări. Unul dintre cele mai bune cazuri de utilizare pentru presetările de grupuri de opțiuni este tipografia. Puteți crea șapte (7) presetări ale grupului de opțiuni de titlu/titlu pe care le puteți utiliza pentru orice modul care utilizează câmpurile Titlu/Titlu (cum ar fi modulele de titlu, blurb, acordeon și persoană, de exemplu).

Același lucru este valabil și pentru grupul de opțiuni text. Pot seta două (2) presetări (una pentru normalul meu și una pentru textul meu mic de corp), iar orice modul care folosește grupul de opțiuni de text poate utiliza aceste stiluri. Pentru titluri și stiluri de text, acest lucru este mult mai eficient decât aplicarea acestor stiluri ca presetări de elemente la toate diferitele module pe care le -ați putea utiliza pe întregul dvs. site.

Alocarea valorilor fixe la punctele de întrerupere

Videoclipul de mai jos arată pașii de bază dacă ați optat pentru valorile fixe la mai multe puncte de întrerupere. Faceți clic pe un modul de text, accesați fila Design , treceți peste grupul de opțiuni text, faceți clic pe pictograma OG , creați o nouă presetare și aplicați stilurile dvs. la fiecare punct de întrerupere. Derulați în partea de jos a barei laterale din dreapta și salvați -vă presetarea ( foarte importantă ). Repetați acest lucru pentru cât mai multe variații de text pe care le -ați venit (cum ar fi opțiunile mici, obișnuite și mari).

Alocați presetarea OG pe care așteptați să o utilizați cel mai mult ca presetare implicită pentru acel grup de opțiuni. Dacă vedeți o stea lângă ea, aceasta este implicitul dvs. actual (aceasta se va aplica pe site -ul dvs., presupunând că nu se aplică alte stiluri de modul sau presetări de elemente).

Alocarea funcțiilor Clamp () (mai ușor)

Procesul este similar atunci când utilizați variabila de proiectare cu funcția Clamp (), dar mult mai ușoară. În videoclipul de mai jos, am stabilit două dimensiuni de rubrică la nivelul grupului de opțiuni. Singura diferență față de cele de mai sus este că nu lipim valorile, ci folosim variabilele pe care le -am configurat mai devreme. În timp ce configurați presetările OG, asigurați -vă că fonturile implicite sunt alese și setați culorile după cum doriți. Unii oameni le place să stabilească culori la nivelul modulului, dar depinde de tine.

Veți seta fiecare nivel de rubrică H1-H6 ca nou presetat de grupuri de opțiuni personalizate .

Aplicați aceste presetări la titlurile aspectului dvs. folosind presetările grupului de opțiuni pe care le -ați creat. Frumusețea presetărilor de grupuri de opțiuni este că lucrează prin module din cadrul acestui grup de opțiuni, cum ar fi modulele de text, blurb și antet.

Cele mai bune practici pentru fonturi în Divi 5

Pentru a vă maximiza tipografia, țineți cont de aceste sfaturi:

• Setați întotdeauna mai devreme variabilele de fonturi globale.
• Utilizați distanță și dimensiuni consistente (da, puteți seta distanță de litere și înălțimea liniei ca variabile de proiectare).
• Previzualizați în mod regulat vizualizările receptive pe dimensiunile ecranului.
• Evitați prea multe fonturi sau greutăți de fonturi.

Tipografia din Divi 5 este un suflu de aer curat

Acum dețineți un sistem complet de tipografie datorită celor mai noi caracteristici ale Divi.

Fonturile trăiesc ca variabile de design. La fel și cu dimensiunile fontului atunci când utilizați Clamp (). Sau dacă doriți să exercitați toate cele șapte puncte de întrerupere personalizabile, puteți lua și acest traseu.

Presetările de grupuri de opțiuni aplică aceste opțiuni fără efort pe întregul site. Reglarea dimensiunilor de fonturi pe parcursul unei construcții este foarte ușoară, deoarece sunt setate ca variabile de proiectare. Indiferent de asta, desenele tale vor rămâne ascuțite, iar timpul de construire se va micsora.

Divi 5 a lansat multe caracteristici noi care îți îmbunătățesc sistemul de proiectare. Începeți să construiți astăzi noi site -uri în Divi 5 pentru a profita de toate cele mai recente caracteristici. Vă recomandăm să așteptați un pic mai mult pentru a migra site -urile web existente către Divi 5.