Typografie Základy v Web Design: Tyto věci, které byste měli zvážit

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

Jednoduché je těžké. To je moje hlavní zásada. A tak je to také s použitím typografie v web designu, fontů na webových stránkách - vlastně docela jednoduché a přesto poměrně složité. To je důvod, proč chci ukázat vám dnes, které základní typografické pravidla byste měli dodržovat, aby co nejlépe reprezentovat text na vašich webových stránkách.

Není žádným tajemstvím, že pro mnoho lidí je obtížné se jasně a srozumitelně vyjádřit. Proč by to mělo být jednodušší prostřednictvím médií? Aby to bylo jednodušší - komunikace - existuje typografie. Na jedné straně je to výuka spisů, na druhé straně je to designový prvek pro odesílání textů nebo obsahu, který je reprezentuje podle cíle nebo "esteticky". Rozdíl mezi mikrotypografií a makrotypiografií je v tomto bodě irelevantní.

Typografie v web designu - Proč je to 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. Písma - písma - jsou důležitými prvky každého dobrého designu. Na internetu, tedy v web designu, věc s typografií podléhá zvláštním podmínkám, které bych zde chtěl osvětlit a které by vám měly pomoci lépe pochopit záležitost s psaním 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 designéry nebo mediálními designéry, ale jsou navrženy a implementovány nováčky. To může vysvětlovat, proč i nejjednodušší grafická pravidla jsou ignorovány na mnoha stránkách. Zvláště pokud jde o typografii, rychle se to stává jasným. Nezkrotné použití špatně čitelné VERSALIA, nedostatek kontrastu mezi barvou písma a pozadím, stejně jako matoucí struktura textů ztěžují uživatelům čtení.

Ale to je přesně to, co typografie je vše kolem: čitelnost textů. Proč jinak byste měli mít texty na webových stránkách, pokud nejsou dobré a příjemné číst? Duchové toho, jak by měly na konci vypadat snadno čitelné texty, jsou údajně rozděleni. Nerozumím tomu, protože máme v grafice Jednoduché, Nejlepší a velmi užitečná typografická pravidlavytvářet snadno čitelné texty. 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 uvádíme fenomén, který údajný web designer chtěl prodat zde "orel bílý na bílém pozadí". V tomto případě měl tmavě šedý text na světle šedém pozadí, tedy velmi špatný kontrast.

To může vypadat docela hezky - otázka vkusu, pravděpodobně - ale je to velmi obtížné číst. Hlásil jsem to zpět a zjistil, že to není dobrý design pro mě, jestli můžu jen číst text s obtížemi. A pořád mám zdravé oči. Co dělají ti, kteří mají zhoršené vidění? Také často podceňovaný problém – dostupnost. V každém případě se návrhář domníval, že to bude jeho návrh a že to udělá. Také víme: "Můžete to udělat tak, ale pak jíst sednout."

Pro mě je to další důkaz toho, jak málo znalostí o čitelnosti textů je, tedy dobrá typografii. Před mnoha lety, v mém tréninku jako mediální designér (tisk), jsem měl ostřílený grafik a typograf, ze kterého jsem se mohl hodně naučit.

Web Design & Typografie: Speciální požadavky

typografii základy webfonts

V web design, nicméně, máme jiné požadavky na typ grafy, než jsou čitelnost, a to technické. Dobrá čitelnost zahrnuje také skutečnost, že se stránka rychle načte na internetu. Takže když je možné integrovat písma s výkonem webových stránek, máme s tím co do činění.

Kromě toho je třeba zajistit, aby texty byly stejně snadno čitelné na co největším počtu výstupních zařízení, což je další výzva. Nakonec, s možnostmi jazyka ocenění ČSS, máte tolik možností zasáhnout do typografie webové stránky, že se věci rychle stávají složitějšími, než jste si mysleli.

A samozřejmě chceme mít dobře strukturovaný text, který také zvyšuje čitelnost, vyhýbá se únavě a působí na Google, tj. Mezi příklady patří značky nadpisů H1, H2, H3 a tak dále, použití seznamů a formulářů ocenění, jako je tučné/silné a em/i, stejně jako značky odstavců a další smysluplné prvky HTML.

