Má tento typ Make My Design Look Fat?

Nic nemůže zničit design, jako typografie, která se nehodí. Ať už je příliš velká (nebo příliš malá), špatné měřítko je velkým problémem.

Je to problém pro více návrhů, než si myslíte. Příliš často navštěvujete webovou stránku, kde se typ vykresluje krásně na plošném prohlížeči, jen aby se později z telefonu vrátil a zjistil, že je obtížné číst. Stává se to pořád.

Problém je v tom, že typ nebyl pro každé zařízení skutečně změřen. Je to problém, který lze zcela vyhnout, když zvážíte typografickou škálu projektů.

Co je typografická stupnice?

Vizuální typografická stupnice zapouzdřuje velikosti, prostor a proporce typových prvků relativně vůči jinému v projektu. To zahrnuje vše od textu textu hlavního těla po nadpisy, podkapitoly, popisky a další textové prvky.

Měřítko pomáhá určit velikost a umístění textových prvků ve vztahu k sobě navzájem. Zejména v případě webového designu vizuální měřítko často odpovídá značkám ve vašem CSS (např. H1, h2, h3, p atd.).

Typová stupnice vám pomáhá vytvářet v designu harmonii a rytmus. Také vás chrání před stylovými potížemi, protože textové prvky odpovídají prvkům CSS, takže každá část návrhu používá stejné prvky a konzistenci.

Měřítko by mělo být založeno na velikosti textového textu. (Vždy nastavte písmo a velikost pro první). Pak vytvořte měřítko kolem této hlavní typografie. Nejste si jisti, kde začít? Google má a solidní doporučení :

1. Použijte základní velikost písma 16 pixelů CSS. Upravte velikost podle vlastností použitého písma.
2. Pro definování typografické stupnice použijte rozměry odpovídající velikosti základny.
3. Text vyžaduje svislý prostor mezi znaky; obecným doporučením je použití výchozí výšky řádku prohlížeče 1,2 em.
4. Omezit počet použitých písem a typografickou stupnici.

Vytvořte harmonii a rytmus

Typová stupnice je více než jen pomáhat uživatelům pohybovat se kopií, vytváří harmonii a rytmus pro tok textu. To je důležité na jakémkoli zařízení.

Takže kde začínáte?

UX Matters má některé z nejlepších výzkumů k dispozici na minimum velikost textu podle zařízení . Mějte na paměti, že se jedná o minimální velikosti a jak se velikost textů těla nadále zvyšuje (stejně jako řádkování), měli byste silně uvažovat o větších rozměrech bodů. Steven Hoober doporučuje začít o minimálně 40 procent větší než doporučené minima. Dále můžete zvýšit styly obsahu až o 80 procent nad minimem, ale měli byste být opatrní i s mimořádně velkým typem.

Jakmile je nastavena velikost těla, můžete určit, jak podporovat velikost textových prvků. Je to výtvarné umění a oční test je často dobrým místem pro začátek.

Neexistuje téměř taková věc jako nadpis, který je příliš velký. Řekněte, co potřebujete říct a velikost, aby bylo možné měnit slova v mezerníku. Dvojlinkový nadpis se bude cítit větší než jednorázový, i když text je přesně stejný.

Nejjednodušší způsob, jak přemýšlet o zvětšování titulků a dalších větších testovacích prvků, pracuje v procentech na základě textu těla. Zatímco každý návrhář má jiný výchozí bod, o 250 procent větší než text těla je dobrým terénem pro titulky; 150 procent pro h2, 75 procent pro h3 a 50 procent pro prvky, jako jsou blokové kotace. (Toto není pravidlo, jen výchozí bod.)

Zde je důvod, proč jsou důležité procentní podíly, spíše než nastavené velikosti: Jakmile nastavíte velikost typu těla, procentní podíly upraví odpovídající velikosti bez ohledu na velikost obrazovky. Každý typový prvek je relativní k typu těla.

Pokyny pro charakter a rozestup

