Základy typografie ve webovém designu: Na tyto věci byste měli dbát

Mark Max Henckel Naposledy aktualizováno 21.10.2020
14 min.
typografie základy webdesign
Naposledy aktualizováno 21.10.2020

Jednoduchost není lehká. To je moje hlavní zásada. A tak je to také s použitím typografie ve webdesignu, písem na webových stránkách - vlastně docela jednoduché a přesto poměrně složité. Proto vám chci dnes ukázat, které základní typografické pravidla byste měli dodržovat, abyste co nejlépe prezentovali text na vašich webových stránkách.

Není žádným tajemstvím, že je pro mnoho lidí obtížné se jasně a srozumitelně vyjádřit. Proč by to mělo být jednodušší prostřednictvím médií? Aby byla komunikace jednodušší, existuje typografie. Na jedné straně je to element vyjádření, na druhé straně je to designový prvek, který daný cíl prezentuje adekvátně nebo "esteticky". Rozdíl mezi mikrotypografií a makrotypiografií je v tomto bodě irelevantní.

Typografie ve webovém designu - Proč je tak důležitá?

typografii základy webfonts

Není pochyb o tom, že písma mohou oživit a vizuálně obohatit webové stránky. Fonty - druhy písem - jsou důležitými prvky každého dobrého designu. Na internetu, tedy ve webdesignu, podléhá typografie zvláštním podmínkám, které bych zde chtěl osvětlit a které by vám měly pomoci lépe pochopit používání písma na webových stránkách.

"Dobrá typografie nehledá vše, co je ještě možné, ale žádá o to, co je potřeba."
Kurt Weidemann

Webové stránky často nejsou vyráběny vyškolenými grafickými nebo mediálními designéry, ale jsou navrženy a implementovány nováčky. To může vysvětlovat, proč jsou na mnoha stránkách ignorována i nejjednodušší grafická pravidla. Zvláště u typografie to lze vidět rychle. Nezkrotné použití špatně čitelných VERZÁLEK, nedostatek kontrastu mezi barvou písma a pozadím, stejně jako matoucí struktura textů ztěžují uživatelům čtení.

Ale přesně o to u typografie jde: čitelnost textů. Proč jinak byste měli mít texty na webových stránkách, pokud je nelze dobrě a příjemně číst? Prý není jednoznačné, jak by měly na konci snadno čitelné texty vypadat. To nerozumím, protože máme v grafice jednoduchá, osvědčená a velmi užitečná typografická pravidla, aby se daly vytvářet snadno čitelné texty. Prostě typografie.

Jedním z nich je kontrast – to znamená poměr barev mezi barvou písma a pozadím. Ve fóru jsem jednou kritizoval hrdě prezentované webové rozložení právě z tohoto důvodu. V grafice tomuto fenoménu říkáme "bílý orel na bílém pozadí". V tomto případě byl tmavě šedý text na světle šedém pozadí, tedy velmi špatný kontrast.

To může vypadat docela hezky - asi otázka vkusu - ale skoro se to nedá číst. Dal jsem mu jako zpětnou vazbu, že se mi to nezdá jako dobrý design, protože text přečtu jen s obtížemi. A pořád mám zdravé oči. Co dělají ti, kteří už tak dobře nevidí? To je také často podceňovaný problém – přístupnost. V každém případě mi ale designer sdělil, že je to jeho návrh a že to takhle chce. To známe: "Jen to tak udělej, ale pak to prostě bude špatný."

Pro mě je to další důkaz toho, jak málo znalostí o čitelnosti textů nějteří mají, tedy o dobré typografii. Před mnoha lety jsem měl v mém vyučení jako mediální designér (tisk) zkušenou grafičku a typografku, od které jsem se toho hodně naučil.

Webový design a typografie: Speciální požadavky

typografii základy webfonts

