Podívejte se do lepší typografie pro moderní webové stránky

Digitální text lze formátovat v tolika příchutích. S dalším rozvojem webových fontů a skriptů prohlížeče jsme viděli nový projektový kód pro vývojáře, který má být využíván. Weboví návrháři také hledají nejlepší strategii pro kódování svých webových stránek a budování jednotného typografického stylu mezi všemi svými stránkami.

Spousta profesionálních webových designérů napsala na toto téma včetně aktualizovaných funkcí a služeb. Musíte zvážit každou webovou stránku jako singulární dokument, který odděluje váš návrh rozvržení kořenů. Pod tímto pohledem je snadné zjistit, jak typografie může plynout ze stránky na stránku a nabídnout jedinečný výstup pro kreativitu. A to se stává obzvláště zjevné budování jedinečných tříd pro vaše odstavce a záhlaví.

Níže půjdu do fantastických nápadů pro začínající typografické designéry, kteří se zajímají o stavbu webu. Blogy, sociální sítě a podniky se vždy snaží aktualizovat své aktuální webové stránky. Styly CSS pro webovou typografii poskytují vynikající zdroj pro začátek aktualizace stránek.

Rozdíly v dnešním internetu

Moderní web od počátku roku 2000 dramaticky pokročil. Pro web designéry existuje spousta nových funkcí, které umožňují vytvářet fantastická díla grafického designu, log, bannerů a prakticky cokoliv jiného. Vydání specifikace HTML5 a CSS3 si také vybralo svou daň na starém způsobu vytváření webových písem.

Nyní je možné začlenit vlastní písma do CSS @ font-face vlastnictví. Můžete použít libovolné TrueType(.tf) nebo OpenType(.otf) a uloží kopii lokálně na váš server. Pak s některými CSS3 magie patří rodina kdekoli na vašich webových stránkách!

Podle této techniky je možné vidět, jak se vyvinula naše moderní internet.

S jQuery roste v popularitě každý den není překvapením, že můžeme vytvořit ohromující animační efekty spojené s vlastními fonty. Jako alternativu k metodě nad zásuvným modulem TTFGen pro jQuery můžete na své webové stránky zahrnout libovolné písmo TrueType.

Tato metoda je o něco spolehlivější, protože nepotřebujete moderní prohlížeč podporující standardy CSS3, aby to fungovalo. Ale samozřejmě starší prohlížeče, jako je Internet Explorer 6, se budou snažit správně vykreslit.

Ale díky bohu, že většina uživatelů přešla na novější software, který tyto standardy podporuje! A když se vyvíjíte pro web, měli byste zvážit, kdo přesně je váš trh. Nemůžete potěšit všechny po celou dobu, ale můžete se určitě pokusit dostat se dost blízko.

Účel digitální typografie

Nějaký podivný nápad uvažovat, ale jaký je skutečný účel digitálního textu? Sdělit informace, sdílet zdroje a nabídnout svůj názor světu uživatelů internetu. Text je nejjednodušší formou médií pro sdílení myšlenek a myšlenek. Ale je to také velmi složité a obsahuje hlavní detaily, které fotografie / videa prostě nemohou použít.

Vaši návštěvníci pravděpodobně najdou vaše webové stránky na základě klíčových slov ve vašem textu nebo nadpisech - jen dalším důvodem, proč věnovat pozornost webové kopii. A jakmile jste získali určitou pozornost na svých webových stránkách, musíte se držet jejich soustředění. Nejjednodušeji se to děje s tučnými hlavičkami a rovnoměrným textem stránky.

Pokud píšete článek nebo tutoriál, musíte použít jasný jazyk. To je stejně důležitý je vzhled textu stránky a kvalita vašeho obsahu. Čím větší je text, tím jednodušší bude čtení a skenování klíčových slov. A protože odstavce budou obsahovat většinu vašeho obsahu, měli byste strávit spoustu času prototypováním pro správné přizpůsobení. Odstavce se používají k vyjádření vaší zprávy v kouscích velikosti bitů rozdělených do vět. Pochopte, jak psát a plánovat dopředu, abyste získali vhodnou stránku.

Kromě toho text stránky obsahuje média a sekundární obsah. Pokud vaše odstavce obsahují primární informace, možná máte grafy nebo snímky, které by okusily stránku. Tyto akcenty jsou tou správnou volbou, která uživatelům umožňuje pohybovat se po vašich stránkách.

Videa a obrázky jsou schopny rozdělit váš obsah a zdát se, že čtenáři se pohybují rychleji ve vašem článku. Použijte tyto položky šetrně a nenechte nic, co by přemohlo vaše hlavní poselství. Uživatelé (většinou) přicházejí na vaše stránky s informacemi a nechtějí příliš mnoho rozptýlení.

Všechny ostatní možnosti formátování slouží k určení funkčnosti nebo účelu. Text hypertextového odkazu je například často odlišnou barvou než zbytek, aby vynikl jako “klikací”. Můžete pracovat s tučně nebo kurzívou slova přidáním důrazu do vět. Použití blokových poznámek nebo předformátovaného textu může pomoci vymezit základní prohlášení nebo webový kód.

Záhlaví webových stránek

Jedním z nejdůležitějších přínosů vaší webové typografie jsou značky. Pokud nejste obeznámeni s hlavičkami HTML, pohybujte se od

na

Nejdůležitějším je bývalý holding a druhý nejméně. Toto označení je užitečné pochopit, protože Google také řadí vaši doménu a webové stránky na základě struktury obsahu. V konečném důsledku máte kontrolu nad tím, která klíčová slova používáte a jakou úroveň nadpisů byste požadovali.

