Doporučené postupy typografie webu pro moderní web

Průvodce responzivní webovou typografií zahrnující všechny osvědčené postupy & pravidla velikosti písma ve stylu písma, která zajistí, že obsah vašich stránek bude čitelný & radost vidět.


Osvědčené postupy pro typografii

Malíři mají štětce. Sochaři mají svou hlínu. Weboví návrháři mají svá… písma? Jak nyní Oliver Richenstein skvěle napsané: „95% informací na webu je psaný jazyk.“ Po pečlivém zvážení, které jste věnovali vlastní grafice, ikonám, pěkným nabídkám a čistým rozhraním na vašem webu, by bylo hříchem, kdybych se leskl nad životně důležitou součástí webové typografie.

Nemějte obavy – nemusíte být mistrovským designérem, abyste vytvořili elegantní a efektivní text. Dodržováním některých spolehlivých pokynů a zásad vaše webová typografie zprostředkuje touhu uživatelů po informacích, které jsou snadno čitelné a promyšleně navrženy..

Vytvoření vizuální hierarchie

Nejdůležitějším cílem dobré webové typografie je vytvoření a hierarchie obsahu, který vizuálně teče z jednoho prvku na druhý. Správné rozlišení mezi nadpisem, podtitulkem a textem těla, řadou hmotností a stylů písma a dostatečným mezerou mezi bloky textu je vše, co podporuje zážitek ze čtení bez námahy.

Příklad vizuální hierarchie typografie

Budování silného těla

Vaším prvním předmětem podnikání je zničit hlavní stránky vašeho webu Tělo text, protože takto tráví návštěvníci většinu času čtením. Vaším cílem je vytvořit text, který přirozeně teče přes velké odstavce a inspiruje zdravý rytmus pro dlouhé úseky čtení.

  • Nejběžnější velikost písma pro text těla je 16px—Nebo ještě lepší, 1em (více o tom později).
  • Vyvarujte se zarovnání textu na střed, protože nerovnoměrné okraje na obou stranách způsobí přitažlivý pohled. Místo toho nastavte doleva a doprava okraj kontejneru na text auto dosáhnout žádoucího účinku.
  • Ospravedlněno text funguje skvěle pro noviny, nikoli pro webové stránky. Povaha rozvržení tekutin může vytvořit nepředvídatelné mezery mezi slovy.
  • Vybrat nízký kontrast fonty nad vysokými. Písma jako Didot skvěle pracujte pro titulky jumbo nebo pro velkoformátový tisk, ale jeho vysoký kontrast mezi tlustými a tenkými čarami tahů způsobuje obtížné čtení v malých velikostech na webových stránkách.
  • Dávejte pozor na čitelnost. U mnoha bezpatkových písem vypadají velká písmena „I“ a malá písmena „l“ přesně stejná, což může vést ke zbytečnému zmatku..
  • Optimální line-height textu odstavce je mezi 1,25–1,5 × velikost písma. Upravte odpovídajícím způsobem podle zvoleného písma.

Nadpisy pro úspěch

Pro lepší nebo horší bude většina čtenářů pravděpodobně procházet vaše stránky Nadpisy aniž by se obtěžoval hlavním textem. Proto je důležité upoutat jejich pozornost a vyzvat k dalšímu čtení tím, že zajistí, že typografie vašich titulků je pozoruhodná.

  • Průměrná velikost písma pro text Nadpis je někde kolem 36 pixelů—Nebo ještě lépe kolem 2.25em (k tomu se dostaneme).
  • Pozornost by měla vždy směřovat na nadpis před tělem. Ujistěte se, že text Nadpis není v těle přemožen příliš silnou hmotností písma.
  • Zajistěte, aby vaše titulky splňovaly očekávání čtenářů. Značně větší text s dostatečným odstupem mezi jeho podřízeným odstavcem znamená změnu předmětu, zatímco menší nadpisy mnohem blíže k odstavcům znamenají, že obsah souvisí.
  • V případě, že by váš nadpis měl zalomit další řádek, uvědomte si, že je optimální line-height pro položky je méně než to, co je pro text těla.

Vesmír mezi

Velikost prostoru oddělujícího prvky vaší stránky hodně říká o jejich vzájemném vztahu a je to princip designu, který nelze přehlédnout. Dominantní záhlaví obklopená bílým mořem poskytují mnohem odlišnější kontext než menší záhlaví připojená těsně k odstavcům (pamatujte, že stavíme vizuální hierarchie).

Obecně je lepší se mýlit na straně toho, že má příliš mnoho prázdného prostoru než málo. V moderním webu se dává přednost čistým rozvržením s velkorysým prázdným prostorem.

Padající v řadě

Představte si, že čte text na svém 27palcovém monitoru s vysokým rozlišením, který se táhne napříč přes oba okraje obrazovky. Vaše oči by byly unavené po pouhém jednom odstavci!

Je důležité, aby byl každý řádek hlavního textu omezen na určitý počet znaků, aby oči zůstaly soustředěny na centrální bod. Populární shoda je, že toto kouzelné měřítko pro stolní počítače je 60–75 znaků. Pro mobilní obrazovky, tam, kde se chceme vyhnout šilhajícím očím a příliš zhuštěnému textu, toto číslo sedí kolem 35–40 znaků na řádek.

