8 pontos rács: tipográfia az interneten

A webes tipográfia zavaró. Ismeri a legjobb gyakorlatokat?

Amikor elkezdtem körülnézni a népszerű webhelyeken, hogy kiderítsem a webes tipográfia legjobb gyakorlatait, el kell ismernem, hogy értetlen vagyok. Az alábbiakban bemutatunk néhány példát a tipográfiai mérlegekre, amelyeket néhány népszerű weboldalról és tervező rendszerből vettem ki. Megtalálja az egyesítő mintát?

Nyilvánvalóan különböző megközelítések vannak a típusú rendszerekhez. A valóság az, hogy webes közösségként nem mind értünk egyet. A legtöbb tervezési problémához hasonlóan azonban ez is a felhasználó igényeinek kielégítésével kezdődik.

A tipográfiai rendszerek három archetípusa

Itt van három általános tipográfiai rendszer archetípus. A legtöbb vállalat mindháromat felhasználja valamikor, de fontos felismerni azokat a felhasználói igényeket, amelyekre az egyes irányzatok vonatkoznak.

Marketing oldal

  • Cél: Egy adott történet elbeszélésére készült, és arra ösztönzi a látogatókat, hogy időt és / vagy pénzt töltsenek az oldalon.
  • Követelmények: Minden betűtípusnak saját stíluskészletre lesz szüksége, és a méretváltozatok inkább a művészet irányán, mint az elemek illesztésén alapulnak.
  • Reszponzív felhasználási eset: A rendszernek többféle méretben kell hajlítania a mobiltól az asztali számítógépig.

Ebbe a kategóriába kerülnek azok a webes tapasztalatok, amelyek arra szolgálnak, hogy valamit eláruljanak. Az ambiciózusok megszegik a tipográfia minden szabályát, hogy meggyőző és magával ragadó élményeket teremtsenek.

Bár sok gondolat merül fel ezeken a webhelyeken, a hangsúly a jövőben felépíthető kibővíthető rendszer helyett a fröccsönítésre összpontosít. Ezeknek a helyeknek általában rövid az eltarthatósági ideje, és teljesen felülről lefelé történő átalakítás céljából elvetik őket.

Haladó példa erre az interpolációs funkció, amelyet Leigh Taylor és Nick Jones használ az Invision céloldalán.

A <h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799)) ;. Az oldalon található tipográfia alaposan kiszámított, hogy minden képernyőméretnél működjön.

„A matematika használata dinamikus művészeti irányításhoz” - Leigh Taylor

Blog / információs oldal

  • Cél: Nagy mennyiségű szöveges információ továbbítása.
  • Követelmények: A fő olvasási terület arányarányú vonalmagasság-rendszert használhat, akárcsak ez a közepes cikk.
  • Reszponzív felhasználási eset: Valószínűleg reagál, de az olvashatóságra összpontosít.

Ez a közepes cikk egy példa a hosszú formájú olvasásra épített webes élményre.

A hangsúly nem a kis vizualizációk értelmezésén vagy az űrlapok kitöltésén van. Az általuk választott méretarányok kifejezetten az olvashatóság korlátozása érdekében készültek, hogy elérjék a kívánt vonalhosszt. Minden sort kényelmesen el tudok olvasni, mert a tipográfiát gondosan kidolgoztam, hogy megfeleljen olvasói igényeimnek.

Termék

  • Cél: Olyan felhasználói problémák megoldására készült, mint az adóbevallás, a git repo kezelése vagy a teljesítménymutatók megjelenítése.
  • Követelmények: A szövegnek szépen illeszkednie kell az elem hierarchiájába. A szöveget leginkább címkékhez, utasításokhoz és megjelenített adatokhoz használják.
  • Reszponzív felhasználási eset: Minimálisan reagál. A magasan fejlett termékek adaptív tervezést fognak használni, ami különböző élményeket jelent a mobil és az asztali számítógép számára. A hangsúly a felhasználói élményt támogató elemek hierarchiáján van.

A Google Material Design egy népszerű dizájn nyelv, amely számos termékhasználati esetre alkalmazható.

Az anyag távolságmérési módszere egy 8pt komponensű rácsrendszeren és egy tipikus 4pt alaprácson alapszik. Megpróbálják a magasságot 4-es lépésekben méretezni. A 8-as léptékű skálázás az alapvonal rácsával nehéz lehet, mert a rendelkezésre álló vonalvezetési magasságok túlságosan távol vannak egymástól bizonyos szövegméreteknél.

Nagyszerű előrelépés, ha néhány betűméretet megfelelőbb vonalmagassággal kísérnek. Az adott vonal felett vagy alatt lévő távolságot mindig 4 képpontosra ütközheti, hogy igazodjon a nagyobb atomrácshoz.