I když standardní specifikace HTML5 obsahuje až 6 různých stylů nadpisů, doporučuji použít mezi 3-4. Není nutné zahrnout je do všech stránek. A je také velmi nepravděpodobné, že se vám podaří použít 6 různých záhlaví. Když si poprvé postavíte své styly, zkuste navrhnout několik příkladů nadpisů, abyste viděli, co se vám líbí.

Photoshop je vynikající pro tento scénář. Můžete také zkusit kódovat různé záhlaví v HTML, abyste viděli, jak vypadají v prohlížeči. Důležité je pracovat se záhlavím vaší stránky a designem podle jejich pozice.

Například vaše

tagy by měly být nejvýraznější mezi všemi záhlavími stránek.

a

jsou nejoblíbenější značky a doporučeno společností Google pro procházení obsahu stránky. Pomocí efektů návrhu, jako je tučně písmo, podtržení, přerušované okraje nebo různé barvy, budou vaše tituly skok z této stránky.

Mezera je také důležitá pokud jde o záhlaví, nebo o jakýkoli obsah svého obsahu. Ujistěte se, že přidáváte další okraje mezi záhlaví a hlavní oblast obsahu. Pokud jste udělali své písmo dostatečně velké, každý nadpis by měl vystupovat jako vlastní blok. Tento vzhled je ideální, pokud chcete upoutat pozornost čtenářů jasnou zprávou.

Vytváření unikátních hypertextových odkazů

Na téma odkazů na stránky existuje spousta. Jedním nebo druhým způsobem budete muset použít hypertextové odkazy ve vašem kódu. Jsou velmi důležité jako hlavní navigační rozhraní mezi různými stránkami na vašem webu. Můžete také odkazovat na jiné blogy nebo dokonce na archivované příspěvky blogu pro pozdější použití.

Měli byste si pečlivě vybrat přidržující text odkazu. Jedná se o konkrétní obsah, který bude akcentován stylem odkazu. Například "click here" je velmi populární a používá se pro přímé stahování většinu času. Snažte se vyhnout tomuto systematickému přístupu a místo toho si s textem hypertextového odkazu trochu kreativní. Vaši návštěvníci mnohem častěji kliknou na odkaz, pokud mohou také rozpoznat kontext a možná zjistí, co bude nová stránka obsahovat.

Když se chystáte styl vaše odkazy, měli byste zvážit následující - jak budou vypadat změny v nastavení stránky, na jakém typu barvy pozadí pracujete, a jaká barva je text pro kontrast?

Odkazy by měly vypadat bezohledně ze stránky jako klikací položky - koneckonců, to je jejich funkce. To je důvod, proč stará modrá s efektem podtržení textu funguje tak dobře. Ale pokud zjistíte, že alternativní barva funguje lépe, měli byste si to vyzkoušet. Pro návrhy propojení neexistuje žádné univerzální řešení. Stačí se trochu podívat na web a určitě dáte dohromady něco výjimečného.

Jeden bod zájmu je několik funkcí, které byste měli zkusit vyhnout se. Věci, jako je změna rodiny písma nebo velikosti písma, mohou být velmi nepříjemné. To způsobí, že se text zkreslí a přesune, což může umístit kurzor myši z oblasti spojení. Podobným způsobem byste se měli vyhnout přidávání dalších okrajů / výplní do odkazů nebo efektů přechodu. Ty fungují mnohem lépe, když zůstáváte jednoduchý. Změna barvy nebo přidané podtržení jde daleko do uživatelského prostředí.

Konstrukce stylových seznamů

Šance jsou dobré, budete muset také pracovat se seznamy v určitém okamžiku. Zahrnuty jsou i objednané a neuspořádané seznamy v HTML. Ty jsou ideální pro malou sbírku nápadů, produktů, lidí nebo odkazů online ve velmi malém prostoru. Styling není nic jiného, ​​než odstavce nebo záhlaví.

Vaši návštěvníci by měli okamžitě pochopit, že se dívají na seznam položek. Uchovávejte každou položku seznamu odděleně a umístěte ji na nový řádek na stránce. Pokud je to možné, přidejte mezi ně další mezeru. To dá nějaký dýchací prostor a objeví se jako pěkný rozchod na text článku. Pokud byste chtěli, můžete dokonce smazat písmo nebo odsazení seznamy tak, aby se odchylovali od standardních okrajů rozvržení.

Přidání dalších funkcí, které pomohou vašemu seznamu vyniknout, není podmínkou. Ale pokud se vám líbí styl rozvržení bloků, opravdu se zaměřuje na vaše seznamy. Můžete zkusit přidat světlé pozadí nebo ikony. Seznam Apart má velký writeup na zkrotit seznamy, které myslím, že obsahuje některé velmi silné tidbits znalostí. Pokud ale udržujete obsah stránky lineární a používáte bloky seznamu pouze v případě potřeby, neměli byste narazit na žádné konstrukční překážky.

Jak vytvořit úvodní nabídky

Vzhled citací a citací je v těchto dnech velmi omezený. V počátečním webu byste tyto prvky v používání neviděli. Možná v redakcích, esejích nebo vzdělávacích dokumentech. HTML5 však určitě aktualizovalo pravidla trochu, což značně usnadňuje citování bloků.

Webová stránka HTML5 Doctor obsahuje fascinující zdroj pro diskusi o tomto přesném tématu. Diskutují o použití obsahu uvnitř bloků jako o vnitřní struktuře dokumentu. Můžete také zahrnout záhlaví, odstavce a dokonce i seznamy a zápatí. Hlavní použití