Ve webdesignu máme ale i jiné požadavky na typografii, než je čitelnost, a to technické. Dobrá čitelnost zahrnuje také skutečnost, že se stránka rychle načte na internetu. Takže máme co do činění s integrováním písma a výkonností webových stránek.

Kromě toho je třeba zajistit, aby texty byly stejně snadno čitelné na co největším počtu zařízení, což je další výzva. Nakonec máte se značkovacím jazykem CSS tolik možností zasáhnout do typografie webové stránky, že je všechno rychle složitější, než jste si mysleli.

A samozřejmě chceme mít dobře strukturovaný text, který také zvyšuje čitelnost, neunavuje a rankuje na Googlu. Mezi příklady patří značky nadpisů H1, H2, H3 atd., použití seznamů a značkovacích formátů, jako je bold/strong a em/i, stejně jako značky odstavců a další smysluplné HTML prvky.

Osobně mám rád standardní písma. To jen tak předem. Myslím, že opravdu není nutné, zahrnout na webové stránky speciální písma. Jako příklad, proč integrovat vlastní písmo, máme CI písmo. Jedná se o písmo speciálně vyvinuté pro společnost, které má důležitou funkci v podnikové identitě (Corporate Identity). Nebo jste opravdu dobrý designér, umělec nebo fotograf a kladete velký význam extravagantnímu nebo velmi individuálnímu vzhledu. Ale nejedná se o velké bloky textu nebo písemné informace.

Vlastní CI písmo obvykle používají větší společnosti, které pracují s vlastním IT oddělením a serverovou farmou. Tam neexistují žádné problémy s výkonností a vkládání CI písma je technicky sledováno.

Pokud jste designér a chcete ukázat, co umíte, doporučujeme použít typografii stávajících služeb – osvědčené Webfonts – abyste bezpečně integrovali požadované písmo a vložili ho na své vlastní webové stránky.

Někdy se také zdá být nezbytné transformovat požadovaný styl písma do vhodných webových formátů a integrovat je individuálně. Jestli to bude z dlouhodobého hlediska fungovat, je jiná věc. Proto v takovém případě dávám přednost Google Fonts- jsou rychlé, bezpečné a snadno použitelné. Ale i to může být otázkou vkusu.

Těchto 10 typografických pravidel vám pomůže

typografii základy webfonts

Nejdůležitější a velmi jednoduchá pravidla: Méně je více. Vezměte v úvahu zvyky čtenářů. Orientujte se podle webových stránek, které zobrazují rozsáhlé redakční texty a učte se.

Čitelnost textů podléhá určitým vědecky podloženým pravidlům. Týkají se nejen samotného psaní, ale i jeho okolí, kontrastu, jasnosti a struktury textů a ostrosti jeho okrajů.

1. Velikost písma

Záleží na písmu a orientuje se na základním designu webových stránek. Myslete také na to, že uživatel má možnost kdykoli změnit velikost písma ve svém prohlížeči nebo smartphonu. Pokusy o relativní velikosti písma, tj. %, EM/REM nebo small/normal/medium/large.

2. Šířka řádku

Ta je zjevně podceňována. Zjistilo se, kterou šířku textu lidé ještě rádi čtou: Je to šířka až do maximálně 70 znaků, tedy standardní šířka textu jedné stránky Word dokumentu. Podívejte se i zde jednoduše na SPIEGEL ONLINE apod., jak široké jsou jejich textové bloky.

3. Řádkování

Pro optimální čitelnost je velmi důležitá takzvaná propustnost, tedy vzdálenost mezi jednotlivými řádky textu, včetně výšky odstavce. V závislosti na písmu se osvědčilo 140-150% "line-height".

4. Vzdálenost písmen

Toto je vzdálenost mezi písmeny manipulovaná takzvaným „letter-spacing“. Při používání této možnosti by měl být člověk velmi opatrný – například jen v určitých nadpisech. Pokud si nejste jistí, nepoužívejte to.

5. Kontrast

