Webové zákusky

Nastavení fontů pro různá zařízení

13. 2. 2022

Nastavení velikosti fontů pro jednotlivé velikosti obrazovky je něco, na co v DIVI (ale i jinde) moc nemysleli.
Ano, je tu možnost nastavit „heading size“, ale to nastavuje pouze velikost pro H1 (jako destop, tak tablet i mobil) a zbytek je pak „nějak odvozený“ od této hodnoty.
Změnu jednotlivých úrovní nadpisů jde manuálně změnit několika způsoby:

  • U každého modulu zvlášť (pfff, koho by to bavilo? A měnit to pak všude na jinou hodnotu? … asi ne).
  • Vytvořet presety (ano, trochu lepší cesta, ale vytvářet pak presety na každý typ modulu v DIVI a jeho rozšíření… asi taky ne. Navíc – DIVI nabízí v úpravách modulu jen 3 velikosti, ale reálně potřebujeme trochu jemnější rozdělení podle šířky obrazovky).
  • Responzivní CSS (úprava na jednom místě a je hotovo).

Tady je příklad CSS, které se použije pro nastavení různých šířek. Tady je ukázka s breakpointy, které nabízí samotné DIVI, ale je na Vás, jakým způsobem to změníte (rozdrobíte nebo naopak sloučíte):

Jako první je tu obecné nastavení pro největší rozlišení a poté se to stupňuje podle šířky obrazovky. Např. pravidlo:

@media all and (min-width: 768px) and (max-width: 980px) {

je pro všechna zařízení, která mají min. šířku 768 a max. 980 (průměrná velikost tabletu).

Pravidla nastavíte na jedno místě a je vystaráno.

PS: pokud je šablona/builder/web, kde toto řešíte, dobře napsána, pojede to bez problému. V opačném případě se budete prát s kaskádami pravidel a nastavení příkazu !important.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
    h1, h2, h3, h4, h5 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        line-height: 1.3;
      }

    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
    h1 {font-size: 3.052rem;}

    h2 {font-size: 2.441rem;}

    h3 {font-size: 1.953rem;}

    h4 {font-size: 1.563rem;}

    h5 {font-size: 1.25rem;}
}

Zdroje a inspirace

Další články

Jak přidat fonty do DIVI

V článku o lokálních fontech v DIVI jsem popisovala, jak je možné přidat do DIVI vlastní font a co dělat, pokud DIVI daný formát fontu nepodporuje (tedy jiný formát než TFF nebo OTF). Někdy je...