Ako vytvoriť responzívnu typografiu pomocou CSS

Vývoj webovej stránky s toľkými prestávkami môže byť vyčerpávajúci. V CSS sa môžete naučiť veľa nových techník, či už ste skúsený vývojár alebo vývojár strednej úrovne.

Ako však začať s responzívnou typografiou? Tu je návod, ako podniknúť kroky na prispôsobenie webových stránok akejkoľvek veľkosti obrazovky.

Význam responzívnej typografie

Typografia zohráva dôležitú úlohu pri vývoji a dizajne webu tým, že zabezpečuje čitateľnosť, použiteľnosť a celkovú estetiku webovej stránky. Každý chce responzívny web. Nebolo by skvelé, keby sa text alebo písma automaticky prispôsobili rôznym veľkostiam obrazovky? Medzi ďalšie výhody responzívnej typografie pri vývoji webu patria nasledujúce;

• Zlepšuje celkovú používateľskú skúsenosť na rôznych zariadeniach alebo veľkostiach obrazovky tým, že zabezpečuje čitateľnosť a čitateľnosť.
• Zvyšuje dostupnosť tým, že vychádza v ústrety používateľom so zrakovým postihnutím alebo iným postihnutím. Prispôsobuje sa rôznym užívateľským preferenciám, ako je napríklad nastaviteľná veľkosť písma.
  instagram viewer
• Konzistentná typografia naprieč zariadeniami a rozlíšeniami pomáha zachovať identitu značky a vizuálnu jednotu.

Tu je šablóna kódu, ktorú môžete skopírovať do svojho editora kódu skôr, ako začnete, aby ste mohli postupovať podľa techník, o ktorých sa bude diskutovať.

Súbor HTML kódu

index.html
html>
<htmllang="sk">
<hlavu>
<metaznakovú sadu="UTF-8">
<metanázov="výrez"obsahu="width=device-width, initial-scale=1.0">
<odkazrel="štýlov"href="style.css">
<titul> Responzívna typografia titul>
hlavu>
<telo>
<divtrieda="kontajner">
<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>
telo>
html>

Súbor CSS kódu

/*style.css*/
telo{
displej: flex;
ospravedlniť-obsah: stred;
align-items: stred;
výška: 100vh;
}
.kontajner{
šírka: 400px;
farba pozadia: starožitný biely;
vypchávka: 15px;
box-shadow:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
farba: hotpink;
}

Teraz sa pozrime na niektoré efektívne metódy a techniky implementácie responzívnej typografie pomocou CSS

1. Upínanie

Ide o modernú techniku ​​typografie CSS, ktorá umožňuje a zabezpečuje, aby veľkosť písma prvku zostala v určitom rozsahu. Funkcia svorky „Clamp()“ zahŕňa tri parametre, minimálnu hodnotu, ideálnu hodnotu a maximálnu hodnotu. Funkcia svorky nie je obmedzená na typografiu. Dá sa použiť na obrázky, karty, videá a iné médiá. Takto to funguje.

Svorka (minimálna hodnota, ideálna hodnota, maximálna hodnota):

h1{
veľkosť písma: svorka(2rem, 5vw, 3rem);
}
p{
veľkosť písma: svorka(1rem, 3vw, 2rem);
}

V tomto príklade sa veľkosť písma pre nadpis a odsek nastavuje pomocou funkcie „clamp()“. Pre nadpis „h1“ je minimálna hodnota nastavená na „2rem“, čím sa zabezpečí, že veľkosť písma neklesne pod dvojnásobok koreňovej veľkosti písma. Ideálna alebo preferovaná hodnota je nastavená na „5vw“, čo je 5 % šírky výrezu, vďaka čomu reaguje na rôzne veľkosti obrazovky. Maximálna hodnota je nastavená na „3 rem“, čím sa zabezpečí, že veľkosť písma nebude väčšia ako trojnásobok veľkosti koreňového písma. Pre štylizáciu odseku naopak.

