Pochopenie typografie písanie pre web

Vo webovom dizajne je predmetom typografie dôležitý pri posudzovaní všetkých oblastí skúseností používateľov. Každá webová stránka potrebuje text a existujú pokyny, ktoré môžete použiť na vytvorenie mimoriadne ohromujúcich rozložení. Mali by sa brať do úvahy mriežky, písma, výška písma, medzery textu, farebné schémy a iné podobné vlastnosti.

V tomto článku by som sa chcel ponoriť do ríše webovej typografie. Budeme sa pozrieť populárne myšlienky tvorby dôveryhodných webových stránok. Po ceste predstavím niekoľko užitočné vlastnosti CSS3 ktoré dizajnéri často zabúdajú.

Snažil som sa viac zamerať na teóriu a ideológie pre web. Toto dáva širšiemu zameraniu na digitálny text vo všeobecnosti a vy, webový dizajnér si potom môžete vybrať, ktoré štýly sa majú aplikovať pre aký účel. Kontext je vždy kľúčový a musíte to určiť primerane pre každý projekt, na ktorom pracujete. Zvážte tento sprievodca referenčným paketom, ktorý je plný moderných webových trendov od typografických inovátorov po celej planéte.

Zmerajte svoje odseky

Pre tento typ merania nebudete musieť vyraziť palicu. Opatrenie vo vzťahu k typografii sa vzťahuje na šírku (horizontálne) ktoréhokoľvek odseku na vašej stránke. Nie je to vždy diskutovaná téma, ale ovplyvňuje čitateľnosť vášho obsahu. Ako všeobecné pravidlo chcete obmedziť ľubovoľný riadok s dĺžkou 75-85 znakov (nie nevyhnutne vrátane medzier).

Teraz sa to môže zdať ako trochu roztiahnutie pre niektoré širšie rozloženie. Najmä v prípade, že váš dizajn je tekutý a má sa prispôsobiť, pretože používateľ zmenil veľkosť okna prehliadača. CSS môžete vždy nastaviť max šírkou vlastníctvo na hlavný obsah div. Kódovanie okrajov a veľkostí písma v škálovateľných jednotkách (percentá, ems) namiesto pixelov umožní takú flexibilitu v akomkoľvek rozložení.

Neexistuje žiadna maximálna merná jednotka, na ktorú by ste mali byť opatrní. Ako napísať obsah a formulovať slová do viet je oveľa dôležitejšie ako šírka každého riadku. Majte však na pamäti, že dlhšie vety sú oveľa ťažšie čitateľné v porovnaní s kratšími, stručnými vyhláseniami.

Vedúci vysvetlil

Pri navrhovaní spolu s vašim odsekom treba tiež zvážiť myšlienku vedúci. Slovo sa vyslovuje “LEDD-ing”, ako je olovo používané v ceruzkách. Tento názov pochádza zo starších dní mechanickej sadzby, kde boli medzi riadky textu umiestnené pásy olova.

Vedenie je stále veľmi dôležitým konceptom webového dizajnu a ide ruka v ruke s opatreniami odseku. Ako sa zvyšuje šírka odseku, mali by ste rovnako zvýšiť množstvo vedúcich alebo medzi riadkami textu. Tento extra priestor umožňuje čítanie oveľa jednoduchšie na oči.

Ak by ste mali prejsť veľmi tesne navinutým textom, môže byť ťažké zamerať sa na jednu linku. Ak je to tak, skúste zvýšiť množstvo vedenia pomocou CSS line-height vlastnosť. Vždy si želáte viac miesta medzi riadkami textu ako medzi slovami. V opačnom prípade sa vaše textové bloky môžu zobraziť ako novinový výtlačok a nebudú pre používateľov veľmi jednoduché.

Pevným postupom je použiť viac priestoru, než bolo pôvodne potrebné, a v prípade potreby ho znížiť. Nie celý text je vytvorený rovnaký a budete určite potrebovať odseky s rôznym vnútorným formátovaním, ako sú tučné slová, kotvové odkazy, podčiarknuté atď. Niektoré ďalšie vedúce tieto zmeny sa nebudú cítiť tak vyvážené v porovnaní s ostatnými textami.

