8-punktsgitter: typografi på Internettet

Webtypografi er forvirrende. Kender du den bedste praksis?

Da jeg begyndte at kigge rundt på populære websteder for at finde ud af den bedste praksis for webtypografi, må jeg indrømme, at jeg var forvirret. Nedenfor er nogle eksempler på typografiskalaer, jeg trak fra nogle få populære websteder og designsystemer. Kan du finde det forenende mønster?

Prøver forenklet til at passe til en standard skala

Der er tydeligvis forskellige tilgange til typesystemer. Realiteten er, at vi som web-community ikke alle er enige. Som de fleste designproblemer starter det imidlertid med at imødekomme brugerens behov.

De tre arketyper af typografisystemer

Her er tre generelle typografisystemarketyper. De fleste virksomheder vil bruge alle disse tre på et tidspunkt, men det er vigtigt at anerkende de underliggende brugerbehov, der adresseres efter hver retning.

Marketing site

  • Formål: Bygget til at fortælle en bestemt historie og inspirere besøgende til at bruge deres tid og / eller penge på webstedet.
  • Krav: Hver skrifttype har brug for sit eget sæt af stilarter, og forskellige størrelser vil være baseret på kunstretning mere end elementtilpasning.
  • Betinget brugssag: Systemet skal flexes gennem flere størrelser fra mobil op til desktop.

Weboplevelser rettet mod at give dig noget ender i denne kategori. De ambitiøse bryder alle typografiregler for at skabe overbevisende og fængslende oplevelser.

Mens der tænkes meget på disse steder, er fokus på at skabe en splash snarere end et udvideligt system, der kan bygges på i fremtiden. Disse steder har generelt en kort holdbarhed og kasseres helt til en ny-til-bund-redesign.

Et avanceret eksempel på dette er interpolationsfunktionen, der bruges af Leigh Taylor og Nick Jones på Invisions destinationsside.

har en skriftstørrelse: calc (32px + ((24 * (100vw - 800px)) / 799)); Typografien på siden beregnes omhyggeligt til at fungere i alle skærmstørrelser.

”Brug af matematik til at gøre dynamisk kunstretning” - Leigh Taylor

Blog / Info-sted

  • Formål: At formidle en stor mængde tekstbaseret information.
  • Krav: Det vigtigste læseområde kan bruge et forholdsbaseret liniehøjde-system, ligesom denne Medium-artikel gør.
  • Tilfældig brugsmæssig brug: Sandsynligvis vil være lydhør, men fastholder fokus på læsbarhed.

Denne artikel i medium er et eksempel på en weboplevelse bygget til læsning i lang form.

Fokus handler ikke om at fortolke lidt visualiseringer eller udfylde formularer. De valgte størrelsesforhold er specifikt bygget til læsbarhed, der begrænses til at få den ønskede linjelængde. Jeg kan nemt læse hver linje, fordi typografien er omhyggeligt udformet, så den passer til mine behov som læser.

Produkt

  • Formål: Bygget til at løse et brugerproblem som arkivering af afgifter, styring af en git repo eller visualisering af effektivitetsmålinger.
  • Krav: Tekst skal passe godt ind i elementhierarkiet. Tekst bruges mest til etiketter, instruktioner og viste data.
  • Tilfældig brugsanvendelse: Minimalt lydhør. Højudviklede produkter vil bruge adaptivt design, der betyder forskellige oplevelser for mobil og desktop. Fokus er på hierarkiet af elementer, der understøtter brugeroplevelsen.

Googles materialdesign er et populært designsprog, der gælder for mange sager om produktbrug.

Materiale's afstandsmetode er baseret på et 8pt-komponent-gittersystem og et 4pt-baseline-gitter til typografi. De prøver at skalere liniehøjder med trin på 4. Skalering med trin på 8 med dit baseline-gitter kan være vanskeligt, fordi de tilgængelige linjehøjder er for langt fra hinanden for nogle tekststørrelser.

At lade nogle af fontstørrelserne ledsages med en mere passende liniehøjde er en god sti fremad. Du kan altid støde afstanden over eller under en given linje med 4 px for at få den til at stemme overens med det større atomnet.

