Pozrite sa do lepšej typografie pre moderné webové stránky

Digitálny text môže byť formátovaný v toľkých príchutiach. Vďaka ďalšiemu rozvoju webových písiem a skriptov prehliadačov sme videli nový kód projektu, ktorý môžu vývojári využiť. Web dizajnéri tiež hľadajú najlepšiu stratégiu na kódovanie svojich webových stránok a vybudovanie jednotného typografického štýlu medzi všetkými ich stránkami.

Mnoho odborných web dizajnérov napísalo na túto tému vrátane aktualizovaných funkcií a služieb. Musíte zvážiť každú webovú stránku ako jedinečný dokument, ktorý vám preruší dizajn koreňového rozloženia. V tomto pohľade je ľahké vidieť, ako môže typografia plynúť od stránky na stranu a ponúknuť jedinečnú zásuvku pre kreativitu. A toto sa stáva obzvlášť zjavným budovaním jedinečných tried pre vaše odseky a nadpisy.

Nižšie uvádzam niekoľko fantastických nápadov pre aspirantov typografických návrhárov, ktorí sa zaujímajú o budovanie webu. Blogy, sociálne siete a firmy sa vždy snažia aktualizovať svoju aktuálnu webovú stránku. A štýly CSS pre webovú typografiu poskytujú vynikajúci zdroj na začatie obnovovania vašich stránok.

Rozdiely v dnešnom internete

Moderný web sa od začiatku roku 2000 dramaticky rozvinul. Web dizajnéri majú veľa nových funkcií, aby vytvorili fantastické diela grafického dizajnu, loga, bannerov a prakticky čokoľvek iné. Uvoľnenie špecifikácií HTML5 a CSS3 tiež prinieslo svoje mesto na starom spôsobe vytvárania webových písiem.

Teraz je úplne možné zahrnúť vlastné písma do CSS @ Font-face vlastnosť. Môžete použiť ľubovoľné TrueType(.ttf) alebo OpenType(.otf) a uložte kópiu lokálne na server. Potom s niektorými čarami CSS3 zahrňte rodinu kdekoľvek na vašej webovej stránke!

Podľa tejto techniky je možné vidieť, ako sa vyvinul náš moderný internet.

A keďže jQuery každým dňom rastie v popularite, nie je prekvapením, že môžeme vytvoriť ohromujúce animačné efekty spolu s vlastnými písmenami. Ako alternatívu k metóde nad pluginom TTFGen pre jQuery môžete zahrnúť ľubovoľné písmo TrueType na vašu webovú stránku.

Táto metóda je o niečo spoľahlivejšia, pretože nepotrebujete moderný prehliadač podporujúci štandardy CSS3, aby fungoval. Samozrejme, legacy prehliadače ako Internet Explorer 6 sa budú snažiť správne vykresliť.

Ale vďaka bohu, väčšina používateľov prešla na novší softvér na prehliadanie, ktorý podporuje tieto štandardy! A keď sa rozvíjate pre web, mali by ste zvážiť presne, kto je váš trh. Nemôžete po celý čas páčiť všetkým, ale môžete sa naozaj pokúsiť dostať blízko.

Účel digitálnej typografie

Určitý podivný nápad zvážiť, ale aký je skutočný cieľ digitálneho textu? Odovzdať informácie, zdieľať zdroje a ponúknuť svoj názor svetu používateľov internetu. Text je najjednoduchšia forma médií na zdieľanie myšlienok a myšlienok. Je však tiež veľmi zložitý a obsahuje dôležité detaily, ktoré fotografie / videá jednoducho nepoužívajú.

Vaši návštevníci pravdepodobne nájdu vaše webové stránky na základe kľúčových slov vo vašom texte alebo hlavičkách - len ďalší dôvod, prečo venovať pozornosť svojej webovej kópii. A akonáhle získate určitú pozornosť na vašich webových stránkach, musíte držať ich koncentrácie. To sa dá najľahšie urobiť tučným písmom a rovnomerným textom stránky.

