Share
Învățarea tuturor despre insultele și marginile tehnice ale tipografiei este bună. Acesta vă va oferi o bază solidă atunci când căutați fonturi și fonturi și vă va ajuta să înțelegeți mai mult despre arta de tipografie în sine. Veți realiza în curând cât de mult efort este nevoie pentru a obține tipul corect oricând, nu doar pe web.
Unul dintre cele mai importante aspecte ale tipografiei pe web este ritmul vertical - și acesta poate fi unul dintre cele mai dificile pentru a obține dreptul, deoarece de multe ori durează mult timp și experimentează. Există numeroase moduri de a realiza un ritm verticat bun pe o pagină, deși unii ar putea să se toarne la ceea ce simte și arată exact pe ecran.
Ritmul este ...
un model puternic, regulat, repetat de mișcare sau sunet
și cu cât este mai consistent și familiar un ritm, cu atât mai bine și mai puternic devine.
Putem aplica acest lucru pe web cu termenul "ritm vertical" - în cultura occidentală, așa cum citim de la stânga la dreapta și de sus în jos, vrem să încercăm să păstrăm un ritm vizual consistent la conținutul paginii noastre. Menținerea consecventă a ritmului nostru vertical înseamnă că putem crea o experiență vizuală mai relaxantă, evocând un sentiment de familiaritate cu utilizatorii noștri, eliminând barierele vizuale și făcând conținutul mult mai ușor de citit.
Crearea unui ritm vertical bun pe un site web poate fi dificil. Scopul este de a crea o relație armonioasă între tot conținutul (inclusiv imaginile și text) pe site-ul dvs..
De exemplu, cum arată spațiul dintre paragrafe (este prea mare sau prea mic?), Cât de ușor te-ai găsit, pentru a citi? Există multe întrebări pe care le puteți întreba și cele mai multe dintre ele se vor arunca în jos la cât de ușor este să citiți conținutul site-ului dvs. (chiar și prin scanarea rapidă). Chiar și cele mai mici schimbări care fac ca o experiență de lectură mai bună pe site-ul dvs. să facă o diferență uriașă pentru utilizatorii dvs..
Deci, acum știm ce ritm vertical este, trebuie să învățăm ceva mai mult despre ceea ce face un ritm verticat bun. Cheia aici este lizibilitatea.
Când lucrați cu tipografia pe web, cele două lucruri majore pe care doriți să le acordați atenție sunt dimensiunile fontului și înălțimile liniei. Deși există atât de multe lucruri care merg împreună cu cele două lucruri, acestea sunt cele două componente cheie ale dvs. pentru a crea un ritm vertical mai bun pe designul dvs. de pagină. Dacă dimensiunile fontului dvs. nu se potrivesc bine - de exemplu, având dimensiuni masive de titluri și dimensiuni ridicol de dimensiuni ale textului paragrafului corpului, de exemplu - atunci acest lucru va face conținutul mult mai greu de citit sau scanat rapid. În mod similar, în cazul în care conținutul dvs. are o înălțime a liniei care face ca textul să fie greu de citit - fie prin distanțarea prea strânsă împreună, fie prin faptul că este prea departe - care vă va dezactiva utilizatorii atunci când doriți să vă angajați.
Crearea unui ritm vertical bun în design-ul dvs. vine cu o mulțime de practică, dar și o mulțime de teorii și, uneori, de matematică.
În primul rând, trebuie să începeți să vă uitați la o linie de referință (cunoscută și ca o rețea de referință). O linie de bază este linia standard de înălțime pe care vă veți baza ritmul vertical pe - și de acolo, puteți începe să utilizați această linie de bază pentru a vă ajuta în linii de înălțime pentru toate celelalte fonturi și conținut în design.
Site-ul lui Trent Walton este un exemplu strălucit de ritm vertical bun în design. Când lucrați cu o linie de bază, este o idee bună să mergeți cu înălțimea liniei de dimensiune a fontului cel mai frecvent utilizat sau primar în designul dvs. Cel mai simplu exemplu pe care îl pot gândi este să vă gândiți la dimensiunea principală a fontului dvs. de 100% (ceea ce echivalează cu 16 pixeli în majoritatea browserelor). Dacă aveți o înălțime a liniei de 1, înălțimea liniei dvs. va fi, de asemenea, de 16 px. Cu toate acestea, înălțimile de linie sunt, de obicei, cele mai bune așezate între 1,4-1,6 ori dimensiunea fontului dvs. (vizual, acest lucru pare să funcționeze cu majoritatea fonturilor - deși nu luați asta ca regulă, pur și simplu jucați cu el). Dacă ne uităm apoi la o înălțime a liniei în mijlocul căruia, de 1,5, înălțimea liniei noastre va fi de 24 de pixeli - și acesta este numărul nostru de bază. De aici încolo, dorim să ne asigurăm că toate conținutul și elementele tipografice ale designului se potrivesc sau se adaugă până la această cifră de 24px.
Un alt lucru important care trebuie măsurat este marjele noastre. O modalitate foarte ușoară de a vă menține ritmul este de a folosi acest număr magic (24px) pentru marjele noastre.
Am fost un mare fan al marjelor de o singură direcție de când Harry Roberts a sugerat acest lucru într-un articol la jumătatea anului 2012, unde marginile pe care le aplicăm tuturor elementelor de nivel bloc sunt plasate într-o singură direcție (adică: în partea de jos a elementelor ). Același lucru se poate spune și atunci când proiectăm, așa că 24px este numărul nostru magic - și numărul că totul ar trebui să fie multipli sau cel puțin la - putem adăuga o margine inferioară la nivelul tuturor blocurilor elemente de 24px (sau 1.5rem, dacă preferați - totuși doriți să adăugați acest cod în CSS-ul dvs. este bine!). Acest lucru ne ajută să ne menținem ritmul vertical care curge frumos și face ca toate elementele noastre să fie în conformitate cu linia de bază pe care am creat-o.
Un mic sfat pe care-l găsesc atunci când lucrez cu imaginile în design-ul meu - și asigurându-mă că nu ne aruncă complet ritmul de bază și ritmul vertical - este să ne asigurăm că înălțimile imaginii se potrivesc cu un număr mai mare decât numărul magic al nostru. De exemplu, o imagine ar putea avea o înălțime de 240px (10 x 24px, numărul nostru magic) cu o margine de jos de 24px. Sau ar putea avea chiar o înălțime de 252px cu o margine de jos de 12px - atâta timp cât totul se adaugă la acel multiplu de 24px, ar trebui să fim bine.
Deși este important să vă amintiți numărul dvs. magic, puteți să vă rupeți întotdeauna ușor de la el - dacă ceva nu se simte bine la înălțimea de 1,5 linii pe care le-ați setat, încercați altceva - atâta timp cât puteți alinia celălalt astfel încât acesta să se întoarcă în linia de bază și să vă mențină ritmul vertical vertical.
De exemplu, dacă alegeți să mergeți cu o înălțime a liniei puțin mai mare de 26 de pixeli (care funcționează la aproximativ 1.625 de ori mai mare decât dimensiunea originală a fontului am avut 16px), atunci atâta timp cât marginile dvs. reflectă acest lucru, atunci ritmul vertical va fi bine. Pe măsură ce am adăugat încă doi pixeli la înălțimea liniei, trebuie să luăm cei doi pixeli din marginea inferioară a elementului respectiv. Evident, dacă puteți, încercați să căutați modele în designul dvs. unde ar putea să se întâmple acest lucru și arhitectați CSS într-un mod care să reflecte acest model - creând astfel o clasă CSS modulară pentru elementele care au modelul de design, așa cum ați face cu orice proiect esti in curs de dezvoltare.
Lucrul pentru a crea un ritm verticat bun poate fi greu - dar, din fericire, ca și în cazul majorității tehnicilor de proiectare și dezvoltare, există câteva instrumente bune care să ne ajute. Mi se pare că aceste instrumente sunt deosebit de bune pentru a practica și a înțelege mai mult despre tipografie pe o pagină.
Typecast este un instrument uimitor pentru designeri - nu numai că vă permite să jucați cu mii de fonturi diferite sau combinații de fonturi, dar ne ajută, de asemenea, în stabilirea și formarea unei linii de referință corecte. Mi se pare că mă scufund mereu în asta înainte de orice altceva când încep să mă uit la tipografie în designul meu.
Scara modulară este o altă tehnică mică care poate fi folosită sau utilizată în proiectarea cu tipografie - așa cum este descris pe A List Apart
o scară modulară este o secvență de numere care se raportează unul la altul într-un mod semnificativ.
Tim Brown
Aceste numere pot fi folosite (printr-o mulțime de experimente și schimbare și schimbare) în desenele dvs., dacă doriți. Cel puțin merită o privire și o piesă - și vă poate ajuta să luați decizii mai informate despre lucruri precum lățimea containerelor și cum aceste alte numere pot juca, de asemenea, un rol în ritmul vertical.
Dacă sunteți un fan al proiectării în browser sau doriți doar să vă asigurați că liniile de bază pe care le-ați proiectat în altă parte sunt urmărite atunci când începeți codarea - atunci folosirea unuia dintre aceste două pluginuri JavaScript vă va ajuta să verificați modul în care este linia de bază care funcționează în codul dvs. Primul (Basehold.it), de Dan Eden și Michael Wright, vă oferă o suprapunere JavaScript pe pagina dvs. web, în timp ce Baseline.js de Dan Eden vă oferă o modalitate de gestionare a imaginilor pe pagina dvs., dacă acestea sunt necesare.
Pentru această sarcină, vreau să jucați pur și simplu cu o rețea de referință - fie că este vorba de o încercare în Typecast, folosind unul dintre pluginurile JavaScript menționate mai sus sau pur și simplu prin crearea unei schițe de referință în Photoshop sau în alte aplicații grafice. tu. Odată ce ați pregătit o rețea de bază, începeți să puneți în ea principiile acestui articol; așezați o parte din conținutul dvs. și începeți să aflați cântarele și dimensiunile de font pe care doriți să le utilizați.
Odată ce ai cei pe loc, începe să te uiți la modul în care toate acestea se leagă împreună cu grila de bază. Dacă nu ați făcut niciodată acest lucru înainte, poate fi destul de mult de lucru pentru a vă capul în jurul valorii de - dar merită să luați timp pentru a înțelege exact cum funcționează. După aceasta, veți putea începe integrarea unui ritm vertical bun în design-ul site-ului dvs. mult mai ușor - și utilizatorii dvs. vă vor mulțumi!
Accentsconagua