Typografia hrá kľúčovú úlohu vo webdizajne, podľa štatistík je 95% obsahu stránok textový obsah... Typ písma ovláda náladu a vytvára určitú atmosféru pri čítaní textového obsahu webových stránok.

Moderná webová typografia je založená na CSS štýloch. Zmenou predvolených hodnôt štýlu prehliadača môžete zatraktívniť textový obsah.

Tento článok sa bude zaoberať hlavnými aspektmi modernej webovej typografie, aby vám pomohol rozhodnúť sa pri výbere písma a ako upraviť štýl textu.

Vlastnosti CSS pre správnu typografiu webu

1. Rodina písiem (vlastnosť rodiny písiem)

Výber písma začína výberom typu písma.

Headset- písmo alebo niekoľko písiem so štylistickou jednotou obrysu. Pozostáva zo sady znakov (zvyčajne - čísla, písmená, interpunkčné znamienka, špeciálne znaky, ale môžu pozostávať aj výlučne z neabecedných znakov). Napríklad typ písma „Times New Roman“ pozostáva z bežného písma, kurzívy, tučného písma a mnohých ďalších písiem z tejto rodiny.

Slúchadlá možno rozdeliť do dvoch hlavných kategórií: serif(pätkové a ploché písma) a sans serif(groteska).

Bezpätkové písma sú jednoduché a ostré vzhľad... Pätkové písma naopak prepožičiavajú vážnejší a formálnejší tón.

V procese čítania si oči zvyknú na hlavné písmo a unavia sa, ak nadpisy, obsah a vedľajší text píšu písmami rôznych typov písma, ktoré neladia s hlavným písmom. Preto pri výbere písiem stačí zastaviť sa na jednom alebo dvoch písmach a akcenty umiestniť na úkor veľkosti, farby, štýlu atď.

Kedy je možné použiť viacero typov písma?

V type písma nie sú žiadne špeciálne štýly (tučné, tučné, kurzíva);
je potrebné dosiahnuť podobnosť s určitou dobou;
na vizuálne oddelenie textov viacerých typov (napríklad komentáre v texte, riadky kódu, vzorce, texty v inom jazyku);
na estetické účely.

Služba TypeTester na výber písma

2. Kombinovanie pätkového a bezpätkového písma

V pokynoch na párovanie písiem prevláda pravidlo nevyslovenia – pre nadpisy sa vyberie bezpätkové písmo a pre hlavný text sa vyberá serifové písmo. Tento prístup však nie je taký populárny, ako by sa mohlo zdať.

V skutočnosti toto pravidlo platí predovšetkým pre tlačené médiá, kníhtlač. Je to spôsobené tým, že pätky (malé ťahy na koncoch hlavných ťahov) sa hladko zarovnávajú, čím sa text ľahšie číta a je čitateľnejší.

Iná situácia je pri zobrazovaní textu po displejoch. rôzne zariadenia... Je tu problém vyhladzovania a drsnosti pätiek. Preto je bezpätkové písmo s mierne zvýšenými malými písmenami vhodnejšie pre hlavný text.

3. Farba písma (vlastnosť farby)

Farba dodáva textu jasnosť a výraz. Zaujať môžu farebné nadpisy a malé akcenty v texte viac pozornosti ako čierny text.

Nezabúdajte však, že každá farba so sebou nesie svoju náladu a každý človek má v sebe osobné vnemy, ktoré v ňom tá či oná farba vyvoláva.

Teplá farba aktívne upozorňuje na text, vďaka čomu je vizuálne väčší ako písmo rovnakej veľkosti v studených odtieňoch. Pre malé textové prvky viac svetlé farby, bočný obsah stránky je možné zvýrazniť farbou, ktorá je o 20-30% svetlejšia ako farba textu hlavného obsahu webovej stránky.

Pri výbere počtu farieb textu je lepšie obmedziť sa na dve dostatočne kontrastné farby (nepočítajúc čiernu a biely). Čierny text na bielom pozadí je klasika s dostatočným kontrastom.

4. Veľkosť písma (vlastnosť font-size)

Veľkosť základného písma v prehliadači je 16px a veľkosť nadpisov je nastavená v pomere k veľkosti základného písma (h1 - 2em, h2 - 1,5em, h3 - 1,17em atď.).

Zmenou veľkosti písma môžete dať textu vizuálny význam a upozorniť návštevníkov na najdôležitejšie časti textu. Vo všeobecnosti platí, že čím je prvok väčší, tým je dôležitejší.

Veľkosť textu v okne prehliadača je ovplyvnená rozlíšením monitora používateľa: text rovnakej veľkosti na monitore s s vysokým rozlíšením sa zdá byť menší ako text rovnakej veľkosti na monitore s nižším rozlíšením.

Písma z rôznych rodín rovnakej veľkosti môžu mať aj rôzne skutočné veľkosti.

S rastom rozlíšenia obrazoviek a monitorov je potrebné revidovať obvyklú veľkosť textu 12-14px. Pre bežný text je už všadeprítomná veľkosť písma 14-18px. Pri nastavovaní veľkosti písma treba pamätať na prispôsobivosť, t.j. veľkosť písma by sa mala meniť v závislosti od veľkosti obrazovky.

