8 taškų tinklelis: tipografija internete

Žiniatinklio tipografija paini. Ar žinote geriausią praktiką?

Kai pradėjau dairytis populiariose svetainėse, norėdamas išsiaiškinti geriausią internetinės tipografijos praktiką, turiu pripažinti, kad buvau suglumęs. Žemiau pateikiami keli tipografijos svarstyklių pavyzdžiai, kuriuos išsirinkau iš kelių populiarių svetainių ir dizaino sistemų. Ar galite rasti vienijantį modelį?

Aišku yra įvairių požiūrių į tipo sistemas. Realybė yra ta, kad kaip interneto bendruomenė mes visi nesutinkame. Tačiau, kaip ir daugumoje dizaino problemų, jis iš tikrųjų pradedamas tenkinti vartotojo poreikius.

Trys tipografijos sistemų archetipai

Čia yra trys bendrieji tipografijos sistemos archetipai. Dauguma įmonių tam tikru momentu naudos visus tris iš jų, tačiau svarbu atpažinti pagrindinius vartotojų poreikius, kuriems kiekviena orientacija tenkina.

Rinkodaros svetainė

  • Tikslas: sukurtas pasakoti konkrečią istoriją ir įkvėpti lankytojus praleisti laiką ir (arba) pinigus svetainėje.
  • Reikalavimai: Kiekvienam šriftui reikės savo stilių rinkinio, o dydžių įvairovė bus pagrįsta meno kryptimi, o ne elementų pritaikymu.
  • Interaktyvus naudojimo atvejis: sistema turės pritaikyti kelis dydžius nuo mobiliojo iki darbalaukio.

Šioje kategorijoje atsiduria žiniatinklio patirtis, skirta tam, kad galėtumėte ką nors paminėti. Ambicingi pažeidžia visas tipografijos taisykles, kad sukurtų patrauklių ir patrauklių įspūdžių.

Nors daug galvojama apie šias svetaines, dėmesys sutelkiamas į „splash“, o ne išplėstinę sistemą, kuria galima remtis ateityje. Šių svetainių tinkamumo laikas yra trumpas ir jos išmetamos visiškai pertvarkant iš viršaus į apačią.

Pažangus to pavyzdys yra interpoliacijos funkcija, kurią Leighas Tayloras ir Nickas Jonesas naudoja „Invision“ nukreipimo puslapyje.

<H1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799)) ;. Skaičiuojama, kad puslapio tipografija tinka kiekvienam ekrano dydžiui.

„Matematikos naudojimas norint atlikti dinamišką meno kryptį“ - Leigh Tayloras

Tinklaraštis / informacijos svetainė

  • Tikslas: perduoti daug teksto informacijos.
  • Reikalavimai: Pagrindinėje skaitymo srityje gali būti naudojama santykiu pagrįsta linijos aukščio sistema, kaip ir šiame „Medium“ straipsnyje.
  • Reaguojantis naudojimo atvejis: greičiausiai bus reaguojantis, tačiau daugiausia dėmesio skirs įskaitomumui.

Šis „Medium“ straipsnis yra žiniatinklio pavyzdys, sukurtas skaityti ilgą formą.

Didžiausias dėmesys skiriamas nedaugelio vizualizacijų interpretavimui ar formų užpildymui. Jų pasirinktas dydžio santykis yra specialiai sukurtas taip, kad būtų lengviau skaityti, kad būtų pasiektas norimas linijos ilgis. Aš galiu patogiai perskaityti kiekvieną eilutę, nes tipografija buvo kruopščiai sukurta taip, kad atitiktų mano, kaip skaitytojo, poreikius.

Produktas

  • Tikslas: sukurta siekiant išspręsti vartotojo problemas, pvz., Mokesčių pateikimą, „git“ atpirkimo tvarkymą ar našumo metrikos vizualizavimą.
  • Reikalavimai: Tekstas turi gerai įsilieti į elementų hierarchiją. Tekstas dažniausiai naudojamas etiketėms, instrukcijoms ir rodomiems duomenims.
  • Reaguojantis naudojimo atvejis: mažiausiai reaguoja. Aukštai išvystytuose produktuose bus naudojamas adaptyvus dizainas, reiškiantis skirtingą patirtį mobiliesiems ir staliniams kompiuteriams. Didžiausias dėmesys skiriamas elementų, palaikančių vartotojo patirtį, hierarchijai.

„Google“ medžiagų dizainas yra populiari dizaino kalba, taikoma daugeliui produktų naudojimo atvejų.

Medžiagos tarpų metodas pagrįstas 8pt komponentų tinklelio sistema ir 4pt baziniu tinkleliu tipografijai. Jie bando skalės eilutės aukštį didinti po 4. Padidinti dydį po 8 su jūsų bazinės linijos tinkleliu gali būti sunku, nes kai kurie teksto dydžiai yra per toli vienas nuo kito.

Tai, kad kai kuriuos šrifto dydžius galima pridėti su tinkamesniu linijos aukščiu, yra puikus kelias pirmyn. Jūs visada galite sutrumpinti atstumą virš arba žemiau nurodytos linijos 4 taškais, kad jis atitiktų didesnį atominį tinklelį.