Jsem přítel standardních písem. To je právě teď. Myslím, že to není opravdu nutné zahrnout speciální písma na webových stránkách. Jako příklad, proč integrovat vlastní písmo, zde je písmo CI. Jedná se o písmo speciálně vyvinuté pro společnost, které má důležitou funkci v podnikové identitě. Nebo jste opravdu dobrý designér, umělec nebo fotograf a přikládávelký význam extravagantnímu nebo velmi individuálnímu vzhledu. Ale pak to není nutně otázka velkých bloků textu nebo písemných informací.

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

Pokud jste designér a chcete ukázat, co můžete dělat, typografii doporučujeme pro stávající služby – na osvědčená webová písma – bezpečně integrovat požadované písmo a provést do své vlastní webové stránky.

Někdy se také zdá být nezbytné transformovat požadovaný styl písma do webových formátů vhodných a integrovat je individuálně. Zda to bude vždy fungovat správně v dlouhodobém horizontu, je jiná věc. Proto v takovém případě dávám přednost Písma Googleprotože je 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

Nejvyšší a velmi jednoduchá pravidla: Méně je více. Vezměte v úvahu čtenářské návyky lidí. Orientujte se na webové stránky, které představují 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 psaní, ale i jeho okolí, kontrastu, jasnosti a struktury textů a ostrosti jeho 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. Pokusy o relativní velikosti písma, tj.

2. Šířka čáry

To je zjevně podceňováno. Bylo určeno, kterou šířku textu lidé stále rádi čtou: Je to šířka až do maximálně 70 znaků, tj. Zkontrolujte znovu na SPIEGEL ONLINE a Co. 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, dobrý 140-150% "line-výška" prokázaly svou hodnotu v síti.

4. běžecká vzdálenost

Toto je vzdálenost mezi písmeny manipulovanými mezerami mezi písmeny. Člověk by měl být velmi opatrný a tuto možnost návrhu používat pouze opatrně – například s určitými nadpisy. V případě pochybností nepřestávejte.

5. Kontrast

Vztah mezi barvou a barvou pozadí se nazývá kontrast. To by mělo být velmi vysoké pro tok texty. 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! To znamená, že v HTML, například, nadpis značky H1/H2/H3, odstavce značky, seznam ocenění, inteligentní využití zdůrazňuje pomocí vybočení, kurzívou a barvy, atd.

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 s použitím více než 2 písma na dokument, měli byste být opatrní.

8. Verše

Nepoužívejte verše v nadpisech a nabídkách. Jsou velmi 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 přes CSS o "transformace textu:velká písmena" vyřešit.

9. Standardní písma

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

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

10. Školení

Můj tip: Udělejte si cestu přes workshopy, knihy a časopisy nebo video YouTube na toto téma. Například mohu toto video Doporučit. Ve své přednášce na "MobileTechCon" Sven Wolfermann radí proti systémové fonty - na rozdíl ode mě - ale poskytuje mnoho cenných informací na toto téma zde!

Psaní s CSS: Má to smysl?

Slovo o návrhu písma nebo nastavení pomocí CSS: V neposlední řadě od zavedení CSS3 jemně nastavit písma stránky jsou k dispozici vývojářům. Ale opravdu vždycky dávají smysl? K čemu je mám použít na kdy? Čeho chci dosáhnout? Čitelnost? Krásný design? Ne všichni kodéry – 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í výšku čáry, což někdy způsobuje problémy s výškami, vzdálenostmi a polohováním, ale také mezery mezi písmeny nebo umístěte stíny kolem textu ("textový stín"). Špatné, což je někdy vidět.

Proto vám doporučuji, abyste byli velmi opatrní s těmito nastaveními a používat tyto techniky moudře. Nefungují všude a dokonce brání displeji na malých displejích. Pak budete muset vzít zpět pokyny pro desktop přes "Media Dotazy", 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á písma

typografii základy webfonts

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

