Opret dit designsystem, del 1: Typografi

Typografi er uden tvivl den væsentligste del af et websted. Når vi tænker på indholdet på en webside, tænker vi på ord. I denne artikel skal vi se på, hvordan man indstiller et typografisystem i CSS.

Denne artikel er del af en serie om designsystemer inspireret af vores bibliotek med webkomponenter. Biblioteket er afhængig af et solidt system af CSS-globale. Så dette er os, der deler de ting, vi har lært, og indstiller den globale stil på vores bibliotek!

Artikel serie:
- Del 1: Typografi
- Del 2: Grid & Layout
- Del 3: Farver
- Del 4: Afstand
- Del 5: Ikoner
- Del 6: Knapper

Vi har lanceret Typography Editor! Et visuelt værktøj til at indstille typografien for dit webprojekt baseret på CodyHouse Framework. Du kan bruge den til fontparring til at generere typeskalaen og indstille lydhør regler.

For dem af jer, der foretrækker at springe artiklen helt over og se på den endelige CSS-fil, kan du tjekke den ud her.

Indstilling af typografisystemet ved hjælp af CSS-variabler

At designe et typografisystem betyder at tage beslutninger om:

  1. Det skrifttype (font-familie), du vil bruge.
  2. Type (modulær) skala.
  3. Tekstens lydhørhed (størrelse enhed og breakpoints).
  4. Afstand og lodret rytme.
  5. Farver (tema).

Lad os starte med punkt et og to. Valg af det rigtige skrifttype er sandsynligvis et af de første trin, når du opretter et designsystem. Lad os antage, at du har gennemsøgt hundredvis af fontfamilier og fundet den, du elsker (for nu!); i din globale / _typography.scss fil kan du indstille dine fontfamilier som variabler.

Den primære skrifttype, i dette tilfælde, er den "mest anvendte" skrifttype; eller kropstypen. Den sekundære skrifttype kan f.eks. Anvendes på et overskriftelement. Denne tilgang er naturligvis vilkårlig.

Sammen med skrifttypen har vi defineret to variabler: - tekst-base-størrelse og - tekst-skala-forholdet. Værdien af ​​tekstbasisstørrelsen er 1 em, mens - tekst-skala-forholdet bruges til at generere typeskalaen.

Når den anvendes på (vi antager, at der ikke anvendes nogen fontstørrelse på -elementet), svarer 1em til 16px i de fleste moderne browsere. Da vores ramme er mobil først, siger vi: på små enheder vil jeg have, at kropsstørrelsen skal være ~ 16px (kropsstørrelsen på kroppen er lig med - tekst-base-størrelse).

Og ja, efter en lang debat har vi valgt em enheden. Årsagerne bag dette valg forklares senere i afsnittet Mellemrum i artiklen.

Den modulære skala er et sæt værdier opnået fra en basisværdi (i vores tilfælde 1em) og et forhold eller multiplikator (- tekst-skala-forhold). Du kan anvende skalaen på ethvert målbart element (margin, polstring osv.). Sådan opretter du en typeskala, der drager fordel af CSS calc () -funktionen *:

* Vi kunne have forenklet koden ved at udskifte de dele, hvor vi gentager - tekst-skala-forhold med variabler (f.eks. - tekst-lg: calc (1em * var (- tekst-md));), men vi havde problemer med hvordan postcss-css-variabler gulp plugin kompilerer nestede calc () -funktion og CSS-variabler.

Årsagen til, at en modulær skala er nyttig, når den anvendes til noget i et designsystem, er, at den genererer et harmonisk sæt værdier i modsætning til at indstille hver værdi uafhængigt (måske at få dem fra en .sketch-fil).

Bemærk, at ved at definere hver tekststørrelsesvariabel multiplicerer vi 1em med - tekst-skala-forholdet. Denne 1em er ikke værdien — tekst-base-størrelse. Du kan indstille en - tekst-base-størrelse forskellig fra 1 em (mens du ikke skulle ændre 1 m i calc () -funktionen).

Da em-enheden er en relativ enhed, der er lig med den aktuelle fontstørrelse, opdaterer vi fontstørrelsen på kroppen, og som et resultat, alle variabler i tekststørrelse. Hele typografien påvirkes.

Afsnitselementet arver basisstørrelsesstørrelsen, mens vi indstiller en bestemt skriftstørrelse for hvert overskriftelement. Desuden opretter vi nogle brugsklasser i tilfælde af at vi for eksempel vil anvende - text-xxl-skriftstørrelse på et element, der ikke er et

.

Hvorfor inkludere typeskalaen i din CSS? Med et ord: kontrol.

Lad os sige, at vi vil øge kropsstørrelsen på en bestemt medieforespørgsel; for eksempel øger vi - text-base-størrelse til 1,25 em efter 1024px. Overskriftselementerne påvirkes alle af ændringen (1em i calc () -funktionen er ikke længere ~ 16px, men ~ 20px), derfor bliver de alle større. Lad os antage, at vi har lyst til at øge størrelsen på

-elementet endnu mere. Hvordan gør vi det?

En mulighed ville være at øge værdien - tekst-base-størrelse, men den er ikke ideel. Kropsteksten er stor nok, jeg vil bare målrette mod

. Her er fordelen ved at gemme - tekst-skala-forholdet i en variabel. Vi kan redigere det og påvirke alt andet end kropsteksten:

Med denne teknik kan du styre størrelsen på alle dine tekstelementer ved kun at redigere to variabler. Ikke bare det, du kan drage fordel af em-enheden og ændre alle margener, polstringer og afstand generelt ved at redigere - text-base-størrelse på rodniveau.