5. Zarovnanie textu (vlastnosť zarovnania textu)

Zarovnaný text vyzerá na vytlačenej strane dobre Rovnomerné rozdelenie slová riadok po riadku. Podobné formátovanie webových stránok pomocou CSS nemožné a zarovnanie textu na šírku tvorí veľké nepríjemné medzery medzi slovami. Preto je vo webovej typografii bežné používať zarovnanie doľava.

6. Medzery medzi písmenami a znakmi (vlastnosti medzi slovami a písmenami)

Rozstup medzi písmenami ovplyvňuje čitateľnosť textu. Zmena hustoty textu (zhustený a riedky text) spestrí tempo vnímania, čím sa dosiahne vyváženosť zloženia textu stránky.

Pätkové písma vyzerajú výraznejšie, keď sa zníži hodnota medzier medzi písmenami.

7. Riadkovanie (vlastnosť výšky riadku)

Optimálne riadkovanie je 1,4 – 1,6 násobok veľkosti písma.

Nadpisy a príslušný odsek tiež príliš neodsadzujte.

8. Dĺžka čiary

Riadok na nepretržité čítanie by sa mal zmestiť od 30 do 75 znakov (približne 7-10 slov na riadok). Čím širší je riadok textu, tým viac by malo byť riadkovanie... Riadkovanie by nemalo byť menšie ako medzera medzi slovami.

9. Štýl písma (vlastnosť štýlu písma)

Ovládaním typu písma môžete vytvoriť krásnu typografiu. Napríklad kurzíva dodáva textu určitú vážnosť. Tučné písmo plus zväčšená veľkosť písma vám umožňuje zvýrazniť požadovaný obsah, ale iba ak takýto text vynikne na pozadí blízkych objektov.

Vlastnosť variantu písma: malé písmená; dodáva textu typografickú sofistikovanosť transformáciou textu tak, aby sa všetky písmená odrážali malými veľkými písmenami. Táto technika vhodné pre malé kúsky textu.

10. Textová štruktúra a vizuálna hierarchia

V štruktúre webovej stránky sa rozlišujú tieto objekty:
logo / názov stránky;
názvy / nadpisy;
nadpisy na pozadí;
hlavný text;
navigácia;
hypertextové odkazy;
dlhé úvodzovky;
bočné panely;
podpisy / nápisy v tabuľkách, obrázky.

Každá položka zoznamu predstavuje základnú časť stránky a odôvodňuje potrebu jej zvýraznenia.

V HTML je šesť úrovní nadpisov, počnúc tým najdôležitejším

a končiac menej významnými

... Smerovanie

musí byť na prvom mieste v štruktúre dokumentu a nadpisoch nižšie úrovne mal by ísť za ním a podrobne mu poskytnúť informácie. Na zvýraznenie nadpisov môžete použiť techniku ​​zvýraznenia časti nadpisu.

Pre ľahšiu asimiláciu by mal byť text rozdelený na časti a pre každú časť vyberte nadpis príslušnej úrovne. Čím vyššia je úroveň nadpisu, tým by mala byť sekcia obsahovo zmysluplnejšia.

Vo všeobecnej štruktúre textu treba venovať osobitnú pozornosť odkazom, mali by ľahko vyčnievať z okolitého obsahu.

Na stránke sa nastavuje vizuálna hierarchia správna štruktúra aby bol text ľahko čitateľný a zrozumiteľný. Vo väčšine textov je delenie textu podľa významu. Spôsobov je viacero, najjednoduchší je rozčleniť text na odseky.
kapitál;
kurzíva;
tučný / tučný štýl;
veľkosť;
Farba;
výmena náhlavnej súpravy;
zmeniť polohu znakov na páse textu (horné a malými písmenami, odsadenie);
zvýrazňovanie znakov pomocou grafických prvkov – ukazovateľov, rámikov, ikon a pod.

Príliš veľa dôrazu nielenže príliš zdôrazňuje konkrétny fragment, ale tiež sťažuje čítanie.

11. Bezpečné fonty

Písma Windows / Písma Mac / Rodina písiem

Arial, Arial, Helvetica, bezpätkové

bezpätkové

kurzíva

monopriestor

Georgia 1, Georgia, serif

bezpätkové

Lucida Console, Monako 5, monopriestor

bezpätkové

serif

Tahoma, Ženeva, bezpätkové

Times New Roman, Times, serif

Trebuchet MS 1, Helvetica, bezpätkové

Verdana, Verdana, Ženeva, bezpätkové

Symbol, Symbol (Symbol 2, Symbol 2)

Webdings, Webdings (Webding 2, Webdings 2)

Wingdings, Zapf Dingbats

MS Sans Serif 4, Ženeva, bezpätkové

MS Serif 4, New York 6, serif

Arial, Arial, Helvetica, bezpätkové

Arial Black, Arial Black, Gadget, bezpätkové

Comic Sans MS, Comic Sans MS 5, kurzíva

Courier New, Courier New, Courier 6, monopriestor

Georgia 1, Georgia, serif