Ak píšete článok alebo tutoriál, musíte použiť jasný jazyk. to je rovnako dôležité, ako vyzerá text vašej stránky a kvalita vášho obsahu. Čím väčší je váš text, tým ľahšie bude čítať a vyhľadávať kľúčové slová. A pretože odseky budú obsahovať väčšinu vášho obsahu, mali by ste stráviť veľa času s prototypmi pre správne uloženie. Odseky sa používajú na vyjadrenie vašej správy v bitových veľkostiach rozdelených na vety. Pochopte, ako napísať a plánovať dopredu, aby ste získali usporiadanie vhodnej stránky.

Navyše s textom stránky prichádza mediálny a sekundárny obsah. Ak vaše odseky obsahujú primárne informácie, možno máte k dispozícii grafy alebo snímky, aby ste okořenili stránku. Tieto akcenty sú len správnym dotykom, ktorý umožňuje používateľom prechádzať vašimi stránkami.

Videá a obrázky dokážu rozdeliť váš obsah a vyzerajú tak, ako sa čitatelia pohybujú rýchlejšie prostredníctvom vášho článku. Ale používajte tieto položky šetrne a nedovoľte, aby niečo prekonalo vaše hlavné posolstvo. Používatelia (väčšinou) prichádzajú na vaše stránky pre informáciu a nechcú príliš veľa rozptýlení.

Všetky ostatné možnosti formátovania sa používajú na špecifikáciu funkčnosti alebo účelu. Napríklad text hypertextového odkazu je často iná farba ako ostatné, aby vynikla ako “klikacie”. Môžete pracovať s odvážnymi alebo kurzívnymi slovami, ktoré pridávajú dôraz na vaše vety. Použitie blockquotes alebo predformátovaného textu môže pomôcť pri vymedzení základných vyhlásení alebo webového kódu.

Záhlavie webových stránok

Jedným z najdôležitejších prostriedkov vašej webovej typografie sú hlavičkové značky. Ak nie ste oboznámení s hlavičkami HTML, rozsah od

na

pričom prvý má najdôležitejšie a posledné je najmenej. Táto značka je užitočná na pochopenie, keďže spoločnosť Google tiež zaraďuje vašu doménu a webové stránky na základe štruktúry obsahu. Preto máte nakoniec kontrolu nad tým, ktoré kľúčové slová používate a akú úroveň položiek by ste požadovali.

Hoci štandardná špecifikácia HTML5 obsahuje až 6 rôznych štýlov hlavičky, odporúčam použiť medzi 3-4. Nie je potrebné ich zahrnúť do vašich stránok. A je tiež veľmi nepravdepodobné, že nájdete 6 rôznych položiek. Keď sa najprv posadíte, aby ste vytvorili svoje štýly, skúste niekoľko príkladov nadpisov, aby ste videli, čo sa vám páči.

Photoshop je vynikajúci pre tento scenár. Môžete tiež skúsiť kódovanie rôznych hlavičiek v jazyku HTML, aby ste videli, ako vyzerajú v prehliadači. Čo je dôležité, je pracovať s vašimi tokmi stránok a návrhov podľa ich poradia.

Napríklad vaše

značky by mali byť najvyššie medzi všetkými vašimi hlavičkami stránok.

a

sú najobľúbenejšie značky a odporúčané spoločnosťou Google na indexové prehľadávanie obsahu stránok. Použitie dizajnových efektov, ako sú tučné písmo, podčiarknutie, prerušované okraje alebo rôzne farby pomôžu vašim titulom skočiť zo stránky.

Medzery sú tiež dôležité pokiaľ ide o nadpisy alebo akýkoľvek obsah vášho obsahu. Uistite sa, že medzi nadpisy a oblasť hlavného obsahu pridáte ďalšie okraje. Ak ste vytvorili dostatočne veľké množstvo písma, každá hlavička by mala vyčnievať ako vlastný jadrový blok. Tento vzhľad je ideálny, ak chcete upútať pozornosť vašich čitateľov jasnou správou.

Vytváranie unikátnych hypertextových odkazov

Na tému odkazov na stránky je veľa čo povedať. Jedným alebo druhým spôsobom budete musieť používať hypertextové odkazy v kóde. Sú mimoriadne dôležité ako hlavné navigačné rozhranie medzi rôznymi stránkami na vašich stránkach. Môžete tiež odkazovať na iné blogy alebo dokonca aj na vaše archivované blogové príspevky na neskoršie použitie.

