Krásna typografia v webovom dizajne. Krásna typografia v Web Design Krásna typografia

Kurátorom zdrojov na typewolf Fonts Jeremy Schoaf si vybral príklady lokalít so zaujímavými riešeniami písma a opísali ich výhody a nevýhody.

V kombinácii s tenkou textúrou papiera, táto typografia vytvára pocit, že ste si prečítali knihu.

Jednoducho guma.

Vďaka webovým písmam, pomáha zmestiť typografiu obalu výrobku do miesta typografie výrobcu. To sa deje viac a častejšie. Site Jednoducho guma si vybrala Gotham pri kreslení svojej značky, ktorá si zachováva totožnosť konštanty a na online a on offline kanálov.

Táto stránka je dobrým príkladom toho, ako je len jeden ťah je niekedy jediný potrebný. Pomocou rôznych nasýtenia Gothamu a nastavenia hlavičiek v hornom prípade jednoducho guma nainštalovala jasnú hierarchiu všetkého s jednou intenzitou.

Logá v hlavičke a päte stojan vo formáte PNG, takže stratia jasnosť a škálovateľnosť webového písma. Použitie webového písma pre logo nie je vždy možné, najmä ak potrebujete dobrú kontrolu nad curlingom; Avšak, obraz v SVG bude vyhovovať v tomto prípade lepšie ako png, pretože môže miesiť a zároveň zachovať jej jasnosť.

Zhrnutie

Našťastie boli vyššie uvedené príklady, ktoré sú uvedené, pretože určité riešenia v typografii môžu ovplyvniť dizajn. Tu máte nejaké kľúčové myšlienky:

Ak budete používať niekoľko ťahov, potom vyvinúť konštantný systém v konkrétnej typografii a držte sa ho.
Pre hlavný text vyberte písmo s normálnym kurzívou, mastným nápisom a fitness tučným štýlom.
Ak si vyberiete populárny dizajn, pokúste sa ho spojiť s menej privedením, aby sa dizajn rozlišoval.
Urobte sprievodcu štýlom na samom začiatku projektu, aby ste zaručili postupné používanie fontov medzi členmi tímu.
Použite kontrast, a nie podobný dizajnu.
Nepoužívajte fonty na obrazovke pre hlavný text. Použite návrh v určení.
Nebojte sa používať len jeden sedem z remízy. Môžete nastaviť hierarchiu pomocou rôznych saturácie a štýlu jednej rodiny.
Ak vám vaše logo umožňuje, aby sa v SVG poskytli definíciu a škálovateľnosť.

Vynikajúca webová stránka začína krásnou typografiou. A hoci niektoré pravidlá môžu byť rozbité, niekedy sa vráti k základným princípom toho, čo je dobrá typografia a ako ju vytvoriť.

Táto pripomienka vám pomôže s novým pohľadom na vaše projekty, premýšľať o nových prístupoch, alebo sa vráťte do jednoduchšieho dizajnu.

Takže, dnes ignorujeme módne trendy, zamerať sa na teóriu typografie a o tom, ako nám "pravidlá" pomôžu pri vytváraní krásnych textov.

Veľkosť a hierarchia

Na veľkosti záleží. Ak chcete vytvoriť typografiu spotrebného materiálu, môže to byť rozhodujúcim faktorom. Malý text je ťažké zvážiť, nie niečo na čítanie, ale príliš veľké, prekročí výšku čiary a vedie k nejasnostiam.

Čitateľná typografia má niekoľko vrstiev hierarchie. Tieto vrstvy naznačujú užívateľovi, ktorý je potrebné čítať v prvom, v druhom a na treťom mieste. Tiež existuje zrejmá hierarchia vo veľkostiach textu - jedna veľkosť titulkov, druhá, na hlavnom texte, a tretí v titulkoch.

Sledovanie a Kernie

Sledovanie a Kernie sú často zmätené. Karning je selektívna zmena intervalu medzi písmenami v závislosti od ich formulára. Sledovanie je zmena intervalu medzi množstvami písmen, t.j. odsekov alebo všetkým blokom textu.

Kerning sa často aplikuje na špecifické prvky na vytvorenie jasnosti, zlepšenia čitateľnosti, a to aj na štýlové veľké výňatky textu. Sledovanie sa často používa na zúženie príliš široký font hlavného textu.

Obmedzte počet použitých štýlov štýlov

Pre väčšinu projektov existujú dva alebo tri štýly. Aby ste neurobili chybu pri výbere, nájdite rodinu písma s veľká kvantita K dispozícii sú variácie kreslenia. Fonty najvyššej kvality majú širokú škálu štýlov - tuk, obvyklé, kurzíva, kondenzované, čierne, atď.

Mix a porovnanie štýlov

Odporúčam vybrať dva rôzne štýly. Najčastejším párom je Serif a Sans Serif. Pripojenie rôznych štýlov a kreslí, pozrite sa na písmená s rovnakou výškou a tvarom misky (priestor vnútri uzavretých písmen, ako napríklad "O").

Tieto malé detaily výrazne ovplyvnia, ako sa tieto fonty budú pozerať spolu, a na pohodlie čítania textu.

