Potřebujete zajistit, aby vaše webové stránky nebo aplikace vypadaly dobře na všech typech zobrazení? Zde přichází na řadu typografie reagující na CSS.

Vývoj webu s tolika body přerušení může být vyčerpávající. V CSS se můžete naučit mnoho nových technik, ať už jste zkušený vývojář nebo vývojář na střední úrovni.

Jak ale s responzivní typografií začít? Zde je návod, jak provést kroky k přizpůsobení webových stránek jakékoli velikosti obrazovky.

Význam responzivní typografie

Typografie hraje zásadní roli při vývoji a designu webu tím, že zajišťuje čitelnost, použitelnost a celkovou estetiku webu. Každý chce mít responzivní web. Nebylo by skvělé, kdyby se text nebo písma automaticky přizpůsobily různým velikostem obrazovky? Mezi další výhody responzivní typografie při vývoji webu patří následující;

  • Zlepšuje celkovou uživatelskou zkušenost na různých zařízeních nebo velikostech obrazovky tím, že zajišťuje čitelnost a čitelnost.
  • Zvyšuje dostupnost tím, že vychází vstříc uživatelům se zrakovým postižením nebo jiným handicapem. Vyhovuje různým uživatelským preferencím, jako jsou nastavitelné velikosti písma.
    instagram viewer
  • Konzistentní typografie napříč zařízeními a rozlišeními pomáhá zachovat identitu značky a vizuální jednotu.

Zde je šablona kódu, kterou si můžete zkopírovat do svého editoru kódu, než začnete, abyste mohli sledovat techniky, o kterých budeme diskutovat.

Soubor HTML kódu

index.html
html>
<htmllang="en">
<hlava>
<metaznaková sada="UTF-8">
<metanázev="výřez"obsah="width=device-width, initial-scale=1.0">
<odkazrel="stylesheet"href="style.css">
<titul> Responzivní typografie titul>
hlava>
<tělo>
<divtřída="kontejner">
<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>
tělo>
html>

Soubor CSS kódu

/*style.css*/
tělo{
Zobrazit: flex;
ospravedlnit-obsah: centrum;
zarovnat-položky: centrum;
výška: 100vh;
}
.kontejner{
šířka: 400px;
barva pozadí: starožitný bílý;
vycpávka: 15px;
box-shadow:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
barva: hotpink;
}

Nyní se podívejme na některé efektivní metody a techniky pro implementaci responzivní typografie pomocí CSS

1. Upínání

Jedná se o moderní techniku ​​typografie CSS, která umožňuje a zajišťuje, aby velikost písma prvku zůstala v určitém rozsahu. Funkce svorky „Clamp()“ přebírá tři parametry, minimální hodnotu, ideální hodnotu a maximální hodnotu. Funkce svorky není omezena na typografii. Lze jej použít pro obrázky, karty, videa a další média. Funguje to takto.

Svorka (minimální hodnota, ideální hodnota, maximální hodnota): 

h1{
velikost písma: svorka(2rem, 5vw, 3rem);
}
p{
velikost písma: svorka(1rem, 3vw, 2rem);
}

V tomto příkladu je velikost písma pro nadpis a odstavec nastavena pomocí funkce „clamp()“. Pro nadpis „h1“ je minimální hodnota nastavena na „2rem“, což zajišťuje, že velikost písma neklesne pod dvojnásobek velikosti kořenového písma. Ideální nebo upřednostňovaná hodnota je nastavena na „5vw“, což je 5 % šířky zobrazovacího pole, takže reaguje na různé velikosti obrazovky. Maximální hodnota je nastavena na „3 rem“, což zajišťuje, že velikost písma nebude větší než trojnásobek velikosti kořenového písma. A naopak pro styl odstavce.

Nejlepším postupem je použít pro ideální hodnotu šířku výřezu „vw“ nebo procento „%“, protože to umožňuje, aby se vlastnost proporcionálně škálovala na základě dostupného prostoru, díky čemuž je návrh citlivější. Ujistěte se, že víte kterou CSS jednotku byste měli použít pro váš scénář.

Jedná se o nejběžnější typografickou techniku ​​používanou vývojáři. Zahrnuje vytváření mediálních dotazů pro každý bod přerušení. Umožňuje vám použít specifické styly na základě různých velikostí obrazovky. Zde je ilustrace: 

/* Výchozí velikost písma */
h1{
velikost písma: 38px;
}
p{
velikost písma: 20px;
}
/* Velikost písma pro malé obrazovky */
@media (max. šířka:800 pixelů){
h1{
velikost písma: 32px;
}
p{
velikost písma: 18px;
}
}
/* Velikost písma pro menší obrazovky */
@media (max. šířka:400 pixelů){
h1{
velikost písma: 28px;
}
p{
velikost písma: 15px;
}
}

V tomto příkladu jsou nadpis a odstavec nastaveny na výchozí hodnotu „38px“ až „20px“. Poté se nastaví podmínky pro menší velikosti obrazovky, aby rozložení reagovalo na mobilní telefony. Můžete vytvořit tolik mediálních dotazů, kolik chcete, na základě designu a požadované odezvy, mimo jiné Media query CSS triky, které byste měli znát.

3. Vlastní vlastnosti CSS

Také známý jako vlastní proměnné CSS, ukládá hodnoty, které lze znovu použít ve vašem stylu. Může být použit pro typografii, aby bylo možné snadnou správu a přizpůsobení. Zde je příklad. 

:vykořenit {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
velikost písma: var(--heading-font-size);
}
p{
velikost písma: var(--paragraph-font-size);
}
@media (max. šířka:800 pixelů){
:vykořenit {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@media (max. šířka:400 pixelů){
:vykořenit {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}

V tomto příkladu je vlastnost CSS nastavena na kořenové úrovni, což nám umožňuje globálně přistupovat. --heading-font-size a --paragraph-font-size jsou popisné názvy pro nadpis a odstavec, s výchozími hodnotami danými oběma. Tuto techniku ​​lze znovu použít pro různé dotazy na média, aby byla zajištěna jednotnost napříč všemi oblastmi.

Doporučené postupy pro responzivní typografii

Mezi vývojáři je běžnou praxí používat šířku výřezu (vw) přímo k provádění typografie. Přestože je jednoduchý a zdá se, že funguje, na malých obrazovkách se stává maličkým a na velkých obrazovkách extrémně velkým. K tomu dochází také při přibližování a oddalování stránky. Pokud můžete, vyhněte se přímému použití výřezu, jako je tento;

h1{
velikost písma: 2vh;
 }

Vždy otestujte a ujistěte se, že vaše typografie je čitelná na různých velikostech obrazovky a vždy otestujte kompatibilitu prohlížeče. Zvažte čitelnost a zajistěte, aby velikosti písma nebyly příliš malé nebo příliš velké

Responzivní typografie je klíčem k čitelnému webovému designu

Responzivní typografie hraje klíčovou roli při návrhu a vývoji webu. Implementací metod a technik, jako je upínání, dotazy na média a vlastní vlastnosti CSS, můžete zajistit, aby se vaše typografie škálovala na různých velikostech obrazovek a zařízeních. Existuje tolik technik, které je třeba prozkoumat, když se pokoušíte vytvořit schopnost reagovat pomocí CSS – pomocí těchto technik začněte rozvíjet odborné znalosti v této oblasti.