Najlepšou praxou je použiť pre ideálnu hodnotu šírku výrezu „vw“ alebo percento „%“, pretože to umožňuje, aby sa vlastnosť proporcionálne škálovala na základe dostupného priestoru, vďaka čomu je návrh citlivejší. Uistite sa, že viete ktorú jednotku CSS by ste mali použiť pre váš scenár.

Toto je najbežnejšia typografická technika používaná vývojármi. Zahŕňa vytváranie mediálnych dopytov pre každý bod prerušenia. Umožňuje vám použiť špecifické štýly na základe rôznych veľkostí obrazovky. Tu je ilustrácia:

/* Predvolená veľkosť písma */
h1{
veľkosť písma: 38px;
}
p{
veľkosť písma: 20px;
}
/* Veľkosť písma pre malé obrazovky */
@media (maximálna šírka:800 pixelov){
h1{
veľkosť písma: 32px;
}
p{
veľkosť písma: 18px;
}
}
/* Veľkosť písma pre menšie obrazovky */
@media (maximálna šírka:400 pixelov){
h1{
veľkosť písma: 28px;
}
p{
veľkosť písma: 15px;
}
}

V tomto príklade sú nadpis a odsek nastavené na predvolenú hodnotu „38px“ až „20px“. Potom sa nastavia podmienky pre menšie veľkosti obrazovky, aby rozloženie reagovalo na mobilné telefóny. Môžete vytvoriť toľko mediálnych dopytov, koľko chcete, na základe dizajnu a požadovanej odozvy, okrem iného Media query CSS triky, ktoré by ste mali vedieť.

3. Vlastné vlastnosti CSS

Tiež známy ako vlastné premenné CSS, ukladá hodnoty, ktoré možno opakovane použiť v rámci vášho štýlu. Môže sa použiť na typografiu, aby sa umožnila jednoduchá správa a prispôsobenie. Tu je príklad.

:koreň {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
veľkosť písma: var(--heading-font-size);
}
p{
veľkosť písma: var(--paragraph-font-size);
}
@media (maximálna šírka:800 pixelov){
:koreň {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@media (maximálna šírka:400 pixelov){
:koreň {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}

V tomto príklade je vlastnosť CSS nastavená na koreňovej úrovni, čo nám umožňuje prístup k nej globálne. --heading-font-size a --paragraph-font-size sú popisné názvy pre nadpis a odsek, s predvolenými hodnotami danými obom. Táto technika môže byť znovu použitá pre rôzne mediálne dotazy, aby sa zabezpečila konzistentnosť vo všetkých oblastiach.

Osvedčené postupy pre responzívnu typografiu

Medzi vývojármi je bežnou praxou používať šírku výrezu (vw) priamo na typografiu. Aj keď je jednoduchý a zdá sa, že funguje, na malých obrazovkách je malý a na veľkých obrazovkách extrémne veľký. K tomu dochádza aj pri priblížení a oddialení stránky. Ak môžete, vyhnite sa priamemu použitiu výrezu;

h1{
veľkosť písma: 2vh;
 }

Vždy testujte a uistite sa, že vaša typografia je čitateľná na rôznych veľkostiach obrazovky a vždy testujte kompatibilitu prehliadača. Zvážte čitateľnosť a uistite sa, že veľkosti písma nie sú príliš malé alebo príliš veľké

Responzívna typografia je kľúčom k čitateľnému webovému dizajnu

Responzívna typografia hrá kľúčovú úlohu pri webdizajne a vývoji. Implementáciou metód a techník, ako je upínanie, mediálne dotazy a vlastné vlastnosti CSS, môžete zabezpečiť, aby sa vaša typografia škálovala na rôznych veľkostiach obrazoviek a zariadení. Existuje toľko techník, ktoré treba preskúmať, keď sa pokúšate vytvoriť schopnosť reagovať pomocou CSS – použite tieto techniky na začatie rozvoja odborných znalostí v tejto oblasti.