Rešetka od 8 točaka: tipografija na webu

Web tipografija zbunjuje. Znate li najbolje prakse?

Kad sam počeo razgledavati popularne web stranice kako bih otkrio najbolje prakse za web tipografiju, moram priznati da sam bio zbunjen. Ispod je nekoliko primjera tipografskih ljestvica koje sam izvukao s nekoliko popularnih web stranica i dizajnerskih sustava. Možete li pronaći obrazac objedinjavanja?

Jasno je da postoje različiti pristupi tipskim sustavima. Stvarnost je takva da se kao web zajednica ne slažemo svi. Međutim, kao i većina problema s dizajnom, doista započinje rješavanjem korisnikovih potreba.

Tri arhetipa tipografskih sustava

Evo tri opća arhetipa tipografskog sustava. Većina tvrtki u jednom će trenutku iskoristiti sve tri, ali važno je prepoznati osnovne potrebe korisnika kojima se rješava svaka orijentacija.

Marketinška web lokacija

  • Svrha: Izgrađen da ispriča određenu priču i nadahne posjetitelje da svoje vrijeme i / ili novac provedu na web mjestu.
  • Zahtjevi: Svaka će vrsta slova trebati vlastiti set stilova, a raznolikost veličina zasnivat će se više na umjetničkom smjeru nego na uklapanju elemenata.
  • Slučaj prilagodljive upotrebe: sustav će se trebati prilagoditi u različitim veličinama, od mobilnog do stolnog računala.

Web iskustva usmjerena ka tome da vam nešto završi u ovoj kategoriji. Ambiciozni krše sva pravila tipografije da bi stvorili uvjerljiva i zadivljujuća iskustva.

Iako se puno razmišlja o tim web mjestima, fokus je na stvaranju prskanja, a ne na proširivom sustavu koji se može nadograditi u budućnosti. Ta web mjesta obično imaju kratak vijek trajanja i u potpunosti se odbacuju za redizajn od vrha do dna.

Napredni primjer za to je funkcija interpolacije koju su koristili Leigh Taylor i Nick Jones na Invisovoj odredišnoj stranici.

<H1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799)) ;. Tipografija na stranici precizno je izračunata da radi na svim veličinama zaslona.

"Korištenje matematike za dinamičko usmjeravanje umjetnosti" - Leigh Taylor

Blog / Info web mjesto

  • Svrha: Prenijeti veliku količinu tekstualnih informacija.
  • Zahtjevi: Glavno područje čitanja može koristiti sustav visine crte na temelju omjera, baš kao što to čini ovaj članak o Mediumu.
  • Slučaj prilagodljive upotrebe: vjerojatno će reagirati, ali zadržavajući fokus na čitljivosti.

Ovaj članak o Medijumu primjer je web iskustva stvorenog za čitanje u dugoj formi.

Fokus nije na tumačenju malih vizualizacija ili ispunjavanju obrazaca. Omjeri veličina koje su odabrali posebno su stvoreni za ograničenu čitljivost kako bi se dobila željena duljina crte. Mogu komotno čitati svaki redak jer je tipografija pažljivo izrađena kako bi odgovarala mojim potrebama čitatelja.

Proizvod

  • Svrha: Izgrađen za rješavanje korisničkog problema poput podnošenja poreza, upravljanja git repo-om ili vizualizacije mjernih podataka izvedbe.
  • Zahtjevi: Tekst se mora lijepo uklopiti u hijerarhiju elemenata. Tekst se uglavnom koristi za naljepnice, upute i prikazane podatke.
  • Slučaj responzivne upotrebe: minimalno reagira. Visoko razvijeni proizvodi koristit će adaptivni dizajn što znači različita iskustva za mobitele i stolna računala. Fokus je na hijerarhiji elemenata koji podržavaju korisničko iskustvo.

Googleov materijalni dizajn popularan je jezik dizajna koji je primjenjiv na mnoge slučajeve upotrebe proizvoda.

Metoda razmaka materijala temelji se na 8pt komponentnom mrežnom sustavu i 4pt osnovnoj mreži za tipografiju. Pokušavaju skalirati visine linija s koracima od 4. Skaliranje koracima od 8 s osnovnom mrežom može biti teško, jer su dostupne visine crta predaleko za neke veličine teksta.

Odličan put prema naprijed je dopustiti da neke veličine slova budu popraćene odgovarajućom visinom crte. Uvijek možete preskočiti razmak iznad ili ispod zadane crte za 4 piksela kako biste je poravnali s većom atomskom rešetkom.

