8 taškų tinklelis: tipografija internete

Žiniatinklio tipografija kelia painiavą. Ar žinote geriausią praktiką?

Pradėjęs dairytis po populiarias svetaines, norėdamas išsiaiškinti geriausią interneto tipografijos praktiką, turiu pripažinti, kad buvau sujauktas. Žemiau yra keletas tipografijos skalių pavyzdžių, kuriuos išsitraukiau iš kelių populiarių svetainių ir projektavimo sistemų. Ar galite rasti vienijantį modelį?

Mėginiai supaprastinti, kad tilptų į standartinę skalę

Aišku, yra skirtingi požiūriai į tipo sistemas. Realybė yra tokia, kad mes, kaip internetinė bendruomenė, ne visi sutinkame. Tačiau, kaip ir dauguma dizaino problemų, tai iš pradžių prasideda atsižvelgiant į vartotojo poreikius.

Trys tipografijos sistemų archetipai

Čia pateikiami trys bendrieji tipografijos sistemos archetipai. Daugelis kompanijų tam tikru momentu panaudos visas šias tris, tačiau svarbu atpažinti pagrindinius vartotojų poreikius, į kuriuos atsižvelgiama atsižvelgiant į kiekvieną orientaciją.

Rinkodaros svetainė

  • Tikslas: sukurtas papasakoti 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 grindžiama meno kryptimi, o ne elemento pritaikymu.
  • Reaktyvaus naudojimo atvejis: Sistemai reikės lankstyti įvairius dydžius - nuo mobiliojo iki stalinio kompiuterio.

Žiniatinklio potyriai, skirti jums ką nors įvertinti, patenka į šią kategoriją. Ambicingi žmonės pažeidžia visas tipografijos taisykles, kad sukurtų įtikinamą ir žavią patirtį.

Nors į šias svetaines daug galvojama, daugiausia dėmesio skiriama splash, o ne plečiamai sistemai, kuria bus galima remtis ateityje. Paprastai šiose svetainėse yra trumpas galiojimo laikas ir jos visiškai atsisakoma, norint pertvarkyti projektą „nuo viršaus iki apačios“.

Pažangus to pavyzdys yra Leigh Taylor ir Nicko Joneso „Invision“ nukreipimo puslapyje naudojama interpoliacijos funkcija.

šrifto dydis: calc (32 pikseliai + ((24 * (100vw - 800px)) / 799)) ;. Tipografija puslapyje yra kruopščiai apskaičiuota, kad ji veiktų kiekvieno dydžio ekraną.

„Naudodamas matematiką dinaminei meno krypčiai“ - Leigh Taylor

Tinklaraštis / informacijos svetainė

  • Tikslas: perteikti didelį kiekį tekstinės informacijos.
  • Reikalavimai: Pagrindinėje skaitymo srityje gali būti naudojama linijų aukščio sistema, pagrįsta proporcijomis, kaip tai daroma šiame „Medium“ straipsnyje.
  • Reaktyvaus naudojimo atvejis: greičiausiai bus atsakingas, tačiau išlaikys dėmesį į skaitomumą.

Šis „Medium“ straipsnis yra internetinės patirties, sukurtos norint skaityti ilgą formą, pavyzdys.

Pagrindinis dėmesys skiriamas ne mažų vizualizacijų interpretavimui ar formų užpildymui. Jų pasirinkti dydžių santykiai yra specialiai sukurti skaitomumui riboti, kad būtų pasiektas norimas eilutės ilgis. Aš galiu patogiai skaityti kiekvieną eilutę, nes spausdinimas buvo kruopščiai parengtas, kad atitiktų mano, kaip skaitytojo, poreikius.

Produktas

  • Paskirtis: sukurta norint išspręsti vartotojo problemas, tokias kaip mokesčių deklaravimas, „repito“ tvarkymas arba našumo metrikos vizualizavimas.
  • Reikalavimai: tekstas turi gražiai atitikti elementų hierarchiją. Tekstas dažniausiai naudojamas etiketėms, instrukcijoms ir rodomiems duomenims.
  • Reaktyvaus naudojimo atvejis: minimaliai reaguojantis. Aukšto lygio 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 gaminių naudojimo atvejų.

Medžiagos išdėstymo tarpais metodas grindžiamas 8 pt komponentų tinklelio sistema ir 4 pt pradine tinkleline tipografija. Jie bando išmatuoti eilučių aukštį, padidindami 4 žingsnius. Jūsų bazinės lentelės mastelį didinti po 8 žingsnius gali būti sunku, nes galimi linijų aukščiai yra per daug atskirti kai kuriems teksto dydžiams.