Impact, Impact 5, Charcoal 6, bezpätkové

Lucida Console, Monako 5, monopriestor

Lucida Sans Unicode, Lucida Grande, bezpätkové

Palatino Linotype, Book Antiqua 3, Palatino 6, serif

Tahoma, Ženeva, bezpätkové

Times New Roman, Times, serif

Trebuchet MS 1, Helvetica, bezpätkové

Verdana, Verdana, Ženeva, bezpätkové

Symbol, Symbol (Symbol 2, Symbol 2)

Webdings, Webdings (Webding 2, Webdings 2)

Wingdings, Zapf Dingbats (Wingdings 2, Zapf Dingbats 2)

MS Sans Serif 4, Ženeva, bezpätkové

MS Serif 4, New York 6, serif

Webdizajnéri majú dnes v rukách dostatok nástrojov a nástrojov na správne prezentovanie textu na webových stránkach. Žiaľ, či už z nedostatku času, alebo z neznalosti, nie všetci vývojári aktívne využívajú aj najzákladnejšie pravidlá typografie... Mnoho ľudí nechápe, prečo sa v princípe obťažovať webovou typografiou, keď existujú tony iných prvkov na dizajn webových stránok.

Účelom každej stránky je cielené informačné posolstvo a prvé, čomu návštevníci venujú pozornosť, je samozrejme text. Ukazuje sa, že celkový úspech webového projektu závisí od kvality poskytovaných informácií? Poďme na to.

V skutočnosti existujú určité podmienky kde typografia je takmer irelevantná. Sú nasledovné:

• nie je potrebné vytvárať a ďalej udržiavať imidž webového zdroja;
• informácie sa prenášajú ku koncovému používateľovi prostredníctvom médií;
• textová časť stránky je natoľko unikátna, že ju nie je potrebné používateľovi nejako špeciálne prezentovať.

Ak vezmeme do úvahy skutočnosť, že internetový priestor je v štádiu neustáleho vývoja, jedinečnosť akéhokoľvek webového zdroja je skôr relatívna. V konečnom dôsledku zvyčajne medzi konkurenčnými stránkami s virtuáln rovnaký obsah, najefektívnejší vyhráva. Mimochodom, použitie typografie v dizajne webových stránok do značnej miery určuje túto efektivitu. Ako vidíte, nezaobídete sa bez neho ani tu.

Typografické pravidlá a základy webdizajnu

Keďže typografia je pri vytváraní webových stránok taká dôležitá, existujú určité pokyny na jej používanie.

Webové písmo

Správny výber písma do značnej miery určuje koncept stránky a ovplyvňuje celkové vnímanie.

Hlavná rada! Pre stránky by ste nemali používať tie písma, ktoré nie sú štandardne dostupné. Bohužiaľ, kým automatická inštalácia fonty nie vždy fungujú a hrozí nesprávne zobrazenie webu v prehliadačoch používateľov.

Formátovanie textu

Správne počítačová zostava- jedna zo sekcií typografie.

Správne umiestnite interpunkčné znamienka, medzery, zátvorky, pomlčky, úvodzovky atď., Niektorí vyberaví používatelia na takéto chyby niekedy dokonca nedobrovoľne upozornia.

Makro a mikro typografia v dizajne webových stránok

Makrotypografia- všeobecná štruktúra textovej časti v kontexte dizajnu stránky ako celku. A dizajn textu (medzery medzi slovami, medzery medzi riadkami, fonty a iné drobné detaily) je už mikrotypografia.

Makrotypografia vám umožňuje vybrať si správnu farbu, písma a vďaka nim je blok textu koherentný a životaschopný a samotná stránka je atraktívna a organická. Mikrotypografia je navrhnutá tak, aby poskytovala ľahko čitateľný obsah.

Napríklad pri vytváraní stránky www.crowleywebb.com sa dizajnér spoliehal práve na makro a mikro typografiu:

Mimochodom, podobné stránky môžu byť vytvorené na základe šablón. Jedným z príkladov je HTML šablóna:

Veľkosť a štýl písma nastavený

Najpohodlnejšia veľkosť písma v texte je 12-16 pixelov. Ale nadpisy a podnadpisy (H1, H2, H3) sú zvyčajne o niečo väčšie. Je veľmi dôležité vyvinúť svoj vlastný štýlový systém a použiť ho v každom textový dizajn na zdroji. Odporúča sa použiť pre nadpisy a úvodzovky rôzne možnostištýl použitého písma alebo pre extra kontrast skúste použiť úplne iné písmo. Sústrediť sa na čo najviac dôležité miesta v texte by mal byť zvýraznený tučným písmom alebo kurzívou. Napríklad ako na webovej stránke www.hausofdesign.co.uk:

Dobré metódy rozloženia

Úspech zabezpečuje čitateľnosť textov.

Na ukážkovej stránke to môže vyzerať takto:

A toto je príklad úspešného rozloženia flash šablóny. Ak si to chcete pozrieť podrobnejšie, kliknite na obrázok.

Tu sa odporúča experimentovať, ale nezachádzajte príliš ďaleko od pravidiel verejnej sféry.