Alkalmazásakor az alapvonal rácsrendszere képes összehangolni az elemi térrendszert (8pt rács) a tipográfiai rendszerrel, hogy meggyőző függőleges ritmust hozzon létre a tervezésben.

Webes tipográfia megvalósítása - a valóságban

Lehetőség van egy véleményezett és strukturált felhasználói felületre, amely egy 8pt-os rácshoz ragaszkodik, amelynek hosszú formájú olvasási területe is van.

Engedje meg, hogy a fix alapvonalú rácsrendszer kezelje a strukturált összetevők belsejében lévő szöveget, és moduláris skála segítségével optimális olvasási élményt teremtsen a webhelyére felvett blog vagy dokumentumok számára.

A legtöbb digitális termékeket gyártó vállalat ezt már marketing céloldala, a digitális termék és a dokumentáció között teszi. E tipográfiai területek külön-külön történő felépítésének meghozatala megszabadíthatja a fenntarthatatlan összetettséget.

A buktató - Ems, remek és pixelek, óh!

Az egyértelmű és következetes rendszer kifejezése érdekében a tipográfiai méréseket a termékcsapatnak könnyen értelmeznie kell.

Olyan relatív egységeket, mint a remek és az emek, néha félreértik, és tapasztalataim szerint ez fenntarthatatlan tipográfiai rendszerhez vezet. Például a 14 képpontos betűméret és a 20 képpontos vonalmagasság arányát nem szabad relatív egységekben rögzíteni, mert ennek az aránynak a betűméret növekedésével változik.

Az 1.4285714286em vonalmagasság meghatározása nevetséges, mert a legtöbb ember nem tud ilyen matematikát végrehajtani a fejében. Ha a betűméret 16 képpontra növekszik, a böngésző 22,857142 képpontos vonalmagasságot mutat, és ez a fajta pixelfelosztás fejfájást vár. Ez zavart okoz és a relatív egységekkel való visszaélés. Az abszolút és relatív egységek teljes listáját itt tekintheti meg.

Miért épül olyan sok tervezési rendszer ma viszonylagos méretezésen? A válasz az „akadálymentesség”.

A böngészők azonban nem méretezik az alap betűméretet, amikor nagyítanak command +. Vannak olyan kisegítő lehetőségek, amelyek méretezik az alap betűméretet azoknak a felhasználóknak, akiknek szükségük van rá. Javaslom a megfelelő tesztelését, hogy megbizonyosodjon arról, hogy ez a felhasználói élmény. A jelölőnégyzet hozzáférhetősége többet árthat, mint segít.

A Rems és EMs felhasználása a webhelyén / alkalmazásában elképesztően hatékony. Sok nagyon érdekes felhasználási eset létezik, és ezek fontos részei lehetnek az eszköztárnak.

Azt javaslom, hogy takarékosan használja őket, amíg meg nem használja őket. Ha ezeket tipográfiai rendszerének középpontjába sütjük, zavartság és váratlan felhasználói tapasztalatok érhetik el.

8pt rács tipográfia

A 8pt rács-koncepció legerősebb része az, hogy képes az egységességre az egész tervben. Fel kell mérnie felhasználói igényeit, és a tipográfia méretezésének legjobb módját ezeknek az igényeknek megfelelően.

Nagyon bátorítom a tervezőt és a mérnököket, hogy működjenek együtt egy vállalat / termék ezen szabványainak véglegesítésében.

Íme néhány ismert név: Google Material, Pivotal, Atlassian, Intuit.

Hivatkozások és kapcsolódó olvasmányok

  • Priyanka Godbole: Keret kiszámítható és harmonikus térköz-rendszer létrehozásához a gyorsabb tervezés-fejlesztés átadásához
  • Richard Rutter: A tipográfiai stílus elemei az interneten
  • Ian Yates: Hogyan lehet létrehozni egy moduláris tipográfiai skálát
  • Nathan Curtis: Tér a tervezési rendszerekben
  • Vincent De Oliveira: Mély merülés CSS: betűméretek, vonal-magasság és függőleges-igazítás
  • Kezz Bracey: Miért érdemes Rem-alapú elrendezéseket használni

Korábbi 8 pontos rácscikkek:

  1. Bevezetés a 8 pontos rácsrendszerbe
  2. 8 pontos rács: Határok és elrendezések
  3. 8 pontos rács: függőleges ritmus

Kérdések:

Ezt még mindig vizsgálom. Van jó példád, amit megosztanál? Van más megközelítése a 8pt tipográfiai rendszerrel kapcsolatban?

Ha gondolatai támadnak, kérjük, írjon megjegyzést, vagy forduljon a Twitterhez.