typografie základy webdesign

Základy typografie pro váš další projekt

Jednoduché je těžké. To je moje hlavní zásada. A tak je to s využitím typografie ve webovém designu, písma na webu - vlastně docela jednoduché a přesto poměrně komplikované. Proto vám dnes chci ukázat, které základy typografie byste měli zvážit, abyste mohli co nejlépe prezentovat text na svých webových stránkách.

Není žádným tajemstvím, že pro mnoho lidí je obtížné vyjádřit se jasně a srozumitelně. Proč by to mělo být snazší prostřednictvím médií? Pro usnadnění této komunikace existuje typografie. Na jedné straně je to doktrína spisů, na druhé straně designový prvek pro prezentaci textů nebo obsahu dovedně, podle cíle nebo "esteticky přitažlivý". Skutečnost, že se rozlišuje mezi mikrotypografií a makrotypografií, není v tomto bodě relevantní.

Proč základy typografie ve webovém designu?

typografie základy webfonts

Není pochyb o tom, že písma mohou oživit a vizuálně obohatit webové stránky. Písma jsou důležitými prvky každého dobrého designu. Na internetu, tj. ve webovém designu, věc s typografií podléhá zvláštním podmínkám, na které bych zde rád vrhl světlo a které by vám měly pomoci lépe porozumět věci s písmem 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 nevytvářejí vyškolení grafičtí designéři nebo mediální designéři, ale postranní účastníci. To může vysvětlovat, proč mnoho webových stránek ignoruje i ta nejjednodušší grafická pravidla. Zvláště pokud jde o typografii, je to rychle jasné. Nepotlačitelné použití špatně čitelných VERŠŮ, nedostatek kontrastu mezi barvou písma a pozadím, stejně jako zmatená struktura textů ztěžují uživatelům čtení.

Ale to je přesně to, o čem je typografie: čitelnost textů. Proč byste jinak měli mít na webových stránkách texty, pokud nejsou dobré a příjemné na čtení? Názory na to, jak by měly nakonec vypadat snadno čitelné texty, se údajně liší. Nerozumím tomu, protože v grafice máme jednoduchá, osvědčená a velmi užitečná typografická pravidla, abychom mohli vytvářet snadno čitelné texty. Typografie.

Jedním z nich je kontrast – barevný poměr mezi barvou písma a pozadím. Na fóru jsem kdysi kritizoval hrdě prezentované rozvržení webu právě z tohoto důvodu. V grafice nazýváme fenomén, který zde údajný webový designér chtěl prodat, "bílým orlem na bílém pozadí". V tomto případě měl tmavě šedý souvislý text na světle šedém pozadí, tj. nedostatečný kontrast.

To může vypadat hezky - pravděpodobně otázka vkusu - ale je těžké číst. Nahlásil jsem to zpět a zjistil jsem, že to pro mě nebyl dobrý návrh, kdybych mohl jen s obtížemi číst text. A stále mám zdravé oči. Co dělají ti, kteří mají zhoršený zrak? Také často podceňovaný problém – dostupnost klíčových slov. V každém případě návrhář zaujal stanovisko, že to je jeho návrh a udělá to jen tak. Také víme: "Můžete to udělat takhle, ale pak jen jíst hovno."

Pro mě je to další důkaz toho, jak málo znalostí o čitelnosti textů, tedy dobré typografie, je. Na svém školení mediálního designéra (tisku) před mnoha lety jsem měl zkušeného grafika a typografa, od kterého jsem se mohl hodně naučit.

Webdesign a typografie

typografie základy webfonts

Ve webdesignu však máme na typografii jiné požadavky než na čitelnost, a to technické. Dobrá čitelnost na internetu zahrnuje skutečnost, že se webové stránky načítají rychle. Takže pokud jde o integraci písem, máme co do činění s výkonem WordPress.

Kromě toho musí být zajištěno, aby texty byly stejně čitelné na co největším počtu výstupních zařízení, což je další výzva. Nakonec, s možnostmi značkovacího jazyka CSS, máte tolik možností zasáhnout do typografie webových stránek, že se záležitost rychle stává složitější, než se očekávalo.

