8-punkts gitter: Typografi på nettet

Webtypografi er forvirrende. Kender du de bedste fremgangsmåder?

Da jeg begyndte at kigge rundt på populære websteder for at finde ud af de bedste fremgangsmåder til webtypografi, må jeg indrømme, at jeg var forbløffet. Nedenfor er nogle eksempler på typografiskalaer, jeg hentede fra et par populære websteder og designsystemer. Kan du finde det samlende mønster?

Der er helt klart forskellige tilgange til typesystemer. Virkeligheden er, at vi som et webfællesskab ikke alle er enige. Men som de fleste designproblemer starter det virkelig med at imødekomme brugerens behov.

De tre arketyper af typografisystemer

Her er tre generelle arketyper for typografisystemer. De fleste virksomheder vil bruge alle disse tre på et eller andet tidspunkt, men det er vigtigt at anerkende de underliggende brugerbehov, der behandles af 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 stilarter, og de forskellige størrelser vil være baseret på kunstretning mere end elementtilpasning.
  • Responsiv brugssag: Systemet skal bøjes gennem flere størrelser fra mobil til desktop.

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

Mens der lægges meget tanke på disse websteder, er fokus på at skabe et stænk i stedet for et udvideligt system, der kan bygges på i fremtiden. Disse websteder har generelt en kort holdbarhed og kasseres udelukkende til en top-til-bund redesign.

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

Den <h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799)) ;. Typografien på siden beregnes omhyggeligt til at fungere i enhver skærmstørrelse.

"Brug af matematik til at lave dynamisk kunstretning" - Leigh Taylor

Blog / Info-websted

  • Formål: At formidle en stor mængde tekstbaseret information.
  • Krav: Hovedlæsningsområdet kan bruge et forholdsbaseret linjehøjdesystem, ligesom denne Medium-artikel gør.
  • Responsiv brugssag: Vil sandsynligvis være lydhør, men opretholde fokus på læsbarhed.

Denne Medium-artikel er et eksempel på en weboplevelse bygget til langformslæsning.

Fokus handler ikke om at fortolke små visualiseringer eller udfylde formularer. De størrelsesforhold, de har valgt, er specielt bygget til læsbarhed begrænset for at få den ønskede linjelængde. Jeg kan nemt læse hver linje, fordi typografien er omhyggeligt udformet til at passe til mine behov som læser.

Produkt

  • Formål: Bygget til at løse et brugerproblem som arkivering af skat, administration af en git repo eller visualisering af præstationsmålinger.
  • Krav: Teksten skal passe pænt ind i elementhierarkiet. Tekst bruges mest til etiketter, instruktioner og viste data.
  • Responsiv brugssag : Minimal respons. Højt udviklede produkter vil bruge adaptivt design, der betyder forskellige oplevelser for mobil og desktop. Fokus er på hierarkiet af elementer, der understøtter brugeroplevelsen.

Googles materialedesign er et populært designsprog, der kan anvendes i mange tilfælde af produktbrug.

Materialets afstandsmetode er baseret på et 8pt komponentgittersystem og et 4pt baseline-gitter til typografi. De forsøger at skalere liniehøjder med intervaller på 4. Det kan være svært at skalere med trin på 8 med dit baseline-gitter, fordi de tilgængelige liniehøjder er for langt fra hinanden til nogle tekststørrelser.

At lade nogle af fontstørrelserne ledsages af en mere passende linjehøjde er en god vej fremad. Du kan altid bumpe afstanden over eller under en given linje med 4 pixel for at gøre det på linje med det større atomgitter.

Når det anvendes, har baseline-gittersystemet evnen til at justere elementets rumlige system (8pt-gitter) med typografisystemet for at skabe en overbevisende lodret rytme i designet.

Implementering af webtypografi - i virkeligheden

Det er muligt at have en meningsfyldt og struktureret brugergrænseflade, der overholder et 8pt gitter, der også har et langt læseområde.

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

De fleste digitale produktfirmaer gør dette allerede mellem deres marketinglandingsside, det digitale produkt og deres dokumentation. At træffe beslutningen om at strukturere disse typografiske områder separat kan frigøre dig fra en uholdbar kompleksitet.

Faldgrube - Ems, rems og pixels oh my!

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

Relative enheder som rems og ems misforstås undertiden, og efter min erfaring fører dette til et uholdbart typografisystem. F.eks. Skal forholdet mellem skriftstørrelse på 14 pix og en linjehøjde på 20 pix ikke fanges i relative enheder, fordi forholdet skal ændres, når skriftstørrelsen øges.

At definere en linjehøjde på 1.4285714286em er latterligt, fordi de fleste ikke kan gøre den slags matematik i deres hoved. Hvis skrifttypestørrelsen stiger til 16 pixel, 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 en misbrug af relative enheder. Se en komplet liste over absolutte vs relative enheder her.

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

Imidlertid skalerer browsere ikke basisstørrelsen på skrifttypen, når du zoomer ind med command +. Der er tilgængelighedsværktøjer, der skalerer basis skriftstørrelser for brugere, der har brug for det. Jeg anbefaler at teste det ordentligt for at sikre, at det er den oplevelse, du vil have brugerne. Afkrydsningsfeltets tilgængelighed kan skade mere, end det hjælper.

Brug af rems og ems på dit websted / din app er utroligt stærk. Der er mange meget interessante brugssager, 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 en solid brug for dem. At bage dem ind i kernen i dit typografisystem kan åbne dig for forvirring og uventede brugeroplevelser.

8pt gitter typografi

Den mest kraftfulde del af 8pt gitterkonceptet er dens evne til at skabe konsistens i hele dit design. Du bliver nødt til at vurdere brugernes 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 velkendte navne: Google Material, Pivotal, Atlassian, Intuit.

Referencer og relateret læsning

  • Priyanka Godbole: En ramme til at skabe et forudsigeligt og harmonisk afstandssystem til hurtigere design-dev-overdragelse
  • Richard Rutter: Elementerne i typografisk stil anvendt på nettet
  • Ian Yates: Sådan etableres en modulær typografisk skala
  • Nathan Curtis: Space in Design Systems
  • Vincent De Oliveira: Dybdyk CSS: skrifttypemål, linjehøjde og lodret justering
  • Kezz Bracey: Hvorfor du skal bruge Rem-baserede layouts

Tidligere 8-punkts netartikler:

  1. Introduktion til 8-punkts gittersystem
  2. 8-punkts gitter: rammer 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, bedes du efterlade en kommentar eller kontakte Twitter.