Jednoduchý průvodce pro citlivou typografii
Převážná většina článků, které se zabývají citlivým designem, se zaměřuje na dvě hlavní oblasti: kapalinu, flexibilní síť a tekuté, flexibilní obrazy. To, o čem mnozí z nich nemluví, je typografie.
Přesto je pro většinu webových stránek nejdůležitějším prvkem text, obsah .
V případě webů, kde jsou primární obsahy obrázky nebo videa, je typ citlivý méně důležitý, ale stále by se nemělo přehlížet.
Dobrou zprávou je, že citlivá typografie není obtížně dosažitelná. Stačí, abychom si uvědomili, jak náš typ by měl reagovat na změny ve velikosti obrazovky, a poté tyto změny provést.
Principy citlivého typu
Existují dva hlavní principy pro vytváření efektivní citlivé typografie. Prvním typem lze měnit velikost. To znamená typ, který se mění nejen podle velikosti obrazovky, ale je také měnitelný uživateli.
Druhá je optimalizovaná délka čáry, která udržuje čitelnost. To znamená, že pro některé obrazovky, zachování obsahu oblasti menší a délky čáry kratší, má větší smysl, i když obsah teoreticky by mohl táhnout širší.
Změnitelný typ pomocí rems
Většina návrhářů používá buď pixely nebo ems pro dimenzování jejich typu. Ems jsou lepší volbou, protože umožňují uživatelům změnit velikost jejich prohlížeče. Ale ems jsou relativní k rodičovskému prvku, což znamená, že jsou složitější než pixely, což je pouze složené v citlivých vzorů, kde jsou více velikostí a vztahů, které je třeba sledovat.
Rems nabízí lepší alternativu k ems. Pracují téměř stejným způsobem, s výjimkou jednoho klíčového rozdílu: Jednotky rem jsou relativní html element, spíše než jednotlivé rodičovské prvky. Tím se udržuje správné dimenzování vašeho typu mnohem jednodušší.
Jednotky Rem jsou nyní podporovány ve všech hlavních moderních prohlížečích, včetně verze Opera 11.6 a IE9. Přestože byste chtěli zahrnout záložní soubory pro starší prohlížeče, existuje dostatečně široká podpora pro rems k jejich použití.
Vzhledem k tomu, že budete používat velikosti jednotky pro dimenzování, ujistěte se, že použijete reset na váš html a nikoli vaše body živel. Tak to by mělo vypadat takto:
html { font-size:100%; }
Nyní se vaší jednotky pro obnovu použijí na výchozí velikost písma pro zařízení.
Poté budete muset určit velikost písma pro každou velikost zobrazení. Doporučuji experimentovat se skutečnými velikostmi písma na různých zařízeních, abyste zjistili, co vypadá nejlépe. Je to do značné míry závislé na vybraných písmech, stejně jako na celkovém designu.
Budete pravděpodobně chtít zadat několik velikostí písma založených na různých velikostech obrazovky, což je docela přímočará věc. Jako příklad by vaše CSS mohlo vypadat takto:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Je to zjednodušený kód tohoto článku, ale dává vám výchozí bod. Možná si všimnete, že pro nejmenší obrazovky je určena mírně větší velikost písma. Je to proto, že větší velikosti písma jsou obecně snadněji čitelné na malých obrazovkách.
Samozřejmě budete chtít provést další specifikace pro věci jako vaše h1 prvky a podobně. Velmi doporučuji používat nástroj jako Webový vzor písma abyste viděli, jak bude váš typ skutečně vypadat.
Zachování optimálních délkových čar
Zatímco měnitelný typ je poměrně přímočarý koncept, zachování správné délky čáry v několika zařízeních se trochu trýslí. Bylo poměrně málo diskuse o tom, jaká je optimální délka čáry pro čitelnost, ale podle toho, co je Baymard Institute , konsensus se zdá být někde mezi 50 a 75 znaky na řádek.
Také doporučují použití kontejneru s pevnou šířkou pro váš obsah, který však poruší účel citlivé konstrukce, takže potřebujeme přistupovat trochu jinak, pokud chceme zachovat schopnost reagovat s optimalizovanými délkami čáry.
Za prvé, podívejte se na různé velikosti obrazovky, které budete navrhovat a zjistěte, jakou velikost písma byste měli použít, abyste získali zhruba 50 znaků na řádku. U velmi malých obrazovek může být nutné zachovat čitelnou velikost písma pod 50 znaků na řádku, ale 50 by mělo být cílem. To nám dává dobrý výchozí bod pro velikost písma.
Měli bychom také nastavit maximální šířky (nebo body zlomu) pro oblasti s obsahem textu. Podívejte se na velikost použitého typu pro danou velikost obrazovky a poté zjistěte šířku kontejneru obsahu, pokud máte zhruba 75 znaků na řádek. To nebude přesné, pokud nepoužíváte monospace písmo, ale měli byste být schopni přijít s průměrem velmi snadno. To se stává naší maximální šířkou kontejneru.
Řekněme, že výchozí velikost písma pro dané zařízení je 16 pixelů a chcete, aby velikost písma byla 20 pixelů (řekněme, že pro tento příklad používáme písmo typu serif, jako je například Droid Serif). To znamená, že zadáte typ, který má být 1.25rem. Při této velikosti budete chtít šířku kontejneru šířky přibližně 675 pixelů. To nám dává v průměru 60. let, což je správné v naší cílové šíři.
Chcete-li určit šířku kontejneru, použijte tento kód:
@media (min-width: 950px) { .container {width:675px;} }
Tyto maximální šířky čáry můžete nastavit pro každou velikost zobrazení nebo pouze pro určité velikosti. Při menších obrazovkách můžete nechat šířku kontejneru a nechat typ šířit po celé šířce obrazovky.
Nyní, s mnohem většími obrazovkami, můžete se podívat na rozdělení obsahu do několika sloupců. Řekněme například, že pracujete s iPadem v zobrazení na šířku. Šířka obrazovky je 2048 pixelů. Roztažením řádků pro vyplnění obrazovky je obtížné číst, ale centrování obsahu a udržování délky čáry kratšího druhu porážky za účelem zobrazení obsahu v režimu na šířku.
Místo toho nastavte svůj typ ve dvou sloupcích (nebo dokonce v třech, v závislosti na velikosti písma). Specifikace více sloupců CSS3 umožňuje velmi snadné rozdělit text do několika sloupců, aniž byste museli změnit celé rozložení. Zkombinujte to s dotazy médií a nyní máte rozložení obsahu, které se rozdělí na dva nebo tři sloupce pro větší obrazovky, a to jak s vysokou čitelností velikosti, tak s vysokou čitelností délky čáry.
Opět platí, že kód pro to je velmi jednoduchý:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Nyní, na obrazovkách o šířce větší než 1140 pixelů, můžete svůj obsah rozdělit na dva sloupce, čímž se vaše délky čáry mnohem čitelnější.
Použití alternativních písem
Jedna věc, která je často přehlížena, když mluvíme o citlivé typografii, je myšlenka, že různé typy písma nemusí fungovat dobře v různých velikostech. To platí zejména pro zobrazení písem.
Znamená to, že byste se měli vyvarovat použití těchto písem ve vašem reakci? Samozřejmě že ne. Namísto toho určete různé písma pro různé prvky ve větších nebo menších rozloženích.
Například, s designem pro stolní počítače, budete chtít použít písmo jako Ligový skript pro vaše záhlaví. Ale na menším displeji, jako je například iPhone, budete buď potřebovat, aby byl tak velký, že dominuje obsahu, nebo bude velmi těžké číst.
Co můžeme udělat, je použít Ligový skript pro větší displeje (iPad, desktop atd.), Při přepínání na větší verzi písma těla pro menší displeje (jako iPhone nebo jiné smartphony).
Chcete-li to provést, jednoduše zadejte něco takového:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Samozřejmě to lze udělat i pro více než jen vaše záhlaví.
Závěr
Zatímco citlivý design se do značné míry soustředil na obrazy a celkové rozvržení, typografie je stejně důležitá jako obě tyto věci. Nejlepší je, aby nebylo obtížné přizpůsobit a optimalizovat typografii pro citlivý design.
Je důležité, abyste do toho vložili stejný čas a úsilí, které jste vložili do jiných prvků vašeho návrhu. Zachování čitelnosti obsahu textu je zásadní součástí vytváření optimálního uživatelského prostředí pro návštěvníky.
Uvádíte takový důraz na citlivou typografii ve svých návrzích, stejně jako na citlivé mřížky a obrázky? Proč nebo proč ne?