Poměr mezi barvou a barvou pozadí se nazývá kontrast. Ten by měl být v (hlavním) textu velmi vysoký. Maximální kontrast je samozřejmě černý text na bílém pozadí. To je snadno čitelné.

6. Struktura

To znamená: dobré a sémanticky správně strukturované texty! V HTML to jsou například nadpisy H1/H2/H3, odstavce, seznamy, inteligentní využití tlustého písma, kurzívu a barvy, atd. Působí bezprostředně na čitelnost a na ranking na Googlu.

7. Maximálně dva typy písem

Často vystačí na webovou stránku, knihu nebo dokument jedno písmo. Ve zvláštních případech i více, ale s použitím více než 2 písem na dokument byste měli být opatrní.

8. Verzálky

Nepoužívejte verzálky v nadpisech a přehledu. Jsou velmi těžce čitelné. Pokud se však jedná o jednotlivá slova, například v NAVIGACI, můžete verzálky použít. Tady nepište velkými písmeny, ale pomocí CSS přes "text-transform:uppercase".

9. Standardní písma

Pokud si nejste jistí a jako zálohu byste měli volit osvědčená systémová písma (systémové fonty). Arial, Verdana, Georgia jsou taková snadno čitelná systémová písma, která podporují téměř všechna výstupní zařízení a jsou vždy dobře zobrazena.

Fallback je následující písmo v CSS, stejně jako v BMW: "bmwTypeWebBoldAll","Arial","Helvetica",sans-serif; Zde jsou Arial, Helvetica, a Sans-Serif (tj. první písmo k dispozici pod Sans-Serif) fallbacky, které se objevují, když písmo před němi ("bmwTypeWebBoldAll") není k dispozici.

10. Školení

Můj tip: Vzdělávejte se na téma typografie přes workshopy, knihy a časopisy nebo videa na YouTube. Například mohu doporučit toto video . Ve své přednášce na "MobileTechCon" Sven Wolfermann systémové fonty - na rozdíl ode mě - nedoporučuje, ale poskytuje mnoho cenných informací na toto téma!

Psaní s CSS: Má to smysl?

Slovíčko k návrhu písma nebo nastavení pomocí CSS: V neposlední řadě od zavedení CSS3 mají vývojáři k dispozici subtilnější nastavení písma stránky. Ale jsou opravdu vždycky smysluplné? K čemu je použít a kdy? Čeho chci dosáhnout? Čitelnosti? Krásného designu? Ne všichni kodéři – nebo jejich zákazníci – o tom zřejmě přemýšlejí. Někdy dělají všechno, co je v jejich silách. Nejen, že mění řádkování („line-height“), což někdy způsobuje problémy s výškami, vzdálenostmi a polohováním, ale také mezery mezi písmeny (letter-spacing) nebo umístí stíny kolem textu ("text-shadow"). Je hrozné, co občas vidím.

Proto vám doporučuji, abyste byli velmi opatrní s těmito nastaveními a používali tyto techniky moudře. Nefungují všude a dokonce brání zobrazení na malých displejích. Pak budete muset vzít zpět pokyny pro desktop přes "Media Queries", což stojí čas a kód. Opravdu to dává smysl? Odpověď by měla být velmi jasná a přesná.

Styly písem pro web: Webové fonty

typografii základy webfonts

Mimochodem: BMW používá na svých internetových stránkách, jak již bylo vidět, toto: font-family: "bmwTypeWebBoldAll","Arial","Helvetica",sans-serif;font-weight: normal; – v textu zcela normální Arial. Amazon také používá na e-shopu Arial. Apple samozřejmě používá vlastní písmo jako webový font. Ropná společnost TEXACO používá písma Adobe. Jen jako malé příklady.

Naštěstí již existuje mnoho poskytovatelů webových písem, která fungují dobře a dají se obvykle snadno integrovat. Bohužel tyto "webové fonty" obvykle něco stojí, i když se jejich ceny značně liší. Jako příklady, kromě Google Fonts, existují Adobe Fonts (Typekit), Webtype, Adobe Edge Web Fonts a mnoho dalších - otázka vkusu.