Použite prirodzené veľkosti písma

Stále existuje niekoľko webových stránok, ktoré sa rozhodli držať menšie ako priemerné veľkosti písma. 11px-12px sa môže javiť ako oveľa viac “štandardné profesionálne” pre obchodné rozvrhnutie. Tieto veľkosti však nepomáhajú väčšine návštevníkov, ktorí hľadajú konkrétne informácie.

Webové prehliadače sú štandardne nastavené na 16 pixlov, ak neuplatňujete žiadne pravidlá CSS. Dokonca aj to môže byť považované za trochu malé, ak máte extra priestor v rozložení prispôsobiť väčší text. Väčšie veľkosti písma vyzerajú pekne a sú oveľa jednoduchšie vynechať relatívne kľúčové slová. Pätkové písma nie sú často vybrané ako materiály odseku, ale môžete s nimi stále prekonávať. Navrhujem používať oveľa väčšie veľkosti písma pre serif fonty, aby ste zlepšili čitateľnosť a upriamili pozornosť.

Reagujte na používateľské prostredie

Keď vyskúšate rôzne typy a veľkosti písma, vaša obsahová oblasť sa bude musieť prispôsobiť. Štandardná jednotka, s ktorou sa držím, je EMS pretože môžu ľahko premeniť na základe dostupného priestoru a rozlíšenia obrazovky. To optimalizuje výkon na konci užívateľa, čo je najdôležitejšie.

Ale keď máte taký flexibilný obsah, vaše rozloženie je náchylné k chybnému výsledku. Obsah v oblasti päty alebo bočného panela môže v niektorých prehliadačoch skončiť skreslený alebo nevyvážený. Prípadne môžete mať ťažkosti so zobrazovaním obrázkov alebo iných foriem médií vo vašom hlavnom texte. Existuje niekoľko ďalších alternatív k používaniu ems, ak potrebujete rozloženie v pevnom štýle - ale skúste obe riešenia, aby ste zistili, ktorý z nich sa vám najviac páči.

Nezabúdajte, že fixné šírky a veľkosti odstavcov sa uzamknú v mnohých nastaveniach vo vašom dizajne. Je to skvelé pre obsah, ktorý zahŕňa veľa stacionárnych estetických efektov - premýšľajte o obrázkoch na pozadí alebo o množstve prispôsobených widgetov na bočných paneloch. Je to tiež jednoduchý proces na vytvorenie oblasti kvapalného obsahu v ľavom stĺpci s pevnými postranicami vpravo.

Štýl založený na kontexte

Niektoré ďalšie naozaj úhľadné triky CSS boli skryté z bežného dizajnu. Konkrétne existujú trendy, ktoré sa kopírujú z tlače, ktoré sa dajú použiť v správnom kontexte.

Mnohí webové dizajnéri nikdy nepoužili vlastnosť CSS textu a odsadení. Hodnotu priradíte prvému riadku ktoréhokoľvek odseku, na ktorý sa vzťahuje toto pravidlo. Jednotky sa riadia štandardnými možnosťami textu, ako sú pixely, body, ems, percentá ... Určite to nie je trend, ktorý nájdete vo väčšine blogov. Poskytuje však príjemný rytmus stránky pri čítaní veľkých blokov textu.

Existuje iný typ selektora CSS známy ako a pseudo element. Môžete to zacieliť na určitú časť ľubovoľného výberu obsahu. Pseudo-selektor CSS3: prvý list je ideálny pre vytváranie fantazijných štýlov na dôležitých odsekoch. Môžete jazz počiatočný list každého odseku - podobne ako celkom rozprávkový príbeh - používať tučné, kurzíva alebo dokonca meniť písmo. Pozrite sa na tento krásny príklad drop caps, ktorý obsahuje nejaký extra CSS kód, ktorý môžete využiť.

Hra s písmenom