CSS štýly

CSS styling pomáha eliminovať akékoľvek chyby – veľkosti písma, farby, nešpecifikované písma atď. CSS zaisťuje, že typografia je konzistentná a konzistentná na všetkých stránkach webovej lokality. Aj keď jasne dodržiavate napríklad postupnosť používania určitých písiem na zdroji, aj najmenšia odchýlka od štýlu môže spôsobiť nesúlad vo vnímaní. To je dôvod, prečo by ste nemali ignorovať používanie štýlov.

Zarovnanie textu do blokov

Ľahšie je povedať, ako to nerobiť. Neoplatí sa zarovnávať text na stred a dokonca ani na šírku. Zubaté okraje text vycentrovaný po stranách je často ťažko čitateľný. Široký text tiež vizuálne kazí blok obsahu. Všeobecne uznávaným pravidlom umiestňovania textu na stránku je zarovnanie vľavo alebo vyhľadávanie. alternatívny spôsob prezentácia informácií.

S vývoj HTML a CSS štýlov, existuje viac spôsobov usporiadania textové informácie na stránkach lokality. Profesionálni dizajnéri teraz namiesto obrázkov zobrazujúcich nadpisy a iné názvy sekcií používajú typografické pravidlá.

Dobrý typografický dizajn - efektívna metóda na realizáciu pôvodného nápadu dizajnu však pravidlá webovej typografie nie sú také jednoduché, ako by sa mohlo zdať. S najväčšou pravdepodobnosťou je okrem teórie potrebné mať vlastný šmrnc, vkus a istú dávku skúseností. Aj keď experimentovanie nebolo zrušené. Experimentujte a nech je sila s vami!

P.S. Ako sa vám páči článok? Aby som bol úprimný, nenapísal som to. V skutočnosti som nikdy nepublikoval príspevok pre hostí a všetky články na blogu píšem ja osobne. No keď ma oslovila Olga Vladyko, jedna z autoriek webu TemplateMonster Russia (mimochodom toto je jej článok) a ponúkla mi spoluprácu s týmto populárnym projektom, súhlasil som.

Po prvé, nie je reklamný príspevok, vydaný za peniaze a článok, o ktorom som si istý, že bude užitočný pre mnohých mojich čitateľov. Alebo sa mýlim? Napríklad, ako mnohí iní, používam znak „-“ namiesto „-“ atď. Je to jednoducho pohodlnejšie, aj keď nie správne. Vo všeobecnosti nám znalosť pravidiel typografie webu nezaškodí.

Ďalším dôvodom je, že môj článok je o dôslednom odvádzaní návštevníkov z vyhľadávania. To znamená, že mnohí sa zaujímajú o témy pre stránku. A Šablóna Monster Rusko Je ruská pobočka www.templatemonster.com - svetový líder v oblasti web dizajnu, výroby a predaja vysoko kvalitných šablón webových stránok. Medzi ich partnerov patrí slávnych značiek, ako 1C-Bitrix, REG.RU, UMI.CMS atď.

Tu nájdete šablóny pre každý vkus: HTML, Flash, pre CMS a blogy, Facebook šablóny, pre internetové obchody a mobilné zariadenia. Vďaka tomu to bude jednoduché. Odporúčam vám, aby ste sa bližšie pozreli na stránku TemplateMonster Russia, možno je to to, čo ste už dlho hľadali. Teraz si pozrite video, kde o sebe povedia zamestnanci firmy. Ahojte všetci!

Od autora: Zdravím vás priatelia! Pokračujeme v analyzovaní zložitosti profesionálneho webdizajnu a dnes je na rade veľmi horúca téma – webová typografia. Bohužiaľ, veľa vývojárov nepozná ani samotné základy a pravidlá tohto smeru. Možno sa tým len netrápia a nechcú tým strácať čas, alebo možno úplne nechápu jeho význam. Vo všeobecnosti je mojím cieľom sprostredkovať vám, že typografia vo webdizajne je základom základov a bez nej sa len veľmi ťažko pohnete ďalej.

Typografia a posielanie správ

Účelom akéhokoľvek internetového zdroja je informačná správa cieľové publikum... Čo budú návštevníci vášho webu hľadať ako prvé? Samozrejme, k textu! (samozrejme, ak to nie je zanesené strapatými reklamami a množstvom hlúpych bannerov). Úspech vášho projektu bude v konečnom dôsledku závisieť od textu a iba od textu.

Poďme sa pozrieť na to, čo typografia skutočne ovplyvňuje vo webdizajne.

Po prvé, obrázok webového zdroja. Kvalitný vývoj je viditeľný voľným okom a nemusíte byť megašpecialista, aby ste odhadli, ako dlho sa chcete na stránke zdržať. Krivý nečitateľný text je prvým dôvodom, prečo návštevník opustí váš odkaz 10-15 sekúnd po zadaní.

Po druhé, jedinečnosť webového zdroja. Berúc do úvahy skutočnosť, že pri súčasnom tempe progresívneho rozvoja internetového priestoru je to absolútne jedinečný obsah- úloha je jednoducho nereálna, vašou úlohou je jedinečnosť prezentácie tohto obsahu. V súboji konkurenčných stránok vždy vyhráva ten, kto nezanedbá jednoduché pravidlá rozvoj, ale naopak – efektívne ich využíva a získava maximálny úžitok.