Naštěstí existuje mnoho poskytovatelů webových písem, kteří fungují dobře a jsou obvykle snadno integrovat. Bohužel, tyto "webové fonty" jsou obvykle účtovatelné, i když ceny se značně liší. Jako příklady, kromě Písma Google, jsou stále zmiňovány: Písma Adobe (Typekit), Webový typ, Webová písma Adobe Edge 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 vašem webu (tj. podpora nebo fóra) jsou k dispozici nápověda nebo pokyny pro integraci písem. Sazby jsou často rozšiřitelné a máte určitý výběr zajímavých písem.

Nedorozumění s Google Fonts

Když v květnu 2018 tzv. GDPR zavedena pro všechny, síťová komunita byla vyděšena používáním Písma Google zpanikařil zpět. Panovaly obavy, že použití Google WebfontsGoogle jako "selhání údajů", proti němuž byly tyto právní předpisy namířeny , nejsou v souladu se zákony o ochraně údajů, a proto by mu hrozilo nákladné varování.

Tento stále rozšířený strach vrhá světlo na bohužel stále stále velký zmatek kolem GDPR . Samozřejmě ve prospěch právníků a internetových advokátních kanceláří. Máte-li obavy z používání Google Analytics S Google dokončil zpracování objednávek a poukazuje na použití písem – a v případě pochybností o souborech cookie – v zásadách ochrany osobních údajů je problém mimo hru.

Pokud se stále bojíte, můžete Zahrnout písma Google místně, tj.

Kromě toho byl výkon opakovaně odsuzován, což bylo údajně tak špatné, když si myslíte, že písma byla Google Načte. Není uvedeno, že Google má rychlou a extrémně stabilní serverovou architekturu a že stále existují záložní (viz výše). Můžete také načíst písma z jiné adresy URL, což se může stát současně s načítáním souborů z vlastního serveru. Ale opět jste závislí na Google.

Pozor: Doba nabíjení!

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ů, nepotřebují 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í, možná ne vhodný hosting za ním, a společnost nemá písmo CI, které absolutně musí být zahrnuto, vždy bych nastavil standard. Takže na systémových fontů, jak Amazon dělá s Arial Dělá. To dává smysl.

Samozřejmě, že to není o kilobajtech písem, které mají být načteny. Je to o těchto přichází na vrcholu, takže je třeba stáhnout dodatečně, a že server, který má dodat, může být jen oslabení. To nevypadá dobře a je ... Vyhnout.

Pozor: Licence!

Co je určitě třeba zvážit, jsou licence pro použitá písma. Pokud Písma Google nebo systémová písma, která jsou načtena počítačem uživatele, jsou na bezpečné straně. Pro všechny ostatní fonty, které používáte na webových stránkách, musíte se ujistit, že buď máte licenci na to - a to může rychle stát docela drahé - používat jej na vlastní webové stránky, nebo pokud je to Písmo zdarma což někdy vyvolává další obavy, když si myslíme, například, německé přehlásky a Eszett (ß).

Aby se zabránilo všem těmto problémům, jen jsem použil systémová písma nebo Písma Google. Pokud zákazník nyní absolutně chce své vlastní písmo, měli byste do výpočtu velkoryse zahrnout úsilí o toto velkoryse, 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 zde, například, co jsem vždycky najít opravdu špatné, při hledání správného názvu písma, aby bylo možné ovládat písmo pro zobrazení HTML tagy správně.

Zahrňte vlastní písma

typografii základy webfonts

Pomocí webových písem a/nebo vlastních písem, která jste vytvořili jako použitelná pro vaši stránku prostřednictvím nástroje, můžete rychle vyřešit řadu problémů pro vaši stránku. Není neobvyklé, že se vyskytují následující jevy:

  • Blikající písmo při načítání stránky (není neobvyklé, někdy uvidíte jiné písmo, dokud CSS přepíše ji s webovým písmem.
  • Delší doby načítání velmi složitými písmy (zřídka).
  • Častěji Rozostření písma, Zkreslení v důsledku nesprávného vykreslování (v některých systémech).

Chcete-li zobrazit požadované písmo na tolika 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 dvě varianty "WOFF". To je nezbytné, pokud chcete na své stránky zahrnout vlastní písma. Tyto formáty můžete používat zdarma Generátor webových písem Produkovat. Potom načtete všechny formáty písma do adresáře serveru a zahrnete 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') ('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');
}