Vyklopení měřítka

Hodně bylo napsáno na téma škálování mezi velikostí písma Body a Heading. Co je to za perfektní velikost H2, pokud je text vašeho těla, řekněme, 1em? Určování nejestetičtějších proporcí mezi textem Těla a položkami H1 – H6 je naštěstí něco, co již mnoho typografů dekódovalo. Tyto matematické proporce se musí také přizpůsobit na základě velikosti obrazovky uživatele.

Návrhář Jason Pamental poskytuje užitečný graf protože věří, že jsou nejoptimálnější velikosti písma napříč různými mediálními zařízeními – a já s ním spíše souhlasím. V podstatě, i když ideální velikost H1 na ploše může být 3 × velikost těla, na mobilní obrazovce se to bude zdát příliš přehnané – proto musí být zmenšeno, aby se přizpůsobilo menší pozorovací oblasti.

Graf optimálních velikostí písma napříč různými mediálními zařízeními

RYCHLÁ POZNÁMKA: Jak můžete zjistit, zda máte dobrou vizuální hierarchii? Mžourat na obrazovku dokud nebude celý text rozmazaný. Pokud se rozvržení jeví jako amorfní blob bez rozlišení mezi sekcemi, vaše hierarchie může selhat. Pokud však můžete snadno rozeznat oddělení mezi bloky textu, nadpisy a jasně vědět, kam by se měly oči pohybovat, máte skvělý tvar!

Udržování citlivosti textu

Responzivní webový design je v dnešní době nezbytnou praxí – zejména proto, že stále více lidí využívá mobilní zařízení jako svůj primární prostředek k procházení Internetu. Zatímco navrhování s procenty namísto pixelů způsobilo převrat ve způsobu, jakým se obrázky a okraje přizpůsobují šířce tekutin, responzivní webová typografie bohužel zůstala tvrdším vajíčkem na crack.

Optimalizace velikostí písma napříč více zařízeními může být ohromující, protože musíte procházet několika mediálními dotazy, abyste mohli cílit veškerý text na vašem webu. Díky rychlému přizpůsobení vaší zvolené jednotce však snáze zjistíte správné velikosti písma, které lze použít pro jakýkoli typ obrazovky.

Ems přes pixely

Chcete-li zjednodušit typografii svých stránek, vybočte pixel a začněte používat ems. EMS umožňují snazší pochopení měřítka mezi velikostmi písma vašeho webu a jejich menší jednotky jsou lépe zvládnutelné než dvojciferná čísla pixelů.

Ještě důležitější je, že u ems je vše ve vztahu k nadřazenému kontejneru. Pokud nastavíte line-height z kontejneru na 1,5 m, pak i kdybyste změnili velikost písma tohoto kontejneru, výška řádku zůstane ve správném poměru. U pixelů byste museli neustále upravovat vlastnost řádku výšky kontejneru pro každou jednotlivou změnu velikosti písma, aby byla zachována vizuální konzistence.

Tento princip platí okraj, polstrování, mezery mezi písmeny, a většinu ostatních stylů, které aplikujete na text svých stránek. Už žádné pohrávání s pixely na vycpávce vašeho obsahu pro každý dotaz na média – stačí nastavit počáteční stav v ems a automaticky se upraví podle původních proporcí!

Používání Ems

První věc, kterou musíte udělat, je nastavit základní odkaz na velikost písma vašeho webu. Ve vašem styl, zadejte toto:

tělo {
velikost písma: 100%;
}

Tím se stanoví relativní velikost písma obsahu vašeho webu 1em, které většina prohlížečů interpretuje jako 16px. Nyní jsou všechny vaše velikosti nadpisů – 2,25m, 1,5em atd. – přímé násobky základní linie 1em.

DŮLEŽITÁ POZNÁMKA: Ems jsou kaskádování– význam jejich velikosti je relativní k stanovené hodnotě jeho rodiče. Například: Pokud nastavíte velikost písma vašeho těla na 1,25 m a potom velikost písma podřízeného kontejneru na 1,25 m, nebudou mít tato dvě písma stejnou velikost! Spíše bude text podřízeného kontejneru 1,25 × původní nadřazená velikost 1,25.

Další tipy pro skvělou webovou typografii

Zde je několik dalších tipů pro skvělou typografii webu:

Nepřehánějte to

Měli byste omezit typografii svého webu na 2–3 písma nejvíce. Obvykle by to bylo písmo pro vaše záhlaví, písmo pro váš hlavní text a v případě potřeby písmo pro podtitul. Použití příliš mnoha písem může vytvořit chaotický a rozostřený vzhled. Jak je vysvětleno v následujícím bodě, může být ovlivněna také doba načítání vašeho webu.

Vložte pouze to, co potřebujete

Zvažte pouze to, co je pro vaše stránky nejpotřebnější, a zbytek nechte mimo. Pokud víte, že budete potřebovat pravidelný, tučně a kurzíva styl pro dané písmo, pak vložit pouze ty možnosti a vyloučit tenký, světlo a Černá styly. Načtení více stylů, než je nutné, může mít velký dopad na zdroje vašeho webu, protože každý jednotlivý styl je samostatným požadavkem serveru.