Når det anvendes, har baseline-ridsystemet evnen til at justere det elementære rumlige system (8pt grid) med typografisystemet for at skabe en overbevisende lodret rytme i designet.

Implementering af webtypografi - i virkeligheden

Det er muligt at have en mening og struktureret brugergrænseflade, der overholder et 8pt gitter, der også har et længeområde i lang form.

Lad det faste baseline-gittersystem håndtere teksten inde i dine strukturerede komponenter, og brug en modulskala til at skabe en optimal læseoplevelse for den blog eller de dokumenter, du har tilføjet på dit websted.

De fleste digitale produktvirksomheder gør dette allerede mellem deres marketinglandingsside, det digitale produkt og deres dokumentation. At tage beslutningen om at strukturere disse typografiske verdener separat kan frigøre dig fra en uholdbar kompleksitet.

Blanding af indholdstyper sammen

Fallgruven - Ems, rems og pixels oh my!

For at udtrykke et klart og konsistent system skal typografimålinger let fortolkes af produktteamet, der bygger det.

Relative enheder som rems og ems er undertiden misforstået, og efter min erfaring fører dette til et uholdbart typografisystem. Forholdet mellem 14px fontstørrelse og en 20px liniehøjde skal for eksempel ikke fanges i relative enheder, fordi dette forhold skal ændres, når fontstørrelsen øges.

Det er latterligt at definere en linjehøjde på 1,4285714286em, fordi de fleste mennesker ikke kan gøre den slags matematik i hovedet. Hvis fontstørrelsen øges til 16px, vil browseren gengive en linjehøjde på 22.857142px, og den slags pixeldeling er en hovedpine, der venter på at ske. Dette skaber forvirring og er misbrug af relative enheder. Se en komplet liste over absolutte kontra relative enheder her.

Hvorfor er så mange designsystemer baseret på relativ størrelse i dag? Svaret er "tilgængelighed".

Browsere skalerer imidlertid ikke basistypestørrelsen, når du zoomer ind med kommando +. Der er tilgængelighedsværktøjer, der skalerer basistypeformat for brugere, der har brug for det. Jeg anbefaler, at du tester det korrekt for at sikre, at det er den oplevelse, du vil have brugere. Afkrydsningsfeltets tilgængelighed kan skade mere, end det hjælper.

Det er utroligt kraftfuldt at bruge rems og ems på dit websted / app. Der er mange meget interessante anvendelsessager, og de bør være en vigtig del af dit værktøjssæt.

Mit forslag er at bruge dem sparsomt, indtil du har brug for dem solidt. At bage dem ind i kernen i dit typografisystem kan åbne dig for forvirring og uventede brugeroplevelser.

8pt rist typografi

Den mest kraftfulde del af 8pt gitterkonceptet er dens evne til at skabe konsistens gennem dine designs. Du skal vurdere dine brugers behov og den bedste måde at skalere din typografi for at imødekomme disse behov.

Jeg opfordrer stærkt design og teknik til at samarbejde om at færdiggøre disse standarder for en virksomhed / et produkt.

Her er eksempler fra et par kendte navne: Google Material, Pivotal, Atlassian, Intuit.

Prøver forenklet til at passe til en standard skala

Referencer og beslægtet læsning

  • Priyanka Godbole: En ramme for at skabe et forudsigeligt og harmonisk afstandssystem for hurtigere design-dev overlevering
  • Richard Rutter: Elementerne i typografisk stil anvendt på Internettet
  • Ian Yates: Sådan etableres en modulopbygget typografisk skala
  • Nathan Curtis: Space in Design Systems
  • Vincent De Oliveira: Deep dive CSS: font metrics, line-height and vertical-align
  • Kezz Bracey: Hvorfor du skulle bruge rem-baserede layouts

Forrige 8-Point Grid Articles:

  1. Introduktion til 8-punkts ridsystemet
  2. 8-punktsgitter: Kanter og layout
  3. 8-punkts gitter: lodret rytme

spørgsmål:

Dette er noget, jeg stadig udforsker. Har du et godt eksempel at dele? Har du en anden tilgang til et 8pt typografisystem?

Hvis du har tanker, skal du skrive en kommentar eller række ud på Twitter.