Kako stvoriti responzivnu tipografiju pomoću CSS-a

Razvijanje web stranice s toliko prijelomnih točaka može biti iscrpljujuće. Postoje mnoge nove tehnike koje možete naučiti u CSS-u, bilo da ste iskusni programer ili programer srednje razine.

Ali kako započeti s responzivnom tipografijom? Evo kako poduzeti korake za prilagodbu web stranica bilo kojoj veličini zaslona.

Važnost responzivne tipografije

Tipografija igra vitalnu ulogu u web razvoju i dizajnu osiguravajući čitljivost, upotrebljivost i cjelokupnu estetiku web stranice. Svatko želi responzivnu web stranicu. Ne bi li bilo sjajno da se tekst ili fontovi automatski prilagođavaju različitim veličinama zaslona? Ostale prednosti responzivne tipografije u web razvoju uključuju sljedeće;

• Poboljšava cjelokupno korisničko iskustvo na različitim uređajima ili veličinama zaslona osiguravajući čitljivost i čitljivost.
• Povećava pristupačnost prilagođavanjem korisnicima s oštećenjem vida ili drugim invaliditetom. Prilagođava razne korisničke postavke, kao što su podesive veličine fonta.
  instagram viewer
• Dosljedna tipografija na svim uređajima i rezolucijama pomaže u očuvanju identiteta robne marke i vizualnog jedinstva.

Evo predloška koda koji možete kopirati u uređivač koda prije nego što počnete, tako da možete slijediti tehnike o kojima će se raspravljati.

Datoteka HTML koda

index.html
html>
<htmljezik="en">
<glavu>
<metaskup znakova="UTF-8">
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1.0">
<vezarel="list stilova"href="style.css">
<titula> Responzivna tipografija titula>
glavu>
<tijelo>
<divrazreda="kontejner">
<h1> Lorem ipsum h1>
<str> 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! 
str>
div>
tijelo>
html>

Datoteka CSS koda

/*style.css*/
tijelo{
prikaz: savijati;
opravdati-sadržaj: centar;
align-items: centar;
visina: 100vh;
}
.kontejner{
širina: 400px;
boja pozadine: antiknobijela;
podstava: 15px;
kutija-sjena:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
boja: hotpink;
}

Sada istražimo neke učinkovite metode i tehnike za implementaciju responzivne tipografije pomoću CSS-a

1. Stezanje

Ovo je moderna tehnika CSS tipografije koja omogućuje i osigurava da veličina fonta elementa ostane unutar određenog raspona. Clamp funkcija “Clamp()” uzima tri parametra, minimalnu vrijednost, idealnu vrijednost i maksimalnu vrijednost. Funkcija stezanja nije ograničena na tipografiju. Može se koristiti za slike, kartice, videozapise i druge medije. Ovako to funkcionira.

Stezaljka (minimalna vrijednost, idealna vrijednost, maksimalna vrijednost):

h1{
veličina fonta: Stezaljka(2rem, 5vw, 3rem);
}
str{
veličina fonta: Stezaljka(1rem, 3vw, 2rem);
}

U ovom primjeru, veličina fonta za naslov i odlomak postavljena je pomoću funkcije "clamp()". Za naslov "h1" minimalna vrijednost postavljena je na "2rem" čime se osigurava da veličina fonta neće pasti ispod dvostruke veličine korijenskog fonta. Idealna ili željena vrijednost postavljena je na "5vw", što je 5% širine okvira za prikaz, što ga čini osjetljivim na različite veličine zaslona. Maksimalna vrijednost postavljena je na "3 rem" čime se osigurava da veličina fonta neće biti veća od trostruke veličine korijenskog fonta. Obrnuto za stil odlomka.

Najbolja je praksa koristiti širinu okvira za prikaz "vw" ili postotak "%" za idealnu vrijednost, jer omogućuje svojstvu proporcionalno skaliranje na temelju dostupnog prostora, čineći dizajn osjetljivijim. Budite sigurni da znate koju CSS jedinicu trebate koristiti za tvoj scenarij.

Ovo je najčešća tehnika tipografije koju koriste programeri. To uključuje stvaranje medijskih upita za svaku prijelomnu točku. Omogućuje vam primjenu specifičnih stilova na temelju različitih veličina zaslona. Evo ilustracije:

/* Zadana veličina fonta */
h1{
veličina fonta: 38px;
}
str{
veličina fonta: 20px;
}
/* Veličina fonta za male ekrane */
@mediji (maksimalna širina:800 px){
h1{
veličina fonta: 32px;
}
str{
veličina fonta: 18px;
}
}
/* Veličina fonta za manje zaslone */
@mediji (maksimalna širina:400 px){
h1{
veličina fonta: 28px;
}
str{
veličina fonta: 15px;
}
}

U ovom primjeru, naslov i odlomak postavljeni su na zadanu vrijednost od “38px” do “20px”. Zatim se postavljaju uvjeti za manje veličine zaslona kako bi izgled bio osjetljiv na mobilne telefone. Možete stvoriti onoliko medijskih upita koliko želite na temelju dizajna i odziva koji želite, među mnoštvom drugih medijski upit CSS trikovi koje biste trebali znati.

3. CSS prilagođena svojstva

Također poznat kao CSS prilagođene varijable, pohranjuje vrijednosti koje se mogu ponovno koristiti u vašem stilu. Može se koristiti za tipografiju kako bi se omogućilo jednostavno upravljanje i prilagodba. Evo primjera.

:korijen {
--veličina-font-naslova: 3rem;
--veličina-font-odlomka: 1.5rem;
}
h1{
veličina fonta: var(--veličina-font-naslova);
}
str{
veličina fonta: var(--veličina-font-odlomka);
}
@mediji (maksimalna širina:800 px){
:korijen {
--veličina-font-naslova: 2rem;
--veličina-font-odlomka: 0.9rem;
}
}
@mediji (maksimalna širina:400 px){
:korijen {
--veličina-font-naslova: 1.5rem;
--veličina-font-odlomka: 0.8rem;
}
}

U ovom primjeru, svojstvo CSS postavljeno je na korijenskoj razini, što nam omogućuje globalni pristup. --heading-font-size i --paragraph-font-size opisni su nazivi za naslov i odlomak, sa zadanim vrijednostima danim za oba. Ova se tehnika može ponovno upotrijebiti za razne medijske upite kako bi se osigurala dosljednost u cijeloj ploči.

Najbolji primjeri iz prakse responzivne tipografije

Uobičajena je praksa među programerima da izravno koriste širinu okvira za prikaz (vw) za izvođenje tipografije. Iako je jednostavan i čini se da radi, postaje malen na malim zaslonima i iznimno velik na velikim zaslonima. To se također događa kada povećavate i smanjujete svoju stranicu. Ako možete, izbjegavajte korištenje prozora izravno na ovaj način;

h1{
veličina fonta: 2vh;
 }

Uvijek testirajte i provjerite je li vaša tipografija čitljiva na različitim veličinama zaslona i uvijek testirajte kompatibilnost preglednika. Razmotrite čitljivost i osigurajte da veličina slova nije premala ili prevelika

Responzivna tipografija ključ za čitljiv web dizajn

Responzivna tipografija igra ključnu ulogu u web dizajnu i razvoju. Implementacijom metoda i tehnika kao što su stezanje, medijski upiti i CSS prilagođena svojstva, možete osigurati da se vaša tipografija mjeri na različitim veličinama zaslona i uređajima. Postoji toliko mnogo tehnika koje treba istražiti kada pokušavate stvoriti odziv koristeći CSS - upotrijebite te tehnike da počnete razvijati stručnost u ovom području.