Mali by ste si starostlivo vybrať držiaci text vášho odkazu. Toto je špecifický obsah, ktorý bude zdôrazňovaný štýlom odkazu. Napríklad "kliknite sem" je veľmi populárny a väčšinou sa používa na priame preberanie. Snažte sa vyhnúť sa tomuto systematickému prístupu a namiesto toho získate trochu kreatívy s textom hypertextového odkazu Vaši návštevníci sú oveľa pravdepodobnejšie, že kliknú na odkaz, ak dokážu rozpoznať aj kontext a možno zistiť, čo bude obsahovať nová stránka.

Pri štýle vašich odkazov by ste mali zvážiť nasledovné - ako by sa v nastaveniach stránok zobrazovali zmeny, na akú farbu pozadia pracujete, a akú farbu je text pre kontrast?

Odkazy by sa mali objaviť nepríjemne mimo stránku ako položky s možnosťou kliknutia - v konečnom dôsledku to je ich funkcia. To je dôvod, prečo stará modrá s podčiarknutým textovým efektom funguje tak dobre. Ale ak zistíte, že alternatívna farba funguje lepšie, mali by ste ju vyskúšať. Neexistuje riešenie, ktoré by vyhovovalo všetkým potrebám pre navrhovanie odkazov. Jednoducho prechádzajte po webe a určite si vytvoríte niečo výnimočné.

Jedným bodom záujmu je niekoľko funkcií, ktoré by ste mali vyskúšať vyhýbať. Veci, ako napríklad zmena rodiny fontov alebo veľkosti písma, môžu byť veľmi nepríjemné. To spôsobí, že text bude deformovať a presúvať, čo môže umiestniť kurzor myši len mimo zónu odkazu. Podobným spôsobom by ste sa mali vyhýbať pridávaniu ďalších okrajov / výplní do vašich odkazov alebo efektov vznášania. Tieto fungujú oveľa lepšie, keď zostávate jednoduché. Zmena farby alebo pridaná podčiarknutie má za následok dlhú skúsenosť používateľov.

Výstavba štylizovaných zoznamov

Je pravdepodobné, že budete musieť pracovať so zoznamami v určitom okamihu. Zahrnuté sú aj usporiadané aj nezoradené zoznamy v jazyku HTML. Sú ideálne pre ponúkanie malej zbierky nápadov, produktov, ľudí alebo odkazov online vo veľmi malom množstve priestoru. Štýl nie je úplne odlišný od odsekov alebo nadpisov.

Vaši návštevníci by mali okamžite pochopiť, že sa pozerajú na zoznam položiek. Udržiavajte každú položku zoznamu samostatnú a nachádza sa na novom riadku na vašej stránke. Pridajte medzi nimi priestor, ak je to možné. To poskytne miestnosť pre dýchanie a zdá sa, že ide o pekný rozklad pre text článku. Ak by ste chceli, aby ste mohli dokonca písať tučné písmo alebo zarovnanie, trochu odbočte od štandardných okrajov rozloženia.

Pridaním ďalších funkcií, ktoré vám pomôžu vyniknúť v zozname, nie je požiadavka. Ale ak sa vám páči štýl rozloženia bloku, je to naozaj zamerané na vaše zoznamy. Môžete skúsiť pridať svetlé pozadie alebo ikony. A List Apart má skvelé napísanie na zoznamoch, ktoré podľa môjho názoru zahŕňajú niektoré veľmi silné poznámky. Ak však udržujete obsah stránky lineárny a používate bloky zoznamov len v prípade potreby, nemali by ste naraziť na žiadnu konštrukčnú neúspech.

Ako vytvoriť úvodzovky

Vzhľad citátov a citácií je v týchto dňoch veľmi obmedzený. Na začiatku webu by ste neukázali veľa z týchto používaných prvkov. Možno v editorials, esejích alebo vzdelávacích prácach. Ale HTML5 určite aktualizoval pravidlá trochu, čo hovorí o blokoch veľmi jednoduchšie.

Webová stránka HTML5 Doctor obsahuje fascinujúci zdroj na diskusiu o tejto presnej téme. Diskutujú o používaní obsahu vo vnútri blokov, ktoré sa objavujú vo vnútri štruktúry dokumentu. Takže môžete zahrnúť názvy, odseky a dokonca aj zoznamy a päty. Hlavné použitie a