A samozřejmě chceme mít dobře strukturovaný text, který také zvyšuje čitelnost, zabraňuje únavě a má vliv na Google, tedy na hodnocení ve vyhledávači. Příklady zahrnují nadpisy Značky H1, H2, H3 atd., Použití seznamů a značek, jako je Tučné / Silné a em / i, stejně jako značky odstavců a další užitečné prvky HTML.

Jsem přítelem standardních písem. Nejdřív ze všeho. Myslím, že není opravdu nutné zahrnout konkrétní vlastní písma na webových stránkách. Jako příklad toho, proč integrujete vlastní písmo, by zde mělo být uvedeno písmo CI. Jinými slovy, písmo speciálně vyvinuté pro společnost, které má důležitou funkci v korporátní identitě. Nebo jste opravdu dobrý designér, umělec nebo fotograf a přikládáte význam extravagantnímu nebo velmi individuálnímu designu těžkému vzhledu. Ale pak to nemusí být nutně o velkých blocích textu nebo písemných informací.

Samostatné písmo CI obvykle používají větší společnosti, které pracují s vlastním IT oddělením a serverovou farmou. Neexistují žádné problémy s výkonem a vkládání písem CI je technicky monitorováno.

Pokud jste designér a chcete ukázat, co umíte, je vhodné použít stávající služby – osvědčená webová písma – pro typografii, abyste požadované písmo bezpečně a efektivně integrovali do svých vlastních webových stránek.

Někdy se také zdá, že je třeba převést požadovaný styl písma do formátů kompatibilních s webem a integrovat je jednotlivě. Zda to z dlouhodobého hlediska vždy funguje perfektně, je jiná věc. Proto v takovém případě dávám přednost písmům Google, protože je rychlá, bezpečná a snadno použitelná. Ale i to je možná otázka vkusu.

Souhlas*
Toto pole slouží k ověření a nemělo by se měnit.

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

Základy typografie webfonty

Nejlepší a velmi jednoduchá pravidla: Méně je více. Zvažte čtenářské návyky lidí. Orientujte se na webové stránky, které prezentují a učí se rozsáhlé redakční texty.

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

1. Velikost písma

Záleží na písmu a závisí na základním designu webových stránek. Vezměte prosím na vědomí, že uživatel má možnost kdykoli změnit velikost písma ve svém prohlížeči nebo smartphonu. Pokusí se vzít relativní velikosti písma, tj. %, EM/REM nebo malé/normální/střední/velké.

2. Šířka čáry

To je zjevně podceňováno. Bylo určeno, kterou šířku textu lidé stále rádi čtou: Jedná se o šířku maximálně kolem 70 znaků, tj. Standardní šířka textu A4 dokumentu aplikace Word. Stačí se podívat na SPIEGEL ONLINE a spol., abyste zjistili, jak široké jsou jejich textové bloky.

3. Řádkování

Pro optimální čitelnost má velký význam tzv. odrážka, tedy vzdálenost mezi jednotlivými řádky textu – včetně výšky odstavce. V závislosti na písmu se na internetu osvědčilo dobrých 140–150 % "výšky řádku".

4. běžecká vzdálenost

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á: dobře a sémanticky správně strukturované texty! V HTML to znamená například nadpisy H1/H2/H3, značky odstavců, značky seznamů, inteligentní využití zvýraznění pomocí tučného písma, kurzívy a barvy. Má přímý vliv na čitelnost a také na hodnocení Google.

7. Maximálně dva typy písem

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

8. Verše

Vyhněte se veršům v nadpisech a nabídkách. Jsou obtížně čitelné. Pokud se však jedná o jednotlivá slova, například v navigaci, můžete použít verše. Ale nepište velkými písmeny, ale vyřešte pomocí CSS pomocí "text-transform:uppercase".

9. Standardní písma