Prevod a vypnutie

Vo väčšine prípadov, prevody reťazcov a nepotrebujete to. V prípade online textu tieto techniky komplikujú len rýchle asimiláciu a porozumenie. Prevody zasahujú do čítania a úplný výkon často nevedie k nečitateľnému formátovaniu.

Nemeňte fonty

Nikdy nemeňte písmo. Nesnažte sa, aby bol hrubší, tenší alebo vyšší. Je lepšie si vybrať inú.

Dizajnéri vývoja fontov trávia veľa času, že toto písmo konzultuje a uspokojí štýl štýlu. Nie je potrebné nič meniť. Nebudete môcť zlepšiť, a vo väčšine prípadov to bude pokaziť všetko.

Ak vám písmo nevyhovuje, pozrite sa na niečo iné. Použite nástroj IDENTIFONT Podobné písmo, nástroj, ktorý definuje podobné fonty.

Kontrast

Použite typografiu na vytvorenie kontrastu. Ako vytvoriť hierarchiu, ktorú používate rôzne veľkosti, vytvorte vizuálny záujem zmenou hmotnosti, farby a štýlu písma.

Farba je jedným z najúčinnejších a jednoduché spôsoby Tvorba kontrastu. Perfektný kontrast - tmavý text na svetlom pozadí (alebo naopak). Máte takmer neobmedzený súbor farieb, ktoré vám pomôžu dosiahnuť tento cieľ. Hranie s farbou a typografiou, majte na pamäti, že niektoré farebné kombinácie, napríklad jasne červené na svetlej modrej, môžu byť dosť ťažkosti.

Keď príde na kontrast, vytvoriť ručne čitateľný text najlepšie využiť jednoduché pozadie. Ak však obsahuje takéto vizuálne prvky ako obrázky alebo vzory, potom zvýšte veľkosť písmen - to vytvorí oddelenie medzi pozadím a textovými prvkami popredia.

Formát zberu

Formát pádu vytáčania je veľkosť textu kontajnera. Môže to byť šírka celého textového rámca alebo jediného stĺpca.

Formát reťazca je dôležitý, pretože počet znakov (vrátane medzier, špeciálnych znakov a interpunkčných znakov) na obrazovke ovplyvňuje čitateľnosť. Ak sú riadky príliš dlhé alebo príliš krátke, vzhľad používateľa sa bude ťažko pohybovať.

Z prvkov typografického štýlu: "Akýkoľvek počet znakov, v rozmedzí od 45 do 75, sa považuje za uspokojivú dĺžku reťazca pre jedno stĺpový súbor. 66-znakový reťazec (vrátane písmen a medzier) je považovaný za dokonalý. Pre multicolónový set bude ideálny priemer reťazec, dlhý 40-50 symbol. "

Aj napriek skutočnosti, že v čase uverejnenia tejto knihy nikto nepremýšľal o mobilnej typografii, odporúčanie týkajúce sa multicolonového súboru nestratila relevantnosť. V prípadoch s malými obrazovkami môžete dokonca používať 35 znakov na reťazec.

Preklad článku Carrie Casins

Tento zoznam je zostavený podľa výsledkov II. 2008. Predchádzajúce "Hit Parads" možno nájsť a.

Každý príklad je sprevádzaný stručným komentárom a stlačením tlačidla Screenshot vedie k pôvodným stránkam.

Konferencia osiva

Žiadny blesk, žiadne obrázky, žiadny hluk; Len dobre štylizované písmo a dobre napísaný text: skutočný dôkaz, že s iba písma môžete získať veľký výsledok. Chcel by som vidieť ďalšie príklady tohto druhu.

Navrhovanie správ.

Veľký kontrast medzi názvom a hlavným obsahom, množstvom čistého priestoru a dobrou organizáciou.

Omniti.

Príjemné logo, jasné texty a veľmi peknú farebnú schému. Získajte viac informácií o vývoji dizajnu možno čítať.

Designr.it.

Nádherné vhodné logo (niekto vie, aký druh fontu?) A mnoho rafinovaných častí.

Návrhový pohľad.

Andy Ratdlezh - dizajnér, ktorý v praxi uplatňuje tie isté zásady, ktoré podporujú. Páči sa mi, ako mení veľkosť luku v závislosti od dátumu uverejnenia článku, takže najvýraznejší text zodpovedá najväčšiemu kehalu.

WordPress.org & WP 2.5.x admin

Hoci platforma WordPress Blogger nie je založená na webovej stránke, ale ich webová stránka sa zobrazuje na tisíce, ak nie milióny, naše obrazovky každý deň. Rád by som sa ako viac online a offline aplikácie.

OURTYPE.

Naozaj som nechcel zahrnúť túto stránku v prehliadke, pretože na ňom sa používa blesk. Niektoré vynikajúce fonty sú však prezentované (a niektoré z mojich obľúbených položiek musia pridať).

Paluby.

Ďalšia stránka, ktorá je založená len na fontách vo všetkom. Vynikajúci príklad hierarchie a označovania. Kto povedal, že "fotografia hovorí viac ako tisíc slov"? Nie, font hovorí lepšie.