Existuje několik dalších pokynů, které návrháři vypadají dobře, pokud jde o typ na obrazovce. Pokud jde o rozestup, jedním z palcových pravidel je podívat se na znaky na řádku, aby byla zajištěna čitelnost.

• Desktop a velké zařízení: 60 až 75 znaků na řádek
• Telefony a malé zařízení: 35 až 40 znaků na řádek

Všimněte si, že čitelnost na menších obrazovkách je založena na tom, že má méně znaků (větší text).

Stejná myšlenka platí i pro mezery. Potřebujete více místa mezi řádky textu, pokud je velikost obrazovky omezena, aby bylo uživatelům snadnější číst a skenovat obsah. Zvažte přidání o 25 procent více řádkování na menších zařízeních než u desktopové typografie.

Dodatečná velikost a rozteč pomáhají ulehčit tomu, že uživatelé mohou cítit, když se snaží číst na menších zařízeních. Vzhledem k tomu, že plátno je malé, je průtok čtenářů a čitelnost zásadní pro to, aby se uživatelé mohli posouvat.

Tipy, jak začít

Existuje spousta způsobů, jak vytvořit typografickou měřítku a zajistit, aby text nevytvářel váš design jako tlustý. Jak to děláte, pravděpodobně závisí na vaší úrovni komfortu s kódem a vývojem vedle designu.

Nejlepším řešením je použití reagujícího návrhu s mediálními dotazy. Toto je volba návrháře a vývojáře, která zajistí nejvyšší úroveň kontroly nad specifikacemi textu. (Další informace naleznete v následujících doporučeních společnosti Google.)

Další cestou je navrhnout různé verze. Zatímco toto je poměrně zastaralý koncept, stále existují místa pro mobilní adresy URL a adresy URL pro vaše webové stránky. Nedoporučuje se to ve většině případů, ale u některých webových stránek, kde je design dramaticky odlišný nebo uživatelé zažívají různé věci, může to být také možnost.

Možnost snadné je začít s tématem pro vaše webové stránky. Jen se ujistěte, že máte možnost plně reagovat. Když používáte vysoce citlivé téma, většina z hádky je vyňata z toho pro vás. Vše, o čem opravdu myslíte, je velikost textu těla. Jen se ujistěte, že jste zkontrolovali vše, abyste se ujistili, že velikost mobilního typu odpovídá vašim standardům.

3 nástroje pro vytvoření měřítka typů

K dispozici je řada nástrojů, které vám pomohou vidět přesný dopad vizuální typografické stupnice. Zde jsou některé z nejlepších a nejvíce uživatelsky přívětivých možností.

• Zadejte měřítko : Zadejte text a hrajte s možnostmi, jako je velikost, měřítko a písmo přímo na obrazovce; grad CSS nebo upravte kód přímo z nástroje;
• Modulární měřítko : Váha funguje jako pravidlo, které pomáhá určit velikosti pro typ; poté stáhněte výsledky jako plugin Sass nebo JS nebo je zobrazte na obrazovce;
• Zlatá poměrná kalkulačka : Nástroj optimalizuje velikost, výšku čáry, šířku a znaky na řádku pomocí zlatého poměru

Závěr

Správná typografická měřítka bude váš design vypadat vykreslený a šikovný. Jedná se o přidanou harmonii, kterou uživatelé nerozumí, ale přispívají k celkové čitelnosti a použitelnosti.

Je pravděpodobné, že váha je vypnutá, pokud návrh "prostě nevypadá správně". Nesprávně dimenzovaný typ může být těžké přesně určit, ale často je místo, kde se můžete podívat, když se něco o návrhu nevyrovná. Hrajte s několika různými možnostmi, než se usadíte na něco, a nezapomeňte, že trend je právě pro typ, který je o něco větší než v minulosti.

• ← Seznamte se s člověkem za komiksem Sans
• WeTransfer odhaluje novou identitu značky a uživatelské rozhraní →