Výhoda těchto služeb je zřejmá: nemáte žádné licenční starosti (viz níže "Pozor: Licence!"), písma fungují a na webu (tj. podpora nebo fóra) je k dispozici nápověda nebo pokyny pro integraci písem. Tarify jsou často rozšiřitelné a máte určitý výběr zajímavých písem.

Nedorozumění s Google Fonts

Když byla v květnu 2018 zavedena legislativa GDPR pro všechny, měla networková komunita strach používat Google Fonts . Panovaly obavy, že použití Google WebfontsGoogle proti němuž byly tyto právní předpisy namířeny - není v souladu se zákony o ochraně údajů, a proto by hrozila pokuta.

Tento strach, který mnozí ještě mají, ukazuje, jak stále velký zmatek kolem GDPR je. Samozřejmě ve prospěch právníků a internetových advokátních kanceláří. Pokud jste kvůli využití Google Analytics s Google uzavřeli zpracování objednávek a poukazujete na použití písem – a v případě pochybností na soubory cookie – v zásadách ochrany osobních údajů, nebudete mít problém.

Pokud se stále bojíte, můžete zahrnout Google Fonts lokálně, to znamená Google Webfonts stáhnout a uložit na vlastním webovém prostoru.

Kromě toho byla opakovaně odsuzována údajně tak špatná výkonnost, pokud byly fonty nahrány přes Google . Ale nikdo už nepoukáže na to, že Google má rychlou a extrémně stabilní serverovou architekturu a že existují i fallbacky (viz výše). Kromě toho se fonty načtou z jiné URL adresy, což se děje současně s načítáním souborů z vlastního serveru. Ale opět jste závislí na Googlu o trochu víc.

Pozor: Doba načítání!

Je to velmi jednoduché. Externě integrovaná webová písma mohou prodloužit dobu načítání stránky. Potřebný kód pro integraci vlastních písem do stránky taky. Pouze standardní písma, systémová písma na počítačích a smartphonech uživatelů nevyžadují dobu načítání, protože nejsou načteny přes server, ne přes internet.

Jinými slovy, pokud vaše stránky potřebují rychlé načítání, nemáte možná vhodný hosting a společnost nemá CI písmo, které je absolutně nutno zahrnout, vždy bych nastavil standard. Takže systémové fonty, jak Amazon s Arial . To má svůj smysl.

Samozřejmě se nejedná o kilobajty písem, které musí být načteny. Jedná se o to, že je třeba stáhnout je dodatečně, a že server, který je má dodat, může být zrovna oslaben. To pak nevypadá dobře a lze se tomu vyhnout.

Pozor: Licence!

Určitě si dejte pozor na licence pro použitá písma. Pokud použijete Google Fonts nebo systémová písma, která jsou načtena počítačem uživatele, je to v pořádku. Pro všechny ostatní písma, která pro webové stránky používáte, se musíte ujistit, že buď máte licenci - a to může být docela drahé - abyste je použili na vlastních webových stránkách, nebo se jedná o Free Font , což někdy vyvolává další problémy, když jde například o diakritiku.

Abych zabránil všem těmto problémům, používám systémová písma nebo Google Fonts. Pokud zákazník bezpodmínečně své vlastní písmo chce, měli byste do výpočtu velkoryse zahrnout vaše úsilí, protože integrace externích písem do webových stránek může někdy způsobit určité problémy. Například s příkazy CSS a, co se mi vždycky zdálo opravdu špatné, při hledání správného názvu písma, aby ho bylo možné správně ovládat pro zobrazení HTML.

Zahrnutí vlastních písem

typografii základy webfonts

