Fonturi variabile de pe Web, Explained

Fonturile variabile sunt, pe scurt, fișierele de fonturi care au setări pe care le puteți schimba subtil sau puteți modifica dramatic aspectul fontului. Ei au de gând să facă o mare diferență de a scrie pe web - să aruncăm o privire mai atentă!

Vizionați videoclipul Explainer

Fonturi variabile pentru web designeri

Prin setările de font variabile (numite axă) poți să iei un singur fișier de font și să creezi tipul de variante pe care le-ai putea folosi anterior doar prin utilizarea mai multor fișiere de fonturi.

De exemplu, cu o familie de fonturi obișnuite, dacă doriți o versiune ușoară, normală și îndrăzneață, ar trebui să încărcați în trei fișiere de fonturi diferite.

Cu toate acestea, cu un font variabil care ca a axa de greutate puteți ajusta greutatea prin CSS pentru a obține aspectul luminos, normal și îndrăzneț dintr-un singur fișier:

.ușoară font-variation-settings: "wght" 66; . regulat font-variation-settings: "wght" 84;  .bold font-variație-setări: "wght" 154;  

Cu această abordare obțineți același aspect tipografic, dar cu o durată de încărcare mult îmbunătățită. În cazul în care anterior ați fi fost nevoit să minimalizați numărul de variante pe care le încărcați într-o pagină web, cu fonturi variabile, care nu mai reprezintă o problemă, aveți numeroase variante la sfaturile degetului dvs.:

Protipo variabilă pe axa-praxis

Variabilitatea stilului

În ceea ce privește variabilitatea stilului, nu se oprește doar acolo. Nu vă limitați doar la tipurile de variații la care vă veți folosi, cum ar fi greutatea normală sau italicul. 

În primul rând, orice axă poate avea valoarea stabilită oriunde pe un interval de alunecare, nu doar la valorile stabilite. Deci, dacă ați căuta o greutate undeva între normală și îndrăzneală, este perfect posibil. Sau dacă ați vrut cursivele dvs. să se aplece puțin mai puțin, sau doriți ca dimensiunile caracterului să fie puțin mai mult decât standard, puterea este în mâinile voastre. Reglați bine setările exact la ceea ce aveți nevoie.

În al doilea rând, fonturile pot folosi orice axe pe care designerul le pasă de gândire! Aruncați o privire la setările disponibile pentru Bitcount:

Setările contului de calcul pe Axis-Praxis

În funcție de font, veți găsi axe care vă oferă controlul asupra umbrelor de picătură sau a decalajelor de stencil sau a terminalelor de caractere, opțiunile sunt nelimitate.

Vantul schimbarii

Fonturile variabile arată că au un impact mare asupra modului în care lucrăm ca designeri web. Acestea ne vor permite să obținem o diversitate și un control mult mai mare, reducând simultan vitezele de încărcare. Ele ne vor permite, de asemenea, să ne încadram în creativitatea noastră tipografică în moduri care nu au fost punct de vedere tehnic înainte.

Pentru a vă începe cu fonturile variabile am pus împreună un curs care vă ghidează prin toate aspectele cele mai importante ale modului în care funcționează, vă pregătește cu instrumentele de care aveți nevoie, vă plimbă prin codarea CSS care controlează fonturile variabile și vă arată cum să creați rezervări pentru browserele care nu au încă suport.

  • Sus și care rulează cu fonturi variabile

    Fonturile variabile sunt următorul lucru important în tipografia web. Acestea permit mai multă creativitate și libertate de design decât designerii de web au avut vreodată cu tipul înainte de ...
    Kezz Bracey
    Tipografie web