Pritaikius, bazinės tinklelio sistema turi galimybę suderinti elementų erdvinę sistemą (8pt tinklelis) su tipografijos sistema, kad sukurtų įtikinamą vertikalų ritmą dizaine.

Interneto tipografijos įgyvendinimas - realybėje

Galima turėti išsamią ir struktūrizuotą vartotojo sąsają, kuri laikosi 8pt tinklelio, kuriame taip pat yra ilgos formos skaitymo sritis.

Leiskite fiksuoto pagrindo tinklelio sistemai tvarkyti tekstą struktūrinių komponentų viduje ir naudokite modulinę skalę, kad sukurtumėte optimalų tinklaraščio ar dokumentų, kuriuos pridėjote savo svetainėje, skaitymo patirtį.

Daugelis skaitmeninių produktų bendrovių tai daro jau tarp savo rinkodaros nukreipimo puslapio, skaitmeninio produkto ir dokumentacijos. Priėmęs sprendimą struktūrizuoti šias tipografines sritis atskirai, galite išsivaduoti iš netvaraus sudėtingumo.

Spąstai - ems, remai ir pikseliai, oi!

Norint išreikšti aiškią ir nuoseklią sistemą, tipografijos matavimus turi lengvai interpretuoti ją kurianti produkto komanda.

Santykiniai vienetai, tokie kaip remai ir emai, kartais neteisingai suprantami, ir, mano patirtis, tai sukelia netvarią tipografijos sistemą. Pvz., Santykis tarp 14 taškų šrifto dydžio ir 20 taškų eilutės aukščio neturėtų būti fiksuojamas santykiniais vienetais, nes šis santykis turėtų pasikeisti didėjant šrifto dydžiui.

Apibrėžti linijos aukštį 1,4285714286em yra juokinga, nes dauguma žmonių nemoka tokios matematikos galvoje. Jei šrifto dydis padidės iki 16 taškų, naršyklė pateiks 22,857142 taškų eilutės aukštį, o toks taškų padalijimas yra galvos skausmas, laukiantis, kol tai įvyks. Tai sukelia painiavą ir yra netinkamas santykinių vienetų naudojimas. Čia rasite visą absoliutų ir santykinių vienetų sąrašą.

Kodėl šiandien tiek daug projektavimo sistemų remiasi santykiniu dydžiu? Atsakymas yra „prieinamumas“.

Tačiau, kai priartinate, naršyklės nesumažina pagrindinio šrifto dydžio command +. Yra pritaikymo neįgaliesiems įrankių, kurie padidins pagrindinius šriftų dydžius vartotojams, kuriems to reikia. Aš rekomenduoju tinkamai jį išbandyti, kad įsitikintumėte, jog tai yra patirtis, kurios norite, kad vartotojai turėtų. Prieinamumas prie langelio gali pakenkti labiau nei padeda.

Remų ir emų naudojimas savo svetainėje / programoje yra nepaprastai galingas. Yra daugybė labai įdomių naudojimo atvejų ir jie turėtų būti svarbi jūsų įrankių rinkinio dalis.

Aš siūlau juos naudoti saikingai, kol jų nepanaudosite. Jų įtraukimas į tipografijos sistemos pagrindą gali sukelti painiavą ir netikėtą vartotojo patirtį.

8pt tinklelio tipografija

Galingiausia 8pt tinklo koncepcijos dalis yra jos gebėjimas užtikrinti nuoseklumą visuose jūsų projektuose. Turėsite įvertinti savo vartotojų poreikius ir geriausią tipografijos mastelio keitimo būdą, kad jis atitiktų šiuos poreikius.

Aš labai skatinu projektavimą ir inžineriją bendradarbiauti baigiant kurti šios įmonės / produkto standartus.

Čia pateikiami pavyzdžiai iš kelių žinomų pavadinimų: „Google“ medžiaga, „Pivotal“, „Atlassian“, „Intuit“.

Literatūra ir susijęs skaitymas

  • Priyanka Godbole: sistema, leidžianti sukurti nuspėjamą ir harmoningą tarpų sistemą, kad būtų galima greičiau perduoti dizainą
  • Richardas Rutteris: tipografinio stiliaus elementai, taikomi internete
  • Ianas Yatesas: Kaip nustatyti modulinę tipografinę skalę
  • Nathan Curtis: Kosmosas projektavimo sistemose
  • Vincentas De Oliveira: giluminio nardymo CSS: šrifto metrika, linijos aukštis ir vertikalus lygiavimas
  • Kezz Bracey: Kodėl turėtumėte naudoti Remo pagrindu išdėstytus maketus

Ankstesni 8 taškų tinklelio straipsniai:

  1. Įvadas į 8 taškų tinklelio sistemą
  2. 8 taškų tinklelis: kraštinės ir maketai
  3. 8 taškų tinklelis: vertikalus ritmas

Klausimai:

Tai vis dar tiriu. Ar turite gerą pavyzdį, kuriuo galėtumėte pasidalinti? Ar turite kitokį požiūrį į 8pt tipografijos sistemą?

Jei turite minčių, palikite komentarą arba susisiekite su „Twitter“.