Pochopení psaní typografie pro web
Ve Web Design je téma typografie důležitá při zvažování všech oblastí uživatelské zkušenosti. Každá webová stránka má potřebu textu a existují pokyny, které můžete dodržet při vytváření mimořádně ohromujících rozvržení. Mřížky, písmo, výška písma, rozteč textu, barevná schémata a další podobné vlastnosti by měly být vzaty v úvahu.
V tomto článku bych se chtěl ponořit do oblasti webové typografie. Podíváme se populární nápady za návrh důvěryhodných textů webových stránek. Po cestě představím pár užitečné vlastnosti CSS3 které návrháři často zapomínají.
Snažil jsem se věnovat větší pozornost teorii a ideologiím webu. To dává širší zaměření na digitální text obecně, a vy, web designer můžete pak vybrat, které styly použít pro jaký účel. Kontext je vždy klíčový a pro každý projekt, na kterém pracujete, ho musíte určit správně. Vezměme si tuto příručku jako referenční balíček, který je plný moderních webových trendů od typografických inovátorů po celé planetě.
Změřte své odstavce
Pro tento druh měření nebudete muset vytrhávat loděnici. Ve skutečnosti se míra ve vztahu k typografii vztahuje na šířku (horizontálně) jakéhokoli daného odstavce na vaší stránce. Není to vždy téma, o které se jedná, ale ovlivňuje to čitelnost vašeho obsahu. Obecným pravidlem je, že chcete omezit jeden řádek o délce 75-85 znaků (nemusí nutně obsahovat mezery).
Teď se to může zdát jako trochu úsek pro některé širší rozvržení. Zejména pokud je váš design tekutý a měl by se přizpůsobit, když uživatel změní velikost okna prohlížeče. Vždy můžete nastavit CSS max-width vlastnost na vašem hlavním obsahu div. Marže kódování a velikosti fontů v škálovatelných jednotkách (procenta, ems) namísto pixelů umožní takovou flexibilitu v rámci jakéhokoli rozvržení.
Neexistuje žádná maximální měrná jednotka, která by měla být opatrná. Jak psát obsah a tvořit slova do vět je mnohem důležitější než šířka každého řádku. Ale mějte na paměti, že delší věty jsou mnohem těžší ke čtení ve srovnání s kratšími, výstižnějšími výroky.
Vysvětlující vedení
Při navrhování, spolu s odstavcem opatření, měli byste také zvážit myšlenku vedoucí. Slovo je vyslovováno “ledd-ing”, například olovo používané v tužkách. Tento název pochází ze starších dnů mechanické sazby, kde byly mezi řádky textu umístěny proužky olova.
Vedení je stále velmi důležitým pojmem web design a jde ruku v ruce s odstavcovými opatřeními. Jak se šířka odstavce zvětší, měli byste použít stejné zvýšení na hodnotu předního, nebo mezery mezi řádky textu. Tento prostor navíc usnadňuje čtení na očích.
Pokud byste měli projít velmi těsně zraněným textem, je pro vás obtížné zaměřit se na jeden řádek. Pokud se jedná o tento případ, zkuste zvýšit množství předávání pomocí CSS výška čáry vlastnictví. Mezi řádky textu chcete vždy více místa než mezi slovy. V opačném případě se mohou vaše textové bloky zobrazovat jako tisk v novinách a nebudou velmi uživatelsky příjemné.
Pevnou technikou je aplikovat více místa, než bylo původně zapotřebí, a v případě potřeby ji snížit. Ne všechny texty jsou vytvořeny stejně a budete určitě potřebovat odstavce s různým interním formátováním, jako jsou tučná slova, kotevní odkazy, podtržení atd. S některými dalšími hlavními změnami se tyto změny necítí tak vyvážené ve srovnání s jiným textem.
Použijte přirozené velikosti písma
Stále existuje několik stránek, které se rozhodnou držet s menšími než průměrnými velikostmi písma. 11px-12px se může zdát mnohem více “standardní profesionální” pro obchodní uspořádání. Tyto velikosti však nepomáhají většině návštěvníků, kteří hledají konkrétní informace.
Obecně platí, že webové prohlížeče standardně nastavují hodnotu 16px, pokud nepoužíváte žádná pravidla CSS. Dokonce i to může být považováno za trochu malé, pokud máte další místnost ve vašem rozložení pro větší text. Větší velikosti písma vypadají hezčí a jsou mnohem jednodušší pro relativní klíčová slova. Serif fonty nejsou často vybírány jako odstavcový materiál, ale stále se s nimi můžete dostat pryč. Doporučuji používat mnohem větší velikosti textu pro písma na bázi patkového tisku, aby se zlepšila jejich čitelnost a pozornost.
Reagujte na prostředí uživatele
Jak si vyzkoušíte různé rodiny fontů a velikostí, vaše obsahová oblast se bude muset odpovídajícím způsobem přizpůsobit. Standardní jednotka, se kterou se držím, je ems mohou snadno měnit velikost na základě dostupného prostoru a rozlišení obrazovky. To optimalizuje výkon na konci uživatele, který je nejdůležitější.
Ale když máte obsah tak flexibilní, že vaše rozložení náchylné k buggy výsledek. Obsah v zápatí nebo oblasti postranního panelu může v některých prohlížečích skončit zkosený nebo nevyvážený. Nebo můžete mít potíže s vložením obrázků nebo jiných forem médií do hlavního textu. Pokud potřebujete rozvržení s pevným stylem, existují i jiné alternativy použití ems, ale zkuste obě řešení, abyste zjistili, který z nich se vám líbí nejlépe..
Nezapomeňte, že pevné šířky a velikosti odstavců budou uzamčeny v mnoha nastaveních v návrhu. Je to skvělé pro obsah, který zahrnuje mnoho stacionárních estetických efektů - myslím, že obrázky na pozadí nebo spousta sidebar widgetů. Je to také jednoduchý proces pro vytvoření oblasti obsahu tekutin v levém sloupci s pevnými postranními lištami vpravo.
Styl založený na kontextu
Některé další opravdu elegantní CSS triky byly skryty před mainstreamovým designem. Konkrétně jsou zde kopírovány trendy z tiskové práce, které lze aplikovat ve správném kontextu.
Mnozí weboví designéři nikdy nepoužili vlastnost CSS s odrážkou textu. Zadáte hodnotu odsazení první řádek libovolného odstavce cílené tímto pravidlem. Jednotky sledují standardní možnosti textu, jako jsou pixely, body, ems, procenta… Určitě to není trend, který najdete ve většině blogů. Poskytuje však pěkný rytmus stránek při čtení velkých bloků textu.
Existuje další typ voliče CSS známý jako pseudo element. To může cílit na konkrétní část libovolného selektoru obsahu. CSS3: první písmeno pseudo selektor je ideální pro vytváření efektních stylů na důležité odstavce. Můžete otevřít každý dopis úvodní dopis - podobně jako docela příběh pohádky - pomocí tučně, kurzívou, nebo dokonce změnou písma. Podívejte se na tento krásný příklad kapek, které obsahují další kód CSS, který můžete použít.
Hraní s odstupem písmen
Jsem si jistý, že mnozí z nás slyšeli termín sledování dříve, než jsme si nikdy neuvědomili, že je to stejný nápad jako vlastnost mezery mezi písmeny CSS. Tyto dva pojmy jsou jedno stejné, vztahují se k tisku a digitální typografii. Jednotka se vztahuje k prostoru mezi písmeny v rámci jednoho řádku textu. To je opravdu elegantní efekt použít na záhlaví a dokonce i některé menší obsah bloků na vašem webu.
Je důležité nezaměňovat termíny mezi písmenem a mezerami. Oba se týkají typografie a vzdálenosti mezi písmeny. Kerning specificky odkazuje na vzdálenost mezi 2 jednotlivými písmeny ve slově. Vlastnost rozteče písmen bude platit pro celý prvek textu, je to slovo nebo odstavec nebo záhlaví nebo kotevní odkaz. Mějte to na paměti, když hrajete s novými nápady na styly.
V hlavičkách se všemi velkými písmeny často používám několik pixelů / bodů vzdálenosti písmen. Toto rozděluje jednotlivé znaky s nějakým extra prostorem a také se jeví jako velmi definované “nadpis” dívej se. Negativní rozteč písmen funguje také ve správném kontextu. Obecně se držím menších jednotek, možná -0.03em nebo -0.1em.
Kombinace a přizpůsobení písma
Designové koncepty za webovou typografií jsou jistě formou umění, ne tolik vědy. Tam jsou pokyny, které můžete sledovat, ale neexistují žádná vytrvalá pravidla, na které jste omezeni. To znamená, že máte obrovské množství svobody experimentovat a přizpůsobit různá písma, ke kterým máte přístup.
Zdaleka nejoblíbenější kombinace typů písma zahrnuje dělení serif / sans-serif pro obsah záhlaví a odstavce. Líbí se mi přepnout obě, ale častěji budu používat serif fonty v záhlaví sekcích. Další značky a tahy na každém dopisu je činí více lichotivými jako dominantní text stránky.
Navíc sans-serif fonty jsou čistší a snazší scrunch ve větách. To neznamená, že serif fonty nebudou fungovat v odstavcích. Ve skutečnosti existuje spousta skvělých příkladů! Ale málo známý koncept pojmenovaný x-height má zásadní význam pro rozlišení složitosti písma. Z pohledu na základní linii pár slov, budete vyzvednout na tom, jak takové fonty budou “zapadnout” jeden s druhým.
Za zmínku stojí také význam prostoru mezi těmito různými prvky. Pravděpodobně budete používat 2 nebo 3 různé styly záhlaví, takže každý z nich bude vypadat s rozdílným vzhledem. Mám sklon držet mé prvky h2 / h3 o něco blíže k následujícímu bloku odstavce, což znamená, že existuje vztah mezi obsahem.
Tato korelace je zvláště užitečná, když vedle sebe používáte dva zcela odlišné typy písma. Doporučuji maximálně 3 různé typy fontů na sadu obsahu. Po příliš mnoha úpravách se vaše slova jeví jako neuspořádaná a celá stránka vypadá jako hodgepodge chybně napsaných písem.
Závěr
Je to moje naděje, že tyto koncepty vrhnou nějaké světlo na komplikované téma digitální typografie. To může být obtížné opravdu dostat se do práce jako designér, zejména pokud je celé téma pro vás cizí. Ale pokračujte ve studiu a určitě si procvičte celou partii!
Příští týden: Zůstaňte naladěni, když se podíváme do některých užitečné nástroje a zdroje pro lepší webovou typografii.
Více…
Další příspěvky související s typografií:
- Prezentace webových stránek s krásnou typografií
- Lepší typografie pro moderní webové stránky
- Rychlý průvodce typografií: Naučte se a buďte inspirováni