Základy typografie vo webdizajne

Fonty vo webdizajne

Typografia v vzhľad stránky má celkom prirodzené zákony a nariadenia. Začnime s fontmi. Správna voľba fonty do značnej miery určia koncepciu vášho dizajnu a ovplyvnia celkové vnímanie zdroja.

Ešte v nedávnej minulosti, hoci niekto o tých časoch vie len málo, dizajnéri mohli používať iba tie fonty, ktoré sprevádzali operačný systém... Všetko skvelé verzie neboli ničím iným ako obrazom alebo bleskom. Boli tam obchádzky, ktoré však priniesli veľa problémov.

Zavedenie CSS vlastnosti @ font-face práve uvoľnilo ruky dizajnérom. Zaregistroval som odkaz na ľubovoľný súbor písma a teraz sa už používa na stránkach webu. V tomto vlákne je zo strany vývojárov určitá nespokojnosť, ale ukázalo sa, že ide o úplne riešiteľný problém.

Upozorňujeme, že nie všetky písma sú vhodné pre kompetentný webový dizajn. Väčšinou pre ich nečitateľnosť a sťažené vnímanie obrazovky. Niektoré písma sa ukážu ako príliš ťažké a spomaľujú prácu zdrojov - na to určite dávajte pozor. tiež doplním technická vlastnosť pri práci s písmami: zobraziť ich v rôzne prehliadače- je taký problém spracovania spisu alebo aj celej rodiny.

Makro a mikro typografia

Ako ste už pravdepodobne pochopili z názvu týchto výrazov:

makroúroveň – stavia všeobecná štruktúra text, určuje umiestnenie obsahu vo vzťahu k dizajnu;

mikroúroveň - dbá na najmenšie detaily, medzery, rozostupy, odsadenie atď.

Globálnou úlohou makrotypografie je robiť textové blokyživý, aktívny, no zároveň harmonický a celistvý. Mikrotypografia má jednoduchšiu, no nemenej dôležitú úlohu – zabezpečiť čitateľnosť. Príkladov úspešných aj neúspešných riešení týchto problémov je na internete veľa.

Moderné tendencie a prístupy vo vývoji webu

Naučte sa algoritmus rýchleho rastu od začiatku pri vytváraní lokality

Budovanie holistickej kompozície spočíva predovšetkým v chápaní priestoru. Webdizajnér je povinný vidieť celý obraz, no zároveň ho kompetentne rozložiť do detailov. Nie sú tu žiadne nepodstatné prvky: nadpis, odsek, zvislé vzdialenosti medzi prvkami, registre, hrúbka ...

Odporúča sa špecifikovať písma pre webový dizajn v relatívne jednotky(% alebo "em"), vďaka tomu je obsah citlivý a flexibilný. Pre necitlivé kontajnery má zmysel používať známejšie „px“ pixely, keď sa bloky pohybujú pri zmene veľkosti obrazovky a písmo zostáva stabilné.

Formátovanie textu

Dôležitá sekcia typografia - počítačová znaková sada. Patria sem: umiestnenie interpunkčných znamienok, používanie zátvoriek, pomlčiek a pomlčiek, bodiek, medzier atď.

Takéto chyby na prvý pohľad nepredstavujú osobitnú hrozbu pre obsah alebo jedinečnosť obsahu, ale pamätajte: žiadny sebarešpektujúci zdroj nedovolí primitívne chyby v textoch. Pamätajte na obrázok, v ňom nie sú žiadne maličkosti!

Teraz o rozložení. Sú tu pravidlá:

Blok s textom by mal byť obmedzený na 40-50% šírky stránky.

Medzi odsekmi by mala byť medzera 1,5.

Kontrast medzi pozadím a textom by mal byť v rozsahu 75–90 %.

Písmo pohodlné pre oči je 12-16 px, ale ani ten najmenší blok by nemal byť menší ako 10 px.

Riadkovanie sa zachováva vzhľadom na veľkosť písma a meria sa v percentách, ideálne bude stačiť 140 – 150 %.

Zarovnanie textu na stred alebo na šírku sa považuje za mimoriadne zlú formu. Roztrhané medzery medzi slovami, ako aj roztrhané okraje odseky znižujú vnímanie a častejšie len otravujú.

CSS štýly

CSS štýl je nástroj na prácu s fontmi vo webdizajne. Zvládnutie štýlov CSS je východiskovým bodom každého tutoriálu. Na čo sú potrebné? Aby som zhrnul celú typografiu zdroja! CSS spája stránky a bloky do jedného celku, kontroluje prípadné odchýlky od hlavného chodu. Ako si viete predstaviť, jeden nápad nestačí, na jeho realizáciu budete potrebovať znalosti a zručnosti.