Webová písma a/nebo vlastní písma, která jste vytvořili pro vaši stránku prostřednictvím nástroje, můžou na vašich stránkách rychle způsobit hodně problémů. Mnohdy se vyskytnou následující problémy:

  • Blikající písmo při načítání stránky (není neobvyklé, někdy uvidíte i jiné písmo, dokud ho CSS nepřepíše webovým písmem).
  • Delší doba načítání kvůli velmi složitým písmům (spíš zřídka).
  • Častější je rozostření písma, narušení v důsledku nesprávného vykreslování (v některých systémech).

Abyste mohli zobrazit požadované písmo na co největším množství výstupních zařízeních, potřebujete různé varianty. "TTF" je jasný a dobře známý, ale také potřebujete "EOT" a obě varianty "WOFF". To je nezbytné, pokud chcete na své stránky zahrnout vlastní písma. Tyto formáty si můžete vytvořit zdarma s Webfont Generator . Potom načtete všechny formáty písma do adresáře serveru a zahrnete je do šablony stylů ( CSS soubor) následujícím způsobem:

@font-face {
font-family: 'Dein Font';
font-style: normal;
font-weight: normal;
src: local('Dein Font'),
      url('/deinfont.woff2') format('woff2'),
      url('/deinfont.woff') format('woff'),
      url('/deinfont.ttf') ('ttf'),
      url('/deinfont.eot') ('eot');
}

@font-face {
font-family: 'Dein Font';
font-style: italic;
font-weight: normal;
src: local('Dein Font Italic'), vbx
      url('/deinfont-italic.woff2') format('woff2'),
      url('/deinfont-italic.woff') format('woff'),
      url('/deinfont-italic.ttf') format('ttf'),
      url('/deinfont-italic.eot') format('eot');
}

Na tomto @font-face-Code, který integruje písmo, lze vidět, jak komplexní to je - a tím náchylné k chybám.

Pak je můžete použít ve vašem CSS kódu a přiřadit je k třídám a ID. Takto se mohou vyskytnout některé chyby, které v tuto chvíli nechci řešit. Jak jsem již řekl, doporučuji písma standardní nebo systémová nebo Google Fonts, které lze snadno zahrnout prostřednictvím propojeného souboru v záhlaví webových stránek:

Typografie a mobilní zobrazení

typografii základy webfonts

Tento aspekt je zásadně opomíjen. Z mého pohledu není vůbec nutné načítat speciální písmo na malém displeji nebo smartphonu. A jak to vypadá se záložními záznamy, systémovými skripty mobilních telefonů? Pokud tvořím mobilní stránku nebo ji pro mobilní zobrazení optimalizuji, samozřejmě kvůli době načítání webové fonty nestahuji.

Je to sice strategické rozhodnutí, které musí být projednáno se zákazníkem, ale nevidím jediný argument, který mluví pro písmo webové nebo vlastní v mobilní reprezentaci.

Samozřejmě na smartphonu nejsou k dispozici všechna systémová písma jako na počítači. Ale podle mého názoru nezáleží na tom, zda máte toto nebo tamto písmo pro Android systém. Zde jsou důležité rychlé informace a dobrá čitelnost. To je u Androidu a Applu garantováno, pokud máte fonty určené pro web.

Podíváme-li se na věc ze dvou hlavních hledisek, a to na rychlost načítání a design, musíme dospět k závěru, že samostatné písmo je pro mobilní reprezentaci nadbytečné. Na jedné straně písmo zhoršuje rychlost načítání mobilní strany, což je obzvláště důležité pro zobrazení na autobusové zastávce. Na druhé straně jsme (doufejme) snížili obsah a design mobilní verze webových stránek na základy právě z těchto důvodů. Proč načítat vymazlený webový font?

Nejdůležitější je vždy čitelnost nebo to, čeho chceme dosáhnout: předávání znalostí, literární zábava, nákup produktu, kontaktování, objednání newsletteru nebo přístup k adrese. A myslím si, že k tomu není třeba speciální nebo webové písmo.

Bezpečná webová písma