Kada se primijeni, osnovni mrežni sustav ima mogućnost poravnanja prostornog sustava elemenata (mreža od 8 pt) sa tipografskim sustavom kako bi stvorio uvjerljiv vertikalni ritam u dizajnu.

Provedba web tipografije - u stvarnosti

Moguće je imati samopouzdano i strukturirano korisničko sučelje koje se pridržava rešetke od 8 pt koja također ima područje čitanja dugog oblika.

Dopustite fiksnom osnovnom mrežnom sustavu da obrađuje tekst unutar vaših strukturiranih komponenata i upotrijebite modularnu ljestvicu kako biste stvorili optimalno iskustvo čitanja za blog ili dokumente koje ste dodali na svoje mjesto.

Većina tvrtki za digitalne proizvode to čini već između svoje marketinške odredišne ​​stranice, digitalnog proizvoda i svoje dokumentacije. Donošenje odluke o strukturiranju tih tipografskih područja zasebno može vas osloboditi neodržive složenosti.

Zamka - Ems, rems i pikseli, bože!

Da bi se izrazio jasan i dosljedan sustav, tim proizvoda koji ga gradi mora jednostavno tumačiti mjerenja tipografije.

Relativne jedinice poput rems-a i ems-a ponekad se pogrešno razumiju i, prema mom iskustvu, to dovodi do neodrživog tipografskog sustava. Na primjer, omjer između veličine 14px fonta i 20px visine retka ne bi se trebao bilježiti u relativnim jedinicama, jer bi se taj omjer trebao mijenjati kako se veličina fonta povećava.

Određivanje visine crte od 1,4285714286em je smiješno, jer većina ljudi ne može raditi takvu matematiku u glavi. Ako se veličina fonta poveća na 16 piksela, preglednik će prikazati visinu retka od 22,857142 piksela, a takva vrsta dijeljenja piksela predstavlja glavobolju koja čeka da se dogodi. To stvara zabunu i predstavlja zlouporabu relativnih jedinica. Potpuni popis apsolutnih i relativnih jedinica pogledajte ovdje.

Zašto se danas toliko mnogo sustava dizajna temelji na relativnoj veličini? Odgovor je "pristupačnost".

Međutim, preglednici ne povećavaju osnovnu veličinu fonta kada povećavate command +. Postoje alati za pristupačnost koji će prilagoditi osnovne veličine fontova korisnicima koji ih trebaju. Preporučujem pravilno testiranje kako biste bili sigurni da je to iskustvo koje želite da korisnici imaju. Dostupnost check box-a može naštetiti više nego što pomaže.

Korištenje rems-a i ems-a na vašoj web lokaciji / aplikaciji nevjerojatno je moćno. Postoji mnogo vrlo zanimljivih slučajeva korištenja i oni bi trebali biti važan dio vašeg alata.

Moj je prijedlog štedljivo ih koristiti dok ih solidno ne iskoristite. Uključivanje u srž vašeg tipografskog sustava može vas otvoriti zbunjenosti i neočekivanim korisničkim iskustvima.

8pt mrežna tipografija

Najsnažniji dio 8pt koncepta mreže je njegova sposobnost postizanja dosljednosti u vašim dizajnom. Morat ćete procijeniti potrebe svojih korisnika i najbolji način da prilagodite svoju tipografiju kako bi udovoljila tim potrebama.

Toplo potičem dizajn i inženjering da surađuju na dovršenju ovih standarda za tvrtku / proizvod.

Evo primjera s nekoliko poznatih imena: Google Material, Pivotal, Atlassian, Intuit.

Reference i srodno čitanje

  • Priyanka Godbole: Okvir za stvaranje predvidljivog i skladnog sustava razmaka za bržu primopredaju dizajna
  • Richard Rutter: Elementi tipografskog stila primijenjeni na webu
  • Ian Yates: Kako uspostaviti modularnu tipografsku ljestvicu
  • Nathan Curtis: Prostor u dizajnerskim sustavima
  • Vincent De Oliveira: CSS za dubinsko ronjenje: metrike fonta, visina linije i poravnanje okomito
  • Kezz Bracey: Zašto biste trebali koristiti izglede temeljene na Remu

Prethodni članci o mreži s 8 točaka:

  1. Uvod u mrežni sustav s 8 točaka
  2. Mreža od 8 točaka: obrubi i izgledi
  3. Mreža od 8 točaka: okomiti ritam

Pitanja:

To je nešto što još istražujem. Imate li dobar primjer za podijeliti? Imate li drugačiji pristup sustavu tipografije 8pt?

Ako imate razmišljanja, ostavite komentar ili se obratite na Twitteru.