Tai puikus kelias į priekį, jei norite, kad kai kurie šrifto dydžiai būtų pridedami prie tinkamesnės eilutės aukščio. Tarpusavyje aukščiau arba žemiau nurodytos linijos visada galite nubrėžti 4 taškais, kad ji atitiktų didesnį atominį tinklelį.

Kai taikoma, pagrindinė tinklelio sistema turi galimybę suderinti elemento erdvinę sistemą (8 taškų tinklelį) su tipografijos sistema, kad dizaine būtų sukurtas įtikinamas vertikalus ritmas.

Žiniatinklio tipografijos įgyvendinimas - realybėje

Galima turėti apgalvotą ir struktūrizuotą vartotojo sąsają, laikančią 8 taškų lentelę, kurioje taip pat yra ilgos formos skaitymo sritis.

Leiskite fiksuotai pagrindinei tinklelio sistemai tvarkyti tekstą struktūrizuotų komponentų viduje ir naudokite modulinę skalę, kad sukurtumėte optimalią tinklaraščio ar dokumentų, kuriuos pridėjote prie savo svetainės, skaitymo patirtį.

Dauguma skaitmeninių produktų kompanijų tai daro jau tarp savo rinkodaros nukreipimo puslapio, skaitmeninio produkto ir dokumentų. Priimdami sprendimą atskirai struktūrizuoti šias tipografines sferas, galite išsilaisvinti iš netvaraus sudėtingumo.

Turinio rūšių maišymas

Spąstai - Ems, rems ir pikseliai, oi, mano!

Norėdami išreikšti aiškią ir nuoseklią sistemą, ją formuojanti gaminių komanda turi lengvai suprasti tipografijos matavimus.

Santykiniai vienetai, tokie kaip rys ir ems, kartais yra nesuprantami ir, mano patirtimi, tai lemia 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ų keistis didėjant šrifto dydžiui.

Apibrėžti linijos aukštį 1.4285714286em yra juokinga, nes dauguma žmonių negali daryti tokios matematikos savo galvoje. Jei šrifto dydis padidėja iki 16 taškų, naršyklė atvaizduoja eilutės aukštį 22.857142 taškųx ir toks pikselių padalijimas laukia galvos skausmas. Tai sukelia painiavą ir yra netinkamas santykinių vienetų naudojimas. Pilną absoliučių ir santykinių vienetų sąrašą rasite čia.

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

Tačiau naršyklės nekeičia bazinio šrifto dydžio, kai artinate naudodami komandą +. Yra prieinamumo priemonių, kurios paskirsto bazinius šriftų dydžius vartotojams, kuriems jo reikia. Aš rekomenduoju tinkamai išbandyti, kad įsitikintumėte, jog tai yra tokia patirtis, kurią norite turėti vartotojai. Prieinamumas prie varnelės gali pakenkti labiau, nei padeda.

Nuostabiai galingas jūsų svetainės / programos panaudojimas rems ir ems. Yra daug labai įdomių naudojimo atvejų, ir jie turėtų būti svarbi jūsų priemonių rinkinio dalis.

Aš siūlau juos naudoti taupiai, kol tinkamai juos panaudosite. Iškepę juos į savo tipografijos sistemos pagrindus, galite priversti susipainioti ir netikėtai patirti vartotoją.

8pt tinklelio tipografija

Galingiausia 8pt tinklelio koncepcijos dalis yra jo sugebėjimas užtikrinti nuoseklumą visuose jūsų projektuose. Turėsite įvertinti savo vartotojų poreikius ir geriausiai pritaikyti tipografiją tokiems poreikiams patenkinti.

Aš labai skatinu dizainą ir inžineriją bendradarbiauti rengiant šiuos įmonės / produkto standartus.

Čia pateikiami kelių žinomų vardų pavyzdžiai: „Google Material“, „Pivotal“, „Atlassian“, „Intuit“.

Mėginiai supaprastinti, kad tilptų į standartinę skalę

Nuorodos ir susiję skaitymai

  • „Priyanka Godbole“: sistema, skirta sukurti nuspėjamą ir darnią tarpo sistemą greitesniam dizaino kūrimo perdavimui
  • Richardas Rutteris: tipografinio stiliaus elementai, pritaikyti internete
  • Ianas Yatesas: Kaip nustatyti modulinę tipografinę skalę
  • Nathanas Curtis: Erdvė dizaino sistemose
  • Vincentas De Oliveira: Giluminio nardymo CSS: šrifto metrika, linijos aukštis ir vertikalus suderinimas
  • „Kezz Bracey“: Kodėl turėtumėte naudoti Rem-Remy išdėstymą

Ankstesni 8 taškų tinklelio straipsniai:

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

Klausimai:

Tai aš vis dar tyrinėju. 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“.