Můžete vidět na tomto @font kód obličeje, který integruje písmo, jak složité je - a tím i jak náchylné k chybám.

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

Typografie a mobilní reprezentace

typografii 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ém displeji nebo smartphonu. A co záložní záznamy, systémové skripty mobilních telefonů? Pokud mám udělat mobilní stránku nebo optimalizovat ji na cestách, uložím první věc, kterou udělám, abych si stáhl webové písmo nebo písmo kvůli době načítání.

Je to strategické rozhodnutí, které samozřejmě musí být projednány se zákazníkem, ale nevidím jediný argument, který mluví za webové písmo nebo vlastní písmo v mobilní reprezentaci.

Samozřejmě, že na smartphonu nejsou k dispozici všechna systémová písma pro stolní počítač. Ale tady, podle mého názoru, nezáleží na tom, zda máte toto nebo to písmo pro systém Android. Je to všechno o rychlých informacích a dobré čitelnosti. To je určitě zaručeno na Android a Apple s jejich web-safe písma.

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 nabíjení mobilní strany, což je obzvláště důležité při volání na autobusové zastávce. Na druhou stranu 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 vybroušené webové písmo?

Podstatné 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 prohlížení adresy. A za to, že si nemyslím, že je třeba pro speciální písmo nebo webové písmo.

Bezpečná webová písma

Určitě byste měli zkontrolovat, zda jsou některá ze systémových písem vhodná pro váš projekt. Kompletní kolekci takzvaných webových css instrukcí pro systémová písma nebo web-safe 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ž ne všechny systémy mají stejné znakové sady nainstalovány můžete použít web-bezpečný blok nastavení CSS vybrat více znakových sad, které vypadají podobně a jsou nainstalovány na různých systémech, které podporujete Chci. Chcete-li použít jiná písma než předinstalovaná na css3, můžete použít Nastavení těchto webových písem Použít.

Závěr

Měli byste velmi pečlivě přemýšlet o tom, zda systémové písmo dělá totéž nebo dokonce lepší než webové písmo nebo vlastní písmo. Osvědčená písma, jako jsou Verdana, Arial, Trebuchet, Gruzie, Times New Roman mimo jiné je můžete používat bez váhání, protože jsou vždy snadno čitelné. A ještě jsme nemluvili o kvalitě textů, které samozřejmě hrají 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 re-šum písem, ale také uživatelskou přívětivost vašeho typografického návrhu, tj.

Pečlivě si rozmyslete, zda chcete použít vlastní nebo externí písmo nebo zda se spoléháte na standardní písma nebo systémová písma. Pokud si vyberete vlastní písmo, pak se divíte, jestli máte toto písmo nebo podobnou variantu s Písma Google lze použít. Nebo zda opravdu chcete integrovat písma ručně přes CSS a nahrát je na server ve všech formátech předem. Standardní písma, která má uživatel na počítači nebo smartphonu a která jsou načtena odtud, jsou prokázána a nepotřebují žádnou dobu nabíjení. To platí spíše pro mobilní nabíjení při prohlížení stránky na smartphonech.

Pro mě osobně, tam je obvykle není moc co říct pro použití externího písma nebo webové písmo. Je-li WordPress - Theme Google Fonty již na palubě, samozřejmě jsem použít. Protože jinak to musím celé zvorat. To opravdu nedává smysl.

Není-li jasné, zda Firemní identita vlastněná společností, je samostatný trik s písmem. A většina zákazníků na to nemá čas ani peníze. Mnoho silnic vede do Říma - ale nesprávné použití typografií na webových stránkách a v web designu pravděpodobně není. Se systémovými písmy, se standardními písmy, nádhernými vzory a skvělými webovými stránkami mohou být navrženy a vyplněny. Jejich použití je bezpečnější způsob, a že zůstane tak pro docela nějaký čas. Možná je to otázka vkusu, ale možná je to nejrozumnější přístup k psaní 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 – Web designer 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 sám. Od roku 2005 bloggerů na různá témata na různých vlastních blogů. V letech 2007 a 2008 na spiegelu ONLINE se podílel na zahájení einestages.de v oddělení programování/editace švů. Později na SPIEGEL marketingu Kvality 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 * .