V případě pochybností a jako záložní řešení byste měli zvolit osvědčená systémová písma. Arial, Verdana, Georgia jsou tak vynikající čitelná systémová písma, že téměř všechna výstupní zařízení mají a jsou vždy dobře zobrazena.

Záložní písmo je nástupnické písmo v CSS, například u BMW: "bmwTypeWebBoldAll","Arial","Helvetica",sans-serif; zde Arial, Helvetica a Sans Serif (tj. první písmo dostupné pod Sans Serif) jsou záložní písma, která se zobrazí, pokud písmo před ním ("bmwTypeWebBoldAll") není k dispozici.

10. Školení

Můj tip: Vzdělávejte se z hlediska typografie prostřednictvím workshopů, knih a časopisů nebo dokonce prostřednictvím videa YouTube na toto téma. Mohu doporučit e.B. toto video . Ačkoli Sven Wolfermann ve své prezentaci na "MobileTechConu" nedoporučuje systémová písma - na rozdíl ode mě - poskytuje mnoho cenných informací na toto téma!

Návrh písma s CSS: Má to smysl?

Slovo o designu písma, přesněji nastavení pomocí CSS: V neposlední řadě od zavedení CSS3 měli vývojáři k dispozici jemné možnosti nastavení písem webových stránek WordPress. Ale opravdu vždy dávají smysl? K čemu je mám použít a kdy? Čeho chci dosáhnout? Čitelnost? Krásný design? Zdá se, že ne všichni programátoři – nebo jejich zákazníci – o tom přemýšlejí. Někdy dělají všechno možné. Změňte nejen odrážku ("výška řádku"), která někdy způsobuje problémy s výškami, vzdálenostmi a umístěním, ale také mezery mezi písmeny nebo stíny kolem textu ("text-stín"). Špatné, což je někdy vidět.

Proto vám doporučuji, abyste byli s těmito postoji velmi opatrní a používali tyto techniky moudře. Nefungují všude a dokonce brání zobrazení na malých displejích. Pak musíte vzít zpět pokyny pro plochu prostřednictvím "Media Queries", což zase 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á písma

typografie základy webfonts

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

Naštěstí nyní existuje mnoho poskytovatelů webových písem, které fungují dobře a obvykle se snadno integrují. Bohužel, tato "webová písma" jsou obvykle zpoplatněna, i když ceny se velmi liší. Příklady, kromě Google Fonts , jsou: 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 jsou zde přesnější pokyny pro integraci písem na vlastní webové stránky (tj. Podpora nebo fóra). Sazby jsou často rozšiřitelné a máte určitý výběr vzrušujících písem.

Nedorozumění s Google Fonts

Když v květnu 2018 tzv. GDPRbyla zavedena závazným způsobem pro všechny, internetová komunita zpanikařila před použitím písem Google. Obávali se, že používání webových písem Google – Google jako "datová chobotnice", proti které byla tato legislativa namířena – by nebylo v souladu se zákony o ochraně osobních údajů a že by proto hrozila drahá varování.

Tento stále rozšířený strach vrhá světlo na bohužel stále trvající velký zmatek ohledně GDPR. Samozřejmě ve prospěch právníků a webových advokátních kanceláří. Pokud jste dokončili zpracování objednávky u společnosti Google z důvodu používání služby Google Analytics a odkazujete na použití písem - a v případě pochybností na soubory cookie - v zásadách ochrany osobních údajů, problém je mimo stůl.

Pokud se stále bojíte, můžete také integrovat všechna písma Google lokálně, tj. Stáhnout Google Webfonts a uložit je do vlastního webového prostoru.

Kromě toho byl výkon opakovaně odsouzen, což bylo údajně tak špatné, když načtete písma přes Google. Nezmiňuje se o tom, že Google má rychlou a extrémně stabilní architekturu serveru a že stále existují záložní řešení (viz výše). Kromě toho načtete písma z jiné adresy URL, což lze provést současně s načtením souborů z vlastního serveru. Ale opět jste závislí na Googlu.