Som si istý, že mnohí z nás počuli termín sledovanie predtým, ale nikdy si neuvedomil, že je to rovnaký nápad ako CSS letter-spacing vlastnosť. Tieto dve pojmy sú jedna v rovnakej súvislosti medzi tlačou a digitálnou typografiou. Jednotka sa týka medzery medzi písmenami v ľubovoľnom riadku textu. To je naozaj úhľadný efekt, ktorý sa vzťahuje na hlavičky a dokonca aj na niektoré menšie obsahové bloky vo vašom webe.

Je dôležité, aby ste nezmazali termíny písmená s medzerou. Obe súvisia s typografiou a vzdialenosťou medzi písmenami. Zvonenie však výslovne odkazuje na vzdialenosť medzi dvoma jednotlivými písmenami v jednom slove. Vlastnosť rozmiestnenia písmen sa bude vzťahovať na celý prvok textu, či už je to slovo alebo odsek alebo záhlavie alebo ukotvené spojenie. Majte to na pamäti pri hraní s novými nápadmi na štýly.

Často používam niekoľko pixelov / bodov medzi riadkami v hlavičkách so všetkými hlavnými znakmi. To rozdeľuje jednotlivé znaky s určitým extra priestorom a tiež sa javí ako veľmi definované “nadpis” vyzerať. Záporné písmená tiež fungujú v správnom kontexte. Zvyčajne sa držím na menších jednotkách, možno najviac -0,03 alebo -0,1.

Kombinácia a prispôsobenie písma

Koncepcie návrhu webovej typografie sú určite formou umenia, nie toľko vedy. Existujú usmernenia, ktoré môžete dodržiavať, ale neexistujú žiadne vytrvalé pravidlá, ktorými by ste boli obmedzovaní. To znamená, že máte obrovské množstvo slobody experimentovať so zmiešaním a zhodou rôznych písiem, ku ktorým máte prístup.

Zdá sa, že najpopulárnejšia kombinácia písma obsahuje rozdelenie serif / sans-serif pre hlavičku a obsah odseku. Rád sa oba prepínať, ale častejšie použijem serif písma v sekciách záhlavia. Doplňujúce označenia a ťahy na každom písmene spôsobujú, že sú väčšmi lichotivé ako hlavný text stránky.

Navyše sans-serif písma sú čistejšie a ľahšie sa skrývajú spolu vo vetách. To neznamená, že serif písma nebudú fungovať v odsekoch. V skutočnosti je veľa skvelých príkladov! Ale málo-známy pojem s názvom x-výška je veľmi dôležitý pre rozlíšenie zložitosti písma. Z pohľadu na základnú líniu niekoľkých slov si vyberiete, ako tieto fonty budú “pasovať” spolu.

Je tiež potrebné poznamenať význam priestoru medzi týmito rôznymi prvkami. Budete pravdepodobne používať 2 alebo 3 rôzne štýly hlavičiek, takže každý z nich bude mať odlišný vzhľad. Mám tendenciu držať svoje prvky h2 / h3 trochu bližšie k nasledujúcemu bloku odstavcov, pretože to znamená, že existuje korelácia medzi obsahom.

Táto korelácia je obzvlášť užitočná, keď používate dve úplne odlišné písma priamo vedľa seba. Odporúčam maximálne 3 rozdielne fonty pre každú sadu obsahu. Po príliš veľa prispôsobení sa vaše slová objavia spoločne a celá stránka vyzerá ako rozptýlená nesprávna písma.

záver

Dúfam, že tieto pojmy osvetlia komplikovaný predmet digitálnej typografie. Môže byť ťažké skutočne dostať sa do práce ako dizajnér, najmä ak je celá tému cudzia pre vás. Ale pokračujte v štúdiu a uistite sa, že praktizujete celú vežu!

Budúci týždeň: Zostaňte naladení, keď sa pozrieme na niektorých užitočné nástroje a zdroje pre lepšiu webovú typografiu.

Viac ...

Tu je viac príspevkov súvisiacich s typografiou:

• Ukážka dizajnov webových stránok s krásnou typografiou
• Lepšia typografia pre moderné webové stránky
• Stručný sprievodca po typografii: Naučte sa a buďte inštruovaní