Určitě byste měli zkontrolovat, která ze systémových písem jsou vhodná pro váš projekt. Kompletní sbírku takzvaných webově bezpečných CSS instrukcí pro systémové fonty nebo bezpečné fonty naleznete na www.cssfontstack.com.

Co jsou bezpečná webová písma? Bezpečná webová písma jsou písma, která jsou předinstalována v mnoha operačních systémech. I když nejsou na všech systémech nainstalovány stejné znakové sady, lze použít bezpečný webový blok CSS nastavení, abyste vybrali více znakových sad, které vypadají podobně a jsou nainstalovány na různých systémech, které chcete podporovat. Chcete-li od CSS3 aplikovat jiná než předinstalovaná písma, můžete použít nastavení pro tyto webová písma .

Závěr

Měli byste si velmi pečlivě rozmyslet, zda systémové písmo není stejně tak dobré nebo dokonce lepší, než webové písmo nebo vlastní písmo. Osvědčená písma, jako jsou Verdana, Arial, Trebuchet, Georgia, Times New Roman atd. můžete používat beze strachu, protože jsou vždy snadno čitelná. A ještě jsme nemluvili o kvalitě textů, které samozřejmě hrají klíčovou roli. Ale to je jiný problém.Nepodceňujte téma typografie na webových stránkách. Zvažte technické aspekty, jako je doba načítání nebo diakritika, ale také uživatelskou přívětivost vašeho typografického návrhu, tedy čitelnost, kontrast a řádkování.

Pečlivě si rozmyslete, zda chcete použít vlastní nebo externí písmo, nebo se spoléháte na standardní nebo systémová písma. Pokud si vyberete vlastní písmo, pak zjistěte, jestli mužete toto písmo nebo podobnou variantu aplikovat s Google Fonts . Nebo zda opravdu chcete integrovat písma ručně přes CSS a nahrát je na server ve všech formátech ručne předem. Standardní fonty, které má uživatel na počítači nebo smartphonu a které se načítají odtud, jsou osvědčené a nemusí se načítat. To platí obzvláště pro mobilní načítání při prohlížení stránky na smartphonech.

Já osobně obvykle pro použití externího nebo webové písma nejsem. Jsou-li u WordPress šablony Google Fonts již v balíčku, pak je samozřejmě použiju. Protože to jinak musím celé přepsat. To opravdu nedává smysl.

Pokud písmo jasně nepatří ke Corporate Identity společnosti, pak se jedná pouze o zábavu. A většina zákazníků na to nemá čas ani peníze. Všechny cesty vedou do Říma - ale nesprávné použití typografií na webových stránkách a u webového designu není jednou z nich. Se systémovými písmy, se standardními písmy, lze vytvořit skvělý design a plnit nádherné webové stránky. Jejich použití je ten nejbezpečnější způsob, a to tak ještě nějaký čas zůstane. Možná je to otázka vkusu, ale možná ten nejrozumnější přístup k písmu na webových stránkách.

Obrázek příspěvku: Ksenia Makagonova [Unsplash]
Další obrázky: Alexander Andrews [Unsplash], rawpixel [Pexels], Magda Ehlers [Pexels], Kristian Strand [Unsplash], Aaron Burden [Unsplash], RAIDBOXES

Mark Max Henckel – webdesigner z Hamburku. Vyškolený mediální designér (tisk), který pracuje jako webový designér od roku 2000. Zpočátku na mobile.de, od roku 2003 jako OSVČ. Od roku 2005 bloguje na různá témata na různých vlastních blozích. V letech 2007 a 2008 se podílel jako freelancer na SPIEGEL ONLINE na zahájení einestages.de v oddělení programování/redakce. Později u SPIEGEL - Vermarkter Quality Channel (Spiegel QC/Spiegel Media). Pracuje jako freelancer pro libri.de a různé grafické a IT agentury. Od roku 2008 se specializuje na WordPress .

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena * .