8-punts raster: typografie op het web

Webtypografie is verwarrend. Kent u de best practices?

Toen ik rond begon te kijken op populaire websites om de best practices voor webtypografie te achterhalen, moet ik toegeven dat ik verbijsterd was. Hieronder staan ​​enkele voorbeelden van typografische schalen die ik heb getrokken uit een paar populaire websites en ontwerpsystemen. Kun je het verenigende patroon vinden?

Monsters vereenvoudigd om op een standaardschaal te passen

Het is duidelijk dat er verschillende benaderingen zijn voor typen systemen. De realiteit is dat we het als webcommunity niet allemaal eens zijn. Zoals de meeste ontwerpproblemen begint het echter echt met het beantwoorden van de behoeften van de gebruiker.

De drie archetypen van typografiesystemen

Hier zijn drie algemene archetypen van het typografiesysteem. De meeste bedrijven zullen deze drie op een bepaald moment gebruiken, maar het is belangrijk om te erkennen dat de onderliggende gebruikersbehoeften worden aangepakt door elke oriëntatie.

Marketing site

  • Doel: gebouwd om een ​​specifiek verhaal te vertellen en bezoekers te inspireren om hun tijd en / of geld op de site door te brengen.
  • Vereisten: elk lettertype heeft zijn eigen reeks stijlen nodig en de verscheidenheid aan formaten is meer gebaseerd op art direction dan op elementaanpassing.
  • Responsieve gebruiksscenario: het systeem moet door verschillende formaten buigen, van mobiel tot desktop.

Webervaringen die erop gericht zijn je iets te pitchen, komen in deze categorie terecht. De ambitieuze overtreden alle regels van typografie om boeiende en boeiende ervaringen te creëren.

Hoewel er veel aandacht aan deze sites wordt besteed, ligt de nadruk op het maken van een plons in plaats van een uitbreidbaar systeem waarop in de toekomst kan worden voortgebouwd. Deze sites hebben over het algemeen een korte houdbaarheid en worden volledig weggegooid voor een volledig nieuw ontwerp.

Een geavanceerd voorbeeld hiervan is de interpolatiefunctie die Leigh Taylor en Nick Jones op de bestemmingspagina van Invision gebruiken.

De

heeft een lettergrootte: calc (32px + ((24 * (100vw - 800px)) / 799)) ;. De typografie op de pagina is zorgvuldig berekend om bij elke schermgrootte te werken.

"Gebruik van wiskunde om dynamische art direction te doen" - Leigh Taylor

Blog / Info-site

  • Doel: een grote hoeveelheid op tekst gebaseerde informatie overbrengen.
  • Vereisten: Het hoofdleesgebied kan een op verhouding gebaseerd lijn-hoogtesysteem gebruiken, net als dit artikel in Medium.
  • Responsieve gebruiksscenario: zal waarschijnlijk responsief zijn, maar de nadruk blijven leggen op leesbaarheid.

Dit artikel in Medium is een voorbeeld van een webervaring die is gebouwd voor lang lezen.

De focus ligt niet op het interpreteren van kleine visualisaties of het invullen van formulieren. De grootteverhoudingen die ze hebben gekozen zijn specifiek gebouwd voor leesbaarheid beperkt om de gewenste lijnlengte te krijgen. Ik kan elke regel comfortabel lezen omdat de typografie zorgvuldig is ontworpen om aan mijn behoeften als lezer te voldoen.

Product

  • Doel: gebouwd om een ​​gebruikersprobleem op te lossen, zoals het indienen van belastingen, het beheren van een git-repo of het visualiseren van prestatiestatistieken.
  • Vereisten: tekst moet mooi in de elementenhiërarchie passen. Tekst wordt meestal gebruikt voor labels, instructies en weergegeven gegevens.
  • Responsieve gebruiksscenario: Minimaal responsief. Sterk ontwikkelde producten maken gebruik van een adaptief ontwerp, wat betekent dat er verschillende ervaringen zijn voor mobiel en desktop. De nadruk ligt op de hiërarchie van elementen die de gebruikerservaring ondersteunen.

Het materiaalontwerp van Google is een populaire ontwerptaal die van toepassing is op veel gevallen van productgebruik.

De afstandsmethode van het materiaal is gebaseerd op een 8pt component rastersysteem en een 4pt baseline grid voor typografie. Ze proberen lijnhoogten te schalen met stappen van 4. Schalen met stappen van 8 met uw basislijnraster kan moeilijk zijn omdat de beschikbare lijnhoogten voor sommige tekstgrootten te ver uit elkaar liggen.

Het is een goed pad om sommige lettertypen te laten vergezellen van een meer geschikte lijnhoogte. U kunt altijd de afstand boven of onder een gegeven lijn met 4 px laten stijgen om deze uit te lijnen met het grotere atoomraster.

Wanneer toegepast, kan het basislijnrastersysteem het ruimtelijke elementensysteem (8pt-raster) uitlijnen met het typografiesysteem om een ​​dwingend verticaal ritme in het ontwerp te creëren.

Implementatie van webtypografie - in werkelijkheid

Het is mogelijk om een ​​eigenzinnige en gestructureerde gebruikersinterface te hebben die zich houdt aan een 8pt-raster dat ook een lang leesgebied heeft.

Laat het vaste baseline-rastersysteem de tekst in uw gestructureerde componenten verwerken en gebruik een modulaire schaal om een ​​optimale leeservaring te creëren voor de blog of documenten die u aan uw site hebt toegevoegd.

De meeste digitale productbedrijven doen dit al tussen hun marketinglandingspagina, het digitale product en hun documentatie. Als u besluit deze typografische rijken afzonderlijk te structureren, kunt u zich bevrijden van een niet-duurzame complexiteit.

Inhoudstypes samenvoegen

De valkuil - Ems, rems en pixels oh my!

Om een ​​duidelijk en consistent systeem tot uitdrukking te brengen, moeten typografische metingen eenvoudig kunnen worden geïnterpreteerd door het productteam dat het bouwt.

Relatieve eenheden zoals rems en ems worden soms verkeerd begrepen en, naar mijn ervaring, leidt dit tot een onhoudbaar typografiesysteem. De verhouding tussen een lettergrootte van 14 px en een regelhoogte van 20 px mag niet worden vastgelegd in relatieve eenheden, omdat die verhouding moet veranderen naarmate de lettergrootte toeneemt.

Het definiëren van een regelhoogte van 1.4285714286em is belachelijk, omdat de meeste mensen dat soort wiskunde niet in hun hoofd kunnen doen. Als de lettergrootte toeneemt tot 16 px, geeft de browser een regelhoogte van 22.857142 px en dat soort pixelsplitsing is een hoofdpijn die wacht. Dit zorgt voor verwarring en is een misbruik van relatieve eenheden. Bekijk hier een complete lijst van absolute versus relatieve eenheden.

Waarom zijn zoveel ontwerpsystemen tegenwoordig gebaseerd op relatieve grootte? Het antwoord is "toegankelijkheid".

Browsers schalen de basislettergrootte echter niet wanneer u inzoomt met opdracht +. Er zijn toegankelijkheidstools die de basislettergrootte voor gebruikers schalen die dit nodig hebben. Ik raad aan om het goed te testen om er zeker van te zijn dat het de ervaring is die gebruikers willen hebben. Toegankelijkheid van selectievakjes kan meer pijn doen dan helpt.

Het gebruik van Rems en EMS in uw site / app is ongelooflijk krachtig. Er zijn veel zeer interessante gebruiksscenario's en deze zouden een belangrijk onderdeel van uw toolkit moeten zijn.

Mijn suggestie is om ze spaarzaam te gebruiken totdat je er een degelijk gebruik van hebt. Als u ze in de kern van uw typografiesysteem bakt, kunt u verwarring en onverwachte gebruikerservaringen oplopen.

8pt raster typografie

Het krachtigste onderdeel van het 8pt-rasterconcept is de mogelijkheid om consistentie in uw ontwerpen te bewerkstelligen. U moet de behoeften van uw gebruikers beoordelen en de beste manier om uw typografie te schalen om aan die behoeften te voldoen.

Ik moedig design en engineering ten zeerste aan om samen te werken bij het voltooien van deze normen voor een bedrijf / product.

Hier zijn voorbeelden van enkele bekende namen: Google Material, Pivotal, Atlassian, Intuit.

Monsters vereenvoudigd om op een standaardschaal te passen

Referenties en bijbehorende literatuur

  • Priyanka Godbole: Een raamwerk voor het creëren van een voorspelbaar en harmonieus afstandssysteem voor snellere overdracht van ontwerp-ontwikkelaar
  • Richard Rutter: The Elements of Typographic Style Applied to the Web
  • Ian Yates: Hoe een modulaire typografische schaal tot stand te brengen
  • Nathan Curtis: Space in Design Systems
  • Vincent De Oliveira: Deep dive CSS: lettertype-metrieken, lijnhoogte en verticaal uitlijnen
  • Kezz Bracey: Waarom u rem-gebaseerde lay-outs zou moeten gebruiken

Vorige 8-punts rasterartikelen:

  1. Inleiding tot het 8-punts rastersysteem
  2. 8-punts raster: randen en lay-outs
  3. 8-punts raster: verticaal ritme

vragen:

Dit is iets wat ik nog steeds aan het onderzoeken ben. Heb je een goed voorbeeld om te delen? Heeft u een andere benadering van een 8pt typografiesysteem?

Als je gedachten hebt, laat dan een reactie achter of neem contact op met Twitter.