Font

• Proweby.cz
• 5. 7. 2024
• Slovník webových, online marketingových a IT pojmů, F.

Co je font

Fonty jsou základním prvkem typografie a designu webových stránek. Jsou to konkrétní styly písma, které určují vzhled a dojem z textu na webu. Fonty mohou výrazně ovlivnit čitelnost, estetiku a uživatelskou zkušenost na webové stránce.

Typy fontů

Serifové fonty

Serifové fonty mají malé čárky nebo zdobné prvky na koncích písmen. Tyto fonty jsou často považovány za tradiční a elegantní.

• Příklady: Times New Roman, Georgia, Garamond
• Použití: Tisková média, knihy, noviny, formální dokumenty

Sans-serifové fonty

Sans-serifové fonty nemají žádné zdobné prvky na koncích písmen. Jsou považovány za moderní a čisté.

• Příklady: Arial, Helvetica, Verdana, Open Sans
• Použití: Webové stránky, digitální média, moderní design

Monospace fonty

Monospace fonty mají pevnou šířku znaků, což znamená, že každý znak zabírá stejnou šířku.

• Příklady: Courier New, Consolas, Monaco
• Použití: Kódování, technická dokumentace, tabulky

Script fonty

Script fonty napodobují ručně psané písmo a mohou být formální nebo neformální.

• Příklady: Brush Script, Pacifico, Lobster
• Použití: Pozvánky, loga, kreativní design

Display fonty

Display fonty jsou navrženy pro velké velikosti a výrazné titulky. Jsou často dekorativní a jedinečné.

• Příklady: Impact, Comic Sans, Cooper Black
• Použití: Reklamy, titulky, plakáty

Výběr fontů pro webové stránky

Čitelnost

Čitelnost je klíčová pro výběr fontu pro webové stránky. Zajistěte, aby text byl snadno čitelný na různých zařízeních a velikostech obrazovek.

Kompatibilita prohlížečů

Zajistěte, aby vybrané fonty byly kompatibilní s různými webovými prohlížeči. Použití webových fontů jako Google Fonts nebo Adobe Fonts může zajistit širší podporu.

Konzistence

Používejte konzistentní sadu fontů pro nadpisy, tělo textu a další prvky, aby webová stránka působila jednotně a profesionálně.

Rychlost načítání

Velké množství nebo složité fonty mohou zpomalit načítání stránky. Optimalizujte fonty pro rychlejší načítání a lepší výkon.

Brand identity

Vyberte fonty, které odpovídají identitě vaší značky. Fonty mohou výrazně ovlivnit dojem z vaší značky a přispět k jejímu rozpoznání.

Implementace fontů na webových stránkách

Web-safe fonty

Web-safe fonty jsou fonty, které jsou široce podporovány napříč různými zařízeními a prohlížeči. Použití těchto fontů zajišťuje konzistentní vzhled na různých platformách.

Příklad použití web-safe fontu v CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}

Webové fonty

Webové fonty umožňují používat širokou škálu fontů, které nejsou běžně dostupné na všech zařízeních. Služby jako Google Fonts nebo Adobe Fonts poskytují snadný přístup k různým webovým fontům.

Příklad použití Google Fonts

• Výběr fontu: Navštivte Google Fonts a vyberte požadovaný font.
• Generování kódu: Google Fonts poskytne kód, který vložíte do hlavičky vaší HTML stránky.
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
• Použití fontu v CSS: body { font-family: 'Roboto', sans-serif; }

@font-face

Použití @font-face v CSS umožňuje zahrnout vlastní fonty, které nejsou dostupné jako web-safe nebo prostřednictvím služeb jako Google Fonts.

Příklad použití @font-face

@font-face {
    font-family: 'MyCustomFont';
    src: url('MyCustomFont.woff2') format('woff2'),
         url('MyCustomFont.woff') format('woff');
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

Optimalizace fontů

Redukce velikosti souborů

Optimalizujte velikost souborů fontů, aby se snížila doba načítání stránky. Používání komprimovaných formátů jako WOFF2 může pomoci zmenšit velikost souboru.

Lazy loading

Implementace lazy loading pro fonty může zlepšit výkon stránky tím, že načítá fonty pouze tehdy, když jsou skutečně potřeba.

Preloading fontů

Preloading fontů může zlepšit rychlost načítání stránky tím, že se fonty načtou dříve, než je prohlížeč potřebuje vykreslit.

Příklad preloading fontu v HTML

<link rel="preload" href="MyCustomFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Závěr

Fonty jsou klíčovým prvkem designu a použitelnosti webových stránek. Správný výběr a implementace fontů mohou výrazně zlepšit čitelnost, estetiku a uživatelskou zkušenost. Zajištění kompatibility, optimalizace výkonu a přizpůsobení fontů identitě vaší značky jsou důležité kroky k dosažení úspěchu vašich webových stránek.