Klíčovou součástí každého návrhu webových stránek je typ. Výběr písem, velikostí a barev může být velkou částí toho, jak vytyčujete své stránky. Stejně důležitá jako samotná písmena, je vzdálenost mezi těmito písmeny a zvláště vedením použitým v blocích textu.

Čím více typů používáte, tím důležitější je předpoklad. Za fontem a velikostí je jedním z klíčových faktorů, které je třeba vzít v úvahu při pohledu na to, jak čitelný typ.

Přední specifikace, které používáte pro logo nebo úvodní obrazovku, mohou být velmi odlišné od předních typů použitých pro typ příspěvku v blogu.

Jiné konstrukční prvky mají také vliv na to, jak byste měli používat vedoucí. Velikost typu, šířka sloupců a dokonce i barva pozadí vám pomohou učinit moudré vedoucí volby.

Jak používáte přední část nejvíce pozoruhodně přichází do hry pro velké bloky textu.

Co vede?

Vedoucí - výrazné vedení - je vzdálenost mezi řádky typu. Vedení bylo tradičně měřeno v bodech (stejně jako fonty). Termín vznikl starými písmeny, kdy byl typ nastaven ručně. Olověné proužky byly umístěny mezi řádky typu, aby bylo vše v dokonalém uspořádání.

Od nástupu digitálního publikování je vedení často zaměňováno s výškou čáry. Výška řádku je celá mezera z jedné základní linie - pomyslná rovina, na které se nacházejí písmena jako 'a', 'x' a 'n' - na další. Vedoucí je naopak prostor od dolní části písmena na jednom řádku až po vrchol písmena na další: je to doslova výška řádku mínus výška textu.

V digitální typografii, zejména při webových typografiích, jsou výrazy vedoucí a výška řádků často používány zaměnitelně. Například v CSS neexistuje žádná přední hodnota, místo toho použijeme výšku řádku.

Vzhledem k tomu, že vedení bylo kdysi fyzickou, měřitelnou hodnotou, nyní se nejčastěji používá jako koncept: vizuální dojem prostoru mezi dvěma liniemi.

Jak může být veden v bloku textu, může mít vliv na čitelnost. Existuje jemná čára mezi typem, který je příliš blízko a je příliš daleko od sebe. V očích čtenáře může být extrémně těžké. Vedoucí je všechno o změně hustoty typu. Klíčovým slovem je pochopení toho, jaká zpráva chcete, aby váš typ předával a odpovídajícím způsobem vedl.

Žádné dokonalé řešení

Facebook

Neexistuje žádný dokonalý kouzelný vzorec, který by určil, kolik vedení budete potřebovat. Jde o kombinaci faktorů - velikost, barva, požadovaný efekt a nejdůležitější čitelnost.

Obecně platí, že výchozí bod pro vedení je obvykle stejný jako velikost písma, kterou používáte. Některý software, zvláště webové prohlížeče, to trochu dále a nastaví výchozí vedení o něco vyšší než velikost bodu, obvykle s výchozím nastavením 120 procent. Takže bloky, které obsahují 10bodový text, by měly mít 12bodový náskok.

Tato filozofie funguje skvěle pro velké bloky textu, jako jsou příspěvky na blogy, které používají běžné písma bez extravagantních ascenders, descenders nebo ligatures na bledém, neutrálním barevném pozadí (myslím, že černý typ na bílé nebo béžové). Zachováváte pocit, že všechny řádky textu přicházejí dohromady a přidávají se v dostatečném prostoru tak, aby bylo snadné na oči.

Bloky textu jsou nejsnadněji čitelné, když je vodítko širší než rozteč slov. Tento poměr pomůže okem pohybovat po stránce a potom dolů, a to podle přirozeného průtoku od tmy ke světle.

Tato "normální" výška řádku se bude také cítit jako vhodná pro věci, které vyžadují hodně čtení. Je to standard používaný mnoha webovými stránkami a tištěnými publikacemi.

Udržujte je pevně

Branch

Tažné nebo negativní vedoucí se vyskytují, když jsou čáry typu blíže než velikost bodu daného typu. Například pokud je váš typ rozměrován na 14 bodů, všechny vedoucí pod 14 body by byly považovány za těsné, i když se nezdá příliš blízko na obrazovce.

Těsné vedení může vytvořit pocit omezení. Může se také použít k vytvoření chaosu. Na druhou stranu, přísnější vedení může být použito jako metoda, která spojuje bity typu nebo vytváří zřetelný organizační smysl. Po mnoho let v tisku a on-line zpravodajské organizace využily některé z nejpřísnějších specifikací pro typ těla. V tištěné podobě to šetřilo prostor; on-line je udržovat smysl pro důvěryhodnost a vzhled spojený s organizacemi a jejich tiskovými partnery.

Regenerate Music co

Při nastavování specifikací výšky čáry si přemýšlejte o případě a písmenách, které sedí nad a pod výškou x. Při práci na všech čepicích nejsou žádné vzestupné nebo sestupné, takže byste mohli považovat za nezbytné utažení řádkování, jako je například technika používaná společností Regenerate Music Co. Totéž platí o fontech, které mají kratší vzestupy a sestupy.