V jednom super článku som čítal, že webdizajn je z 95 % typografia. Verte či nie, každý sa rozhodne sám za seba. Ale text, ktorý sa nedá prečítať, je produkt bez účelu. Radím vám, aby ste začali dbať na kvalitu prezentácie informácií hneď, neodkladajte to. To je z mojej strany všetko. Prihláste sa na odber aktualizácií a nepríde vám o zábavu! Čau Čau!

Moderné trendy a prístupy vo vývoji webu

Naučte sa algoritmus rýchleho rastu od začiatku pri vytváraní lokality

Typografia

Tento článok vám pomôže pochopiť základné pojmy v typografii. A aby boli informácie lepšie a ľahšie vnímateľné, nudné texty sú dokreslené vtipnými obrázkami. Článok obsahuje aj najčastejšie chyby, ktorých sa webdizajnéri pri práci s textom dopúšťajú a dáva odporúčania, ako sa im vyhnúť.

Typografia je najsilnejší nástroj na vyjadrenie správy vo webdizajne. Pomocou neho môžete kombinovať textové a vizuálne komponenty, ktoré vám pomôžu osloviť vášho návštevníka. Správne používanie typografia vám môže pomôcť vyhnúť sa typické chyby povolené dizajnérmi pri vytváraní ďalšieho majstrovského diela. Pokúsime sa pochopiť, čo robíme zle a ako sa chybám v budúcnosti vyhnúť.

Najprv pochopme terminológiu. Väčšina pojmov je vám určite známa, ale nebude zbytočné sa s definíciami zoznámiť ešte raz. Možno to doplní informácie, ktoré už máte.

Typografia- súbor zákonov, pravidiel a noriem pre formátovanie textu, založený na štúdiu čitateľského vnímania súboru. Znalosť a pochopenie typografie mení text na nástroj na budovanie kompozície, oživuje ho, dodáva charakter a schopnosť sprostredkovať myšlienku nielen obsahovo, ale aj graficky.

Headset- písmo alebo niekoľko písiem so štylistickou jednotou obrysu. Pozostáva zo sady znakov. Tento pojem sa často zamieňa s pojmom „písmo“, hoci písmo je špecifický štýl znakov, zatiaľ čo typ písma definuje všeobecnú „skupinu“ typov písma.

Slúchadlá možno rozdeliť do dvoch hlavných kategórií:

• Starožitný- Serifové písma.
• Groteskné, respektíve je bezpätkové písmo.

V projektoch môžete použiť akékoľvek, neexistuje správna alebo nesprávna možnosť. Musíte sa pozrieť na situáciu, aký projekt robíte a čo je preň relevantnejšie.

Zdá sa, že pätkové písmo drží riadok, a preto sa čitateľnosť zvyšuje. Pätkové písma často vytvárajú pocit profesionality a autority v poskytovaných informáciách, vyjadrujú rešpekt, zdôrazňujú stabilitu a konzervativizmus v tom najlepšom zmysle slova. Bezpätkové písma majú tendenciu zdôrazňovať racionalitu, štýl, mladosť a modernosť. Pomáhajú vytvárať medzery medzi písmenami, ako aj oddeľovať jeden znak od druhého.

kolky- výška písmena vrátane klesajúcich a klesajúcich písmen. Merané v typografických bodoch (označené ako pt). Napríklad text napísaný s veľkosťou 14 bodov bude mať výšku 14 bodov.

Vedenie- riadkovanie. Vzdialenosť medzi základnými čiarami susedných riadkov.

Kerning- vzdialenosť medzi písmenami. Hlavným bodom kerningu je výber rôznych medzier medzi rôznymi pármi konkrétnych písmen na zvýšenie čitateľnosti.

Existuje nádherná simulátorová hra - Kern Type. Stačí dať všetky písmená na svoje miesta. V skutočnosti to nie je také ľahké. Proces je pomerne zložitý a vyžaduje si vynikajúce oko. Táto skúsenosť bude užitočná najmä pri vytváraní log.

čo robíme zle?

Používame veľké množstvo fonty

Odporúča sa použiť nie viac ako 3 štýly. Môžu to byť fonty rovnakého typu alebo rôzne. Napríklad typ písma Roboto obsahuje pomerne veľké množstvo rôznych závaží. Z nich si ľahko vyberiete tri, ktoré sú podľa nás vhodné pre našu stránku. Povedzme, že to bude Light, Regular a Bold. Môžete použiť Tučné alebo Svetlé pre nadpisy, Tučné pre tlačidlá a Bežné pre hlavný text. Preto sme pomocou jedného headsetu poskytli našu stránku správna typografia... Prirodzene, všetko závisí od témy stránky a myšlienky, ktorú plánujete vložiť do dizajnu. Môj príklad je univerzálny a nepredstiera, že je niečím jedinečným alebo výnimočným.

Nevieme akú veľkosť má mať písmo

Veľkosť textu na webe by mala byť aspoň 12 pixelov. Najlepšia voľba- v rozsahu 14-18 px pre hlavný text. Nie príliš veľké a zároveň čitateľné. Navyše, ak sme už zvolili veľkosť 16 px, mala by zostať 16 px na všetkých stránkach webu a nepreskakovať plus mínus 1 px z bloku na blok. Platí to aj o vedení, všade by to malo byť rovnaké.