Pokud nechcete omezit svou kreativitu během fáze návrhu, pokračujte a vložte vše; jen nezapomeňte odstranit nadbytečné styly, než se váš web objeví.

Pokud to nemůžete přečíst, nepoužívejte jej

Tohle je biggie. Zatímco kvetoucí ručně psané písmo může být lákavé použít, pokud existuje i nejmenší zmatek, zda je to „g“ nebo „y“, pak je nepoužívejte! Pro čtenáře není nic frustrujícího, než se snažit rozluštit nečitelné písmo.

Upřednostňujte skutečný text před „Lorem Ipsum“

Každý návrhář se spoléhá lorem ipsum fiktivní text pro vyplnění prázdných oblastí obsahu při plánování rozvržení projektu. Možná vás však překvapí, jak velký dopad může mít skutečný obsah na vzhled a dojem vaší typografie. „Lorem ipsum“ je zcela bez emocí a intelektuálně dutý; neposkytuje žádné skutečné ponětí, jak budou vaše slova a vaše osobnost vyjádřeny prostřednictvím písma. Proto před připojením skutečného obsahu na svůj web připojte co nejdříve.

Kontrast s pozadí

Tmavé písmo na bílém pozadí bude vždy poskytovat nejlepší čitelnost. V dnešní době se také stává populární bílý text proti tmavému nebo rozmazanému obrazu. Jen mějte na paměti, že vaše pozadí není příliš složité nebo podrobné, což přemoží text v popředí.

Špatný typografický příklad textu na pozadí textuPříklad špatné typografické praxe používající pozadí „text přes text“.

Párování písem – jako přitahuje jako

Spárování písem se zcela odlišnými osobnostmi vyvolá zmatené signály. Oba mohou být stylisticky kontrastní, ale emocionálně by měli sloužit stejné zprávě.

Párování písem – Ponechte si je v rodině

Nejjednodušší řešení je často nejlepší. Někdy nejlepší párování pochází z použití variací (serif, alternativní váha, deska) v rámci stejné rodiny fontů.

Hypertextové odkazy

Obvyklá a očekávaná praxe je zdůraznit odkazy a odstraňte podtržení na událostech přechodu. Při této trase se ujistěte, že je zvýrazněný text kurzívou nebo tučně spíše než podtržené, aby nedošlo k záměně.

V těchto dnech je však ukotvený text namísto toho obvykle barevný, s přechodným efektem, který se používá, když se zobrazí kurzor. Z hlediska designu je to nepochybně lepší volba – ale nezapomeňte ji udržet v souladu!

Některé CSS vědět

To ovlivňuje vzdálenost mezi písmeny. Užitečné pro zdůraznění titulků.

mezery mezi písmeny: x.xxem;

To ovlivňuje vzdálenost mezi slovy:

mezery mezi slovy: x.xxem;

Toto poskytuje alternativu k all-cap pro zdůraznění. Užitečné také pro zkratky.

font-variant: small-caps;

Tím CAPITALIZUJETE VŠECHNO VAŠE TEXTY.

textová transformace: velká písmena;

Tím se kapitalizuje první písmeno textu.

textová transformace: velká písmena;

Tím se přeškrtne text.

text-dekorace: line-through;

To zlepšuje zobrazování písem v moderních prohlížečích:

text-rendering: optimizeLegibility

Porozumění typům souborů písem

Je vhodné vložit několik typů souborů, aby se zajistilo správné načtení písem do široké škály prohlížečů. To jsou ty, o které byste se měli nejvíce zajímat:

TrueType

TTF je nejběžnějším formátem pro Mac a Windows a je podporován ve všech hlavních prohlížečích.

OpenType

OTF je také široce podporován a umožňuje doplňky, jako jsou malá písmena a alternativní znaky, aniž by bylo nutné vkládat samostatné písmo.

Vložený otevřený typ

EOT je podporován pouze Internet Explorer – a pokud se obáváte uživatelů ve starých verzích IE, je asi nejlepší nechat tento.

Web Otevřít formát písma

WOFF – a jeho nástupce, WOFF2 – jsou novými králi ve městě. Jejich podpora ve velkých prohlížečích a schopnost komprimovat z nich činí moderní typ souboru výběru.

Potřebujete převést typ souboru?

Pravděpodobně se dostanete do situace, kdy máte pouze jeden typ souboru písem a je třeba jej nějakým způsobem převést na jiný. FontSquirrel a Font2Web nabízet online nástroje, které to udělají.

Závěr

Už jste to věděli obsah je nejdůležitějším aspektem vašeho webu. Dobře vytvořený obsah si zaslouží dobře vytvořenou typografii; nezklamejte návštěvníky webu textem, který je obtížně čitelný nebo matoucí ve struktuře. S pečlivě naplánovanou vizuální hierarchií, která dodržuje typografické osvědčené postupy, můžete také kreativně prezentovat své kreativní myšlenky. Šťastné psaní!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map