Pozor: Doba načítání!

Věc je poměrně jednoduchá. Externě integrovaná webová písma mohou prodloužit dobu načítání webových stránek WordPress. Potřebný kód pro integraci vlastních písem do webových stránek WordPress. Pouze standardní písma, systémová písma na počítačích a smartphonech uživatelů, nevyžadují žádnou dobu načítání, protože nejsou načteny přes server, nikoli přes internet.

Nebo jinak řečeno: Pokud vaše webové stránky WordPress potřebují rychlé načítání, možná za tím není vhodný hosting WordPress a společnost nemá písmo CI, které musí být absolutně integrováno, vždy bych nastavil standard. Takže na systémových písmech, jako to dělá Amazon s Arialem. To dává smysl.

Samozřejmě se nejedná o kilobajty písem, které mají být načteny. Jde o to, že ty jsou na vrcholu, tj. musí být staženy dodatečně a že server, který je má doručit, může slábnout. To nevypadá dobře a je ... vyhnutelný.

Pozor: Licence!

V každém případě je třeba vzít v úvahu licence pro použitá písma. Pokud používáte písma Google nebo systémová písma, o kterých je známo, že jsou načteny počítačem uživatele, jste na zabezpečeném webu WordPress. U všech ostatních písem, která používáte na webových stránkách, se musíte ujistit, že pro ně máte licenci. A to se může rychle stát poměrně drahým. Ať už je chcete použít na svých webových stránkách, nebo zda se jedná o bezplatné písmo, které někdy způsobuje další starosti, pokud si myslíme na německé přehlásky a Eszett (ß).

Abych se vyhnul všem těmto problémům, spoléhal jsem se na systémová písma nebo na písma Google. Pokud zákazník nyní absolutně chce své vlastní písmo, měli byste velkoryse zahrnout úsilí o něj do výpočtu, 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 instrukcemi CSS a zde například to, co mi vždy připadá opravdu mizerné, když hledám správný název písma, abych mohl správně ovládat písmo pro zobrazení značek HTML.

Zahrnutí vlastních písem

typografie základy webfonts

S webovými písmy a / nebo vlastními písmy, které jste vytvořili pro své webové stránky WordPress pomocí nástroje, můžete rychle vyřešit řadu problémů pro vaše webové stránky WordPress. Nezřídka se vyskytují následující jevy:

  • Blikající písmo při načítání webových stránek WordPress (není neobvyklé, někdy můžete vidět jiné písmo, dokud jej CSS nepřepíše webovým písmem.
  • Delší doba načítání díky velmi složitým písmům (spíše vzácné).
  • Častější jsou rozmazání písma, zkreslení v důsledku nesprávného vykreslování (na některých systémech).

Abyste mohli zobrazit požadované písmo na co nejvíce výstupních zařízeních, potřebujete různé varianty stejného. "TTF" je jasné a dobře známé, ale potřebujete také "EOT" a dvě varianty "WOFF". To je nezbytné, pokud chcete integrovat vlastní písma do svých webových stránek WordPress. Tyto formáty můžete vytvořit zdarma pomocí generátoru Webfont . Poté načtete všechny formáty písma do adresáře serveru a integrujete je do šablony stylů (soubor CSS) s cestou 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') format('ttf'),
      url('/deinfont.eot') format('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');
}

V tomto kódu @font,který integruje vaše písmo, můžete vidět, jak složitá je věc - a proto je náchylná k chybám.

Pak je můžete použít v kódu CSS a přiřadit je ke třídám a ID. Tímto způsobem se mohou vyskytnout některé chyby, které v tomto okamžiku nechci pokrýt. Přesto: Doporučuji standardní nebo systémová písma nebo písma Google, která jednoduše integrujete prostřednictvím propojeného souboru v záhlaví webu:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i' rel='stylesheet' type='text/css'>

Typografie a mobilní displej

typografie základy webfonts

Tento aspekt je zásadně opomíjen. Z mého pohledu není absolutně nutné načítat speciální písmo na malý displej nebo smartphone. A co záložní řešení, systémová písma mobilních telefonů? Samozřejmě, pokud musím vytvořit mobilní web WordPress nebo jej optimalizovat na mobilu, první věc, kterou uložím, je stažení webového písma nebo vlastního písma kvůli době načítání.

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.

Pokud se na tuto záležitost podíváme ze dvou základních hledisek, a to rychlosti načítání a designu, musíme dojít k závěru, že samostatné písmo pro mobilní reprezentaci je nadbytečné. Na jedné straně písmo zhoršuje rychlost načítání mobilního webu WordPress, což je zvláště důležité při vyvolání na autobusové zastávce. Na druhou stranu jsme (snad) z těchto důvodů omezili obsah a design mobilní verze webu na základy. Proč načítat vyfouknuté webové písmo?

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, zda je jedno ze systémových písem vhodné pro váš projekt. Kompletní sbírku tzv. web-safe CSS instrukcí pro systémová písma přesněji webově bezpečná písma naleznete na CSS Font Stack.

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. Ačkoli ne všechny systémy mají nainstalované stejné znakové sady, můžete použít bezpečný webový blok nastavení CSS k výběru více znakových sad, které vypadají podobně a jsou nainstalovány v různých systémech, které chcete podporovat. Počínaje CSS3, pokud chcete použít jiná než předinstalovaná písma, můžete použít nastavení pro tato webová písma.

Závěr o základech typografie

Měli byste velmi pečlivě přemýšlet o tom, zda systémové písmo dělá totéž nebo dokonce lépe než webové písmo nebo vaše vlastní písmo. Osvědčená písma jako Verdana, Arial, Trebuchet, Georgia, Times New Roman a další lze použít bez váhání, protože jsou vždy čitelná. A ještě jsme nemluvili o kvalitě obsahu textů, která samozřejmě hraje rozhodující roli. Ale to je další problém. Nepodceňujte téma typografie na webových stránkách. Zvažte technické aspekty, jako je doba načítání nebo přehlásky písem, ale také uživatelská přívětivost vašeho typografického návrhu, tj. Čitelnost, kontrast a výška čáry.

Pečlivě si rozmyslete, zda chcete použít vlastní nebo externí písmo nebo zda chcete použít standardní písma přesněji systémová písma. Pokud si vyberete vlastní písmo, zeptejte se sami sebe, zda můžete použít toto písmo nebo podobnou variantu s Písmy Google. Nebo zda opravdu chcete integrovat písma ručně pomocí CSS a předem je načíst na server ve všech formátech. Standardní písma, která má uživatel v počítači nebo smartphonu a která jsou odtud načtena, jsou osvědčená a nevyžadují žádnou dobu načítání. To platí o to více pro mobilní nabíjení při zobrazení webových stránek WordPress na smartphonech.

Pro mě osobně obvykle není moc co říci o použití externího písma nebo webového písma. Pokud téma WordPress již má na palubě písma Google, používám to samozřejmě. Protože jinak musím celou věc našroubovat nebo přepsat. To opravdu nedává smysl.

Pokud není jasně součástí firemní identity společnosti, její vlastní písmo je trik. A většina zákazníků na to nemá čas ani peníze. Mnoho cest vede do Říma - ale nesprávné použití typografie na webových stránkách a ve webovém designu pravděpodobně ne. Se systémovými písmy, se standardními písmy, nádhernými návrhy a skvělými webovými stránkami lze vytvářet a vyplňovat. Jejich použití je bezpečnější způsob a zůstane tak po nějakou dobu. Možná je to otázka vkusu, ale možná je to nejrozumnější přístup k písmům na webových stránkách.

Vaše dotazy týkající se základů typografie

Jaké máte otázky týkající se základů typografie? Neváhejte použít funkci komentáře. Chcete být informováni o nových příspěvcích o WordPressu, webovém designu a dalších? Pak nás sledujte na Twitteru, Facebooku,LinkedInnebo prostřednictvím našeho newsletteru.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.