Veľkosti písma by sa mali uvádzať v celých číslach, bez použitia desatinných zlomkov, napríklad 16,28 px. A, samozrejme, vo Photoshope musíte preložiť pt do px. Za týmto účelom vyberte v menu: Úpravy - Nastavenia - Základné. Ďalej - Jednotky a vládcovia. Zmeňte položky v rozbaľovacích ponukách "Text", "Pravítka" podľa pixelov. Kliknite na „OK“.

Dĺžka riadku – záleží na tom?

Dĺžka riadku nesmie presiahnuť 600 px. to optimálna veľkosť pre pohodlný pohyb pohľadu z jednej línie do druhej. Veľmi široká obsahová časť sa ťažko číta – často jednoducho stratíte riadok, na ktorý ste sa chystali prejsť po prečítaní dlhého predchádzajúceho riadku. Ak stále potrebujete roztiahnuť textové pole o 1000 px alebo viac na šírku, môžete skúsiť rozdeliť text na dva alebo viac stĺpcov. Ďalšou možnosťou je urobiť riadkovanie o niečo väčšie ako zvyčajne, aby sa riadky od seba oddelili viac vizuálne. Nezabudnite oddeliť text odsekmi, pomôže to tiež k lepšiemu čítaniu.

Úvod zodpovedá veľkosti písma

Riadkovanie by malo byť takmer vždy väčšie ako veľkosť písma. Okrem titulov. Aby ste dosiahli rovnováhu medzi textom a „vzduchom“, urobte riadkovanie približne jeden a pol násobkom výšky malé písmená... Alebo nastavte úvod na 150 % veľkosti písma. Veľkosť textu je napríklad 14 px, potom je riadkovanie 21 px. 14/2 = 7 + 14 = 21.

Vyberte si ľubovoľné písmo, ktoré sa vám páči

Myslím, že každý už vie, že písma na dizajn webových stránok sa najlepšie používajú s fonts.google.com a webfont.ru, pokiaľ vám, samozrejme, klient neposkytol svoje písmo.

Ó Lorem, lorem...

Je celkom prirodzené, že pri vývoji stránky sa obsah, ktorý tam bude, takmer vôbec nepoužíva – často tento obsah jednoducho ešte neexistuje. Preto dizajnéri (a tiež návrhári rozloženia) používajú „rybu“ - ľubovoľný text, ktorý sa hodí do blokov obsahu. To je celkom výhodné, najmä pre dizajnérov, pretože teraz notoricky známy "Lorem Ipsum ..." je možné vložiť priamo z Photoshopu (Menu: Text - Vložiť Lorem Ipsum). Ale pre stránky v ruskom jazyku sa to neodporúča - latinská abeceda neposkytuje predstavu o tom, ako bude text v azbuke vyzerať. Preto vám pomôže textový generátor.

Kontrola správnosti návrhu je jednoduchá: ak divák dokáže bez dotyku myši uhádnuť, kde odkaz je a kde nie, potom máme dobrú stránku. Preto je potrebné si vopred premyslieť, ako budú všetky odkazy na stránke vyzerať. Povedzme, že všetky klikateľné prvky majú rovnakú farbu, napríklad červenú, a nie klikateľné prvky toho druhého, čierneho. Potom nebude nikto zmätený.

Často je toto: názov je zvýraznený červenou farbou (koniec koncov, musíte ho nejako zvýrazniť), potom niekoľko ďalších veľmi dôležitých fráz USP modrej farby a to všetko je zmiešané s obyčajným čiernym textom. Na konci textu je tlačidlo, tiež červené. Je jasné, že musíte kliknúť na tlačidlo, ale ukázalo sa, že na modrý text bolo možné kliknúť (otvoril sa Ďalšie informácie). Ale kto vedel, kto vedel...

Zarovnanie

Existujú textové polia, ktoré sú často nesprávne zarovnané – sú zarovnané, zarovnané na stred a zarovnané doprava. Vo všetkých týchto prípadoch je nepohodlné čítať text a vizuálne to vyzerá neatraktívne. Zarovnanie by malo byť VŽDY zarovnané doľava. Aj keď to naozaj chcete urobiť správne zarovnané (len preto, že sa vám to zdá – kompozične by to tak malo byť) – je to nesprávne. Výnimkou môžu byť jedna alebo dve krátke vety, ktoré sú s najväčšou pravdepodobnosťou podnadpisy hlavného textu.

Kontrast

Kontrast je jedným z hlavných prostriedkov expresivity v dizajne. Netreba sa báť veľké formy a prázdne miesta! Stáva sa zámerne veľká typografia nezávislý prvok ktorý si nevyžaduje ďalšie grafické nástroje.

Typografia - dôležitý prvok v procese tvorby dizajnu webstránky, no častejšie pred ním prižmúria oči. Čiastočne je to spôsobené nedostatkom času, urgenciou práce a klienti takmer nikdy nevenujú pozornosť tomuto aspektu dizajnu. Spravidla sa písma a dizajn textu stránky používajú štandardne, bez akýchkoľvek špeciálnych ozdôb, maximálne je výber nadpisov v texte a niektorých ďalších prvkov stránky. Tí, ktorí venujú dostatočnú pozornosť webovej typografii, môžu získať majstrovské dielo dizajnu stránky iba vďaka fontom, vďaka čomu budú nezvyčajné, svetlé a kreatívne.