Denne metode er ikke kun en IMO-tidsbesparende, det er en effektiv tilgang til at gøre tekst lydhør. Både designere og udviklere kan drage fordel af det. Alt, hvad vi har brug for, er at indstille en demotypografi.html-fil med nogle tekstelementer plus nogle komponenter. Designeren kan hoppe ind og finpusse typografien direkte ved kodning.

Så ... hvad er fangsten? Når du bruger Developer Tools til at inspicere fontstørrelsen, ser du ikke numeriske værdier, men variabelnavne; som ikke giver meget information. Men betyder det noget? Er det kritisk at vide, at en fontstørrelse er 28px i modsætning til 29.4560px? Dit kald!

Mellemrum

Nu når størrelsen er sorteret, er vi nødt til at håndtere afstand. Hvad er den ideelle margin-bund for et

element? Hvad med afsnit? En mulighed for at håndtere afstand er at indstille en anden skala til at styre den lodrette rytme.

Sådan fungerer det:

  1. Indstil en basisværdi eller basislinje -> f.eks. 24 px
  2. Generer et sæt værdier, der er multipler af basislinjen
  3. Brug disse værdier til at generere ensartet afstand mellem elementerne

Fordelen ved denne metode er, at den skaber en harmonisk lodret afstand, der får brugeren til at føle sig ”sikker”. Læs mere om, hvorfor vertikal rytme er en god praksis i denne fantastiske artikel af Zell Liew.

Når det er sagt, valgte vi noget andet! Da vi bruger em-enheden til fontstørrelsen, bør vi indstille afstand i px- eller rem-værdier, hvis vi vil bevare den lodrette rytme (ellers vil afstanden blive påvirket af em-enheden i fontstørrelsen). Som et resultat, hvis vi ændrer fontstørrelsen på

, ønsker vi muligvis også at finjustere margin-bunden (f.eks. Indstille en medieforespørgsel og øge margin-bunden til - space-xl); Ellers kan margenen se for lille ud nu, hvor

er større end før.

Selvom det ikke er en stor ting at indstille en medieforespørgsel til at finpudse margenen, besluttede vi at stole helt på el-enhederne til em enheder. Hvis du indstiller dine marginer i em, er chancerne for, at du ikke behøver at redigere dem.

Bare mine 2 cent: vi bruger ofte webdesignkoncepter, der stammer fra printdesign (f.eks. Lodret rytme). Vi kan bryde disse regler for enkeltheds skyld, hvis det ikke påvirker brugeroplevelsen.

Her er et eksempel på, hvordan man indstiller et afstandssystem ved hjælp af em-enheder:

Jeg adskiller generelt mellemrum (_spaces.scss) fra typografi (_typography.scss), men det er op til dig.

Årsagen til, at margener på lister og afsnit stammer fra .text-container-klassen, er at adskille tekstblokke fra alle de andre steder, hvor et afsnit eller en uordnet liste kan bruges. Valgfrit kan du målrette mod elementet .

Redigering af tekststørrelse og afstand på et komponentniveau

Det system, vi undersøger, giver mening, så længe alle tekstelementer ændres i overensstemmelse med de to hovedtekstvariabler (- tekst-base-størrelse og - tekst-skala-forhold). Hvordan redigerer vi tekststørrelse på komponentniveau?

Alternativ 1 vil være målretning mod komponenten:

Denne ændring vil påvirke hele komponenten i alle mediespørgsmål. Det er som at sige: ”Jeg vil have, at alle tekstelementer i denne komponent skal være 120% af, hvad de normalt ville være”.

Hvis du vil målrette mod et specifikt element inde i komponenten, har du følgende muligheder:

Den første mulighed giver dig mulighed for at indstille størrelsen på

som multiple af - text-base-størrelse (i dette eksempel x3); sandsynligvis ikke ideel, fordi størrelsen på

ikke længere påvirkes af variablen - tekst-skala-forhold. Den anden mulighed indstiller en ny størrelse baseret på - tekst-base-størrelse. Ikke en fan af denne indstilling, fordi den genererer en værdi, der sandsynligvis er væk fra skalaen, og den ikke er påvirket af forholdet mellem tekst og skala.

Af de to andre indstillinger er den sidste min favorit (omfordeling af variablen), fordi den opnåede nye værdi stadig hører til typeskalaen.

farver

Tematik er en del af et mere kompliceret emne, der er værd at udforske i en anden artikel. For at afslutte vores typografiudforskning skal vi imidlertid se, hvordan du indstiller de primære farver *:

* Jeg foretrækker generelt at gemme alle farvevariabler i en separat fil (_colors.scss).

Ovenstående stil kan bruges til at indstille nogle grundlæggende regler. Chancen er, at vi er nødt til at skabe variationer af disse farver. Snart kan vi gøre det ved at opdatere variablen. Desværre understøttes ikke opdatering af en CSS-variabel ved hjælp af en klasse i alle moderne browsere (og gulp plugins). For tiden er vi nødt til at ændre variablen helt!

Sætter alt sammen

Lad os sætte alle brikkerne sammen! Det er sådan, vi har indstillet typografi indtil videre inden for vores rammer. Det er ikke nødvendigvis den endelige version. Vi gennemgår alt inden vi offentliggør biblioteket på Github. Åh, og enhver feedback er velkommen! Lad os høre, hvad du synes, og hvad der kunne gøres bedre.

Jeg håber, du nød artiklen! For flere webdesign-nuggets, følg os her på Medium eller Twitter.