Typ, který se používá ve větších velikostech, jako jsou například titulky nebo loga, může někdy těžit i z přísnějších předností.

Uvolnit se

Onst Creative

Volné nebo pozitivní vedoucí je přidání mezery tak, aby přední strana byla větší než velikost bodu použitého pro typ. Například pokud je váš typ rozměrován na 14 bodů, jakýkoliv prostor 15 bodů nebo více by byl považován za volný. U některých typů písma nemusí být rozteč na obrazovce uvolněná, i když je takto klasifikována.

Volné vedení může mít pocit, že stránka je světlá a vzdušná. Je to časově prověřený trik pro návrhářů, jenž přidává vodítko, když se typ cítí jako příliš hustý nebo těžký na stránce. Vedoucí, které je příliš volné, může být obtížné číst a sledovat, jestliže je používáno mnoho textu; to je nejlépe vyhrazeno pro pár slov.

Alistapart

Většina návrhářů směřuje k tomu, aby používaly volněji pro hlavní typ těla na blogy a pro jiné velké bloky textu. Volné, ale ne příliš volné vodítko lze snadno číst a sledovat. Může se stát, že menší text se objeví poněkud větší než je a pomůže vyvážit extrémně dlouhé řádky textu. Uvědomte si, že použití předních stránek na blogu A List Apart, větší písmo pro tělo používá jednu speku, zatímco menší typ v pravém postranním panelu je mnohem volnější, což usnadňuje menší typ a vyrovnává je s ostatními prvky na stránce .

Mnoho designérů se také rozhodlo pro volnější vedení při použití písmen bez patky. To může být obzvláště dobrá volba při práci s fonty s přehnanou prosperitou nebo ligaturou. Zvláštní prostor dovoluje psacímu prostoru dýchat bez překrytí.

The Bloggess

Volné vedení je také důležité, pokud hodláte použít spoustu odvážných, barevných typů nebo písem s těžkými váhami. Blog Bloggess využívá kombinaci barvy, tučné a čepice v celém webu, což pozitivně vede k nezbytnému čitelnosti. V tomto případě volné vedení také pomáhá přitáhnout oko k důležitým částí textu, které jsou barevné a tučné.

Barvy na pozadí a přední

Barva a kontrast jsou zvláště důležité při výběru výšky čáry.

Na tmavém pozadí můžete použít trochu víc, než byste mohli na světlejším pozadí pomáhat zmírnit pocit hromadné hmotnosti. Tmavé barvy mohou přidat váhu vašemu designu, neboť mohou být těsně vedoucí, ale zvolit si použití jednoho nebo druhého, můžete vytvořit větší rovnováhu.

Totéž platí při použití typu barvy. Barvy, jiné než černé a tmavé šedé, mohou přidat různé množství váhy do vašeho návrhu. V závislosti na barvě pozadí může být některý text dokonce podobný krvácení na pozadí - k tomu dochází u některých lidí zejména při čtení červených písmen na bílém pozadí. Přidání vedoucího může pomoci zvýšit čitelnost těchto textů.

Změna šířky a vedení

HappyCog

Odpovědný design vede k tomu, že přední (a typ obecně) je ještě důležitější.

S různými rozlišeními a tvary obrazovky je třeba specifikovat specifikace, aby se zajistilo, že lokalita zůstane čitelná. Jakmile se text zmenšuje (nebo roste) na obrazovce, musí se přední strana přizpůsobit.

Nezapomeňte, že při provádění těchto úprav si pamatujte rozměry výšky čáry. Protože typ bude menší pro mobilní a další zařízení s malou obrazovkou. Zvažte zvýšení výšky linky o 20 procent oproti tomu, co jste použili pro návrh v plném rozsahu. Zvětšené vedení by mělo pomoci čitelnost, když je spárována s menším typem.

Takže při určování předních specifikací pro vaše stránky budete potřebovat několik sad prahových hodnot: Jeden pro základní návrh webových stránek, jeden pro zařízení střední velikosti, jako iPad a další tablety, a jeden pro mobilní telefony. Každá z nich může mít jinou množinu poměrů používaných pro výšku textu na řádku.

Závěr

Nyní, když jste vyzbrojeni řadou špičkových tipů a nástrojů, odkud začnete?

Neexistuje žádný kontrolní seznam. Vaše nejlepší sázka je podívat se na typ a uvidíte, jak to cítí (použijte dobrý staromódní oční test). Nechte to chvíli sedět a později se k němu znovu vrátíte. Stále máte pocit, že text je stejný? Má pocit, že se dostanete do souladu s pocit, který máte na mysli pro návrh vašeho webu?

Všimněte si, že je to nejefektivnější, pokud textový blok obsahuje skutečné kopírování místo textů zástupného symbolu. Chcete získat realistický pohled a volby zástupného symbolu někdy obsahují lichá čísla písmen, která se nepoužívají vše, co je často v reálné kopii.

Hraj si s tím. Ukažte svůj textový návrh někomu jinému na další názory. Zeptejte se je, jak se o tom cítí.

Rovněž nezapomeňte párovat textový blok se zbývajícími prvky návrhu. To nemusí být první krok, ale někdy to může znamenat neúmyslné účinky. Ujistěte se, že znovu projde oční test.