V túto sekciu blogové príspevky budú publikované o základoch typografie, poučeniach a tipoch pre začínajúcich dizajnérov pri tvorbe typografie webu a pod. Tiež môžete nájsť najlepšie príklady pomocou typografie, svetlé vzory stránky, programy a služby pre webovú typografiu a všetko, čo potrebujete na zvládnutie tejto oblasti webdizajnu.

Typografia je štýl, umiestnenie a vzhľad tlačených písmen / textu na stránke. V dnešnej dobe sa už stal neoddeliteľnou súčasťou webdizajnu. V zodpovedajúcej časti nášho blogu, ktorá bola dnes doplnená o ďalšiu publikáciu, nájdete veľa zaujímavých článkov na túto tému. Zvážte trendy dizajnu, ktoré sú relevantné pre tento smer, ktoré sa objavili a uchytili v roku 2018. Tento materiál bude skvelým doplnkom k vášmu záznamu webovej typografie. Príspevok je prekladom tejto poznámky. Cieľom každej stránky je prilákať...

Pokračujeme v aktualizácii starých blogových príspevkov a napĺňame ich novým obsahom - dnes to zvážime originálne obrázky na pracovnej ploche so slovami a textami. Tapeta určite osloví každého, kto miluje krásnu typografiu v jej rôznych podobách. V niektorých ohľadoch vzdialene pripomínajú abstraktnú tému, ale z hľadiska štýlu sú tu úplne odlišné implementácie: tu je ukážka pre vás nezvyčajné fonty, a kreatívne textové kompozície z 3D objekty; svetlé, svetlé, tmavé obrázky; minimalistický...

Po zvážení minitrendu s lietajúcimi logami vám chceme predstaviť ďalší relevantná téma, ktorý bol nedávno zverejnený na médiu. to pôjde o veľmi originálnym spôsobom výber textu pomocou podkladovej "podložky" vo forme farebnej tučnej čiary. Nižšie v článku nájdete niekoľko príkladov tejto techniky. Samotné rozhodnutie vyvoláva dosť nejednoznačnú reakciu komunity. Od úsvitu klasického „jednopixelového“ podčiarknutia boli niektorí dizajnéri zmätení ...

Google Fonts je skutočne jedným z najväčších archívov bezplatné fonty so stovkami náhlavných súprav. Vzhľadom na jeho všestrannosť a všeobecnú dostupnosť sa stratí takmer akýkoľvek bod štandardného používania bežných písiem. Pomocou služby môžete implementovať rôzne neštandardné príklady typografie. V tomto článku nájdete výber 10 bezplatných google fonty Fonty, ktoré sú ideálne pre hlavičky webových stránok. Sú inštalované v mnohých webových projektoch po celom svete. Materiál…

Moderné webové technológie uľahčujú používanie nie štandardné písma pre dizajn textov na stránke sú však ešte ďaleko od možností Photoshopu. Špeciálne štýly pre Photoshop pomôžu dizajnérovi vytvárať efektné ilustrácie a obrázky pomocou fontov. V blogu som už zvažoval rôzne efekty na texty vo Photoshope, dnes bude príspevok na rovnakú tému, ale s oveľa väčším výberom užitočné materiály... Predtým, ako sa pohneme ďalej...

CSS3 poskytuje úžasné možnosti úpravy textu. Teraz v arzenáli webmastera (alebo webdizajnéra) existujú typografické techniky a úroveň kontroly, o ktorej sa predtým dalo iba snívať. To všetko dokonale demonštruje návod z blogu EchoEnduring, ktorého preklad vám ponúkam. Výsledkom je jednoducho nereálne zaujímavý dizajn textu a ani sa mi nechce veriť, že sa to všetko robí pomocou CSS štýly, naozaj teraz internet...

Tento príspevok bude zaujímať tých, ktorí sú v tento moment myslí na typografiu stránky. Ak vyvíjate nejaké nový projekt od nuly alebo začali s redizajnom, možno budete potrebovať dva zaujímavá služba s ktorým sa vám chcem predstaviť. Prvá služba vám pomôže vyplniť rozloženie zástupným textom (aka „ryba“), druhá - určiť jeho štýl. Keď „vykúzlite“ nový layout, zvyčajne tam ešte nie je žiadny obsah, zatiaľ čo ...

Typografia pre webovú stránku je pomerne dôležitým dizajnovým prvkom, ktorý v Runete akosi nie je výrazne vyjadrený. Táto otázkačasto stúpa na anglicky písaných zahraničných dizajnérskych blogoch, prakticky tomu nevenujeme pozornosť. Nie, samozrejme, pri vytváraní layoutu väčšina dizajnérov myslí na písma, dizajn, ale veľmi skromne a málo. Pretože pravdepodobne v Runete môžete spočítať na prstoch počet projektov s jasným, kreatívnym a neštandardným ...