Maak uw ontwerpsysteem, deel 1: typografie

Typografie is misschien wel het essentiële onderdeel van een website. Als we nadenken over de inhoud van een webpagina, denken we aan woorden. In dit artikel gaan we kijken hoe we een typografiesysteem in CSS kunnen instellen.

Dit artikel maakt deel uit van een serie over ontwerpsystemen die zijn geïnspireerd op onze bibliotheek met webcomponenten. De bibliotheek vertrouwt op een solide systeem van CSS-globals. Dus dit zijn wij die de dingen delen die we hebben geleerd om de wereldwijde stijl van onze bibliotheek te bepalen!

Artikelreeks:
- Deel 1: Typografie
- Deel 2: Raster en lay-out
- Deel 3: kleuren
- Deel 4: Afstand
- Deel 5: Pictogrammen
- Deel 6: Knoppen

We hebben de typografie-editor gelanceerd! Een visuele tool om de typografie van uw webproject in te stellen op basis van het CodyHouse Framework. U kunt het gebruiken voor lettertypeparen, om de typeschaal te genereren en responsieve regels in te stellen.

Degenen onder u die het artikel liever helemaal overslaan en het definitieve CSS-bestand bekijken, kunnen dit hier bekijken.

Het typografiesysteem instellen met behulp van CSS-variabelen

Het ontwerpen van een typografiesysteem betekent beslissingen nemen over:

  1. Het lettertype (lettertypefamilie) dat u wilt gebruiken.
  2. Type (modulaire) schaal.
  3. Responsiviteit van de tekst (grootte-eenheid en breekpunten).
  4. Spatiëring en verticaal ritme.
  5. Kleuren (thema).

Laten we beginnen met punt één en twee. Het kiezen van het juiste lettertype is waarschijnlijk een van de eerste stappen wanneer u een ontwerpsysteem maakt. Laten we aannemen dat je honderden lettertypefamilies hebt doorzocht en degene hebt gevonden waar je van houdt (voorlopig!); in uw global / _typography.scss bestand, kunt u uw lettertypefamilies instellen als variabelen.

Het primaire lettertype is in dit geval het 'meest gebruikte' lettertype; of het hoofdlettertype. Het secundaire lettertype kan bijvoorbeeld worden toegepast op een kopelement. Deze aanpak is natuurlijk willekeurig.

Samen met het lettertype hebben we twee variabelen gedefinieerd: de - tekst-basis-grootte en de - tekst-schaal-verhouding. De waarde van de tekstbasisgrootte is 1em, terwijl de - tekst-schaal-verhouding wordt gebruikt om de typeschaal te genereren.

Wanneer toegepast op de (we gaan ervan uit dat er geen lettergrootte wordt toegepast op het element ), is 1em gelijk aan 16 px in de meeste moderne browsers. Omdat ons framework eerst mobiel is, zeggen we: op kleine apparaten wil ik dat de hoofdtekstgrootte ~ 16 px is (de lettergrootte van de hoofdtekst is gelijk aan de - tekstbasisbasis).

En ja, na een lang debat hebben we gekozen voor de em-eenheid. De redenen voor deze keuze worden later uitgelegd in het gedeelte Afstand van het artikel.

De modulaire schaal is een reeks waarden die zijn verkregen uit een basiswaarde (in ons geval 1em) en een verhouding of vermenigvuldiger (- tekst-schaal-verhouding). U kunt de schaal toepassen op elk meetbaar element (marge, opvullingen, enz.). Zo maakt u een typeschaal die gebruikmaakt van de CSS-functie calc () *:

* We hadden de code kunnen vereenvoudigen door de delen waar we herhalen te vervangen - tekst-schaal-verhouding met variabelen (bijv. - text-lg: calc (1em * var (- text-md));), maar we hadden problemen met hoe de plug-in voor postcss-css-variabelen gulp de geneste calc () functie en CSS-variabelen compileert.

De reden waarom een ​​modulaire schaal nuttig is wanneer het op iets in een ontwerpsysteem wordt toegepast, is dat het een harmonieuze set waarden genereert, in tegenstelling tot het onafhankelijk instellen van elke waarde (misschien verkrijgen van een .sketch-bestand).

Merk op dat we bij het definiëren van elke variabele voor tekstgrootte 1em vermenigvuldigen met de - tekst-schaal-verhouding. Die 1em is niet de waarde voor tekst-basis-grootte. U kunt een - tekst-basisgrootte instellen die verschilt van 1em (terwijl u de 1m in de functie calc () niet zou moeten wijzigen).

Aangezien de em-eenheid een relatieve eenheid is die gelijk is aan de huidige lettergrootte, werken we, als we de - tekst-basisgroottevariabele bij een specifieke mediaquery bijwerken, de lettergrootte van de hoofdtekst bij en, als resultaat, alle variabelen voor tekstgrootte. De hele typografie wordt beïnvloed.

Het alinea-element neemt de basislettergrootte over, terwijl we voor elk kopelement een specifieke lettergrootte instellen. Bovendien maken we enkele hulpprogramma-klassen voor het geval we bijvoorbeeld de - text-xxl-lettergrootte willen toepassen op een element dat geen

is.

Waarom de typeschaal opnemen in uw CSS? In één woord: controle.

Stel dat we de lettergrootte van het hoofdgedeelte bij een specifieke mediaquery willen vergroten; we vergroten bijvoorbeeld de - tekst-basis-grootte naar 1,25em voorbij 1024px. De kopelementen worden allemaal beïnvloed door de wijziging (de 1em in de functie calc () is niet langer ~ 16 px, maar ~ 20 px), daarom worden ze allemaal groter. Laten we aannemen dat we het element

nog groter willen maken. Hoe doen we dat?

Een optie is het verhogen van de waarde - tekstbasisgrootte, maar het is niet ideaal. De hoofdtekst is groot genoeg, ik wil alleen de

targeten. Dit is het voordeel van het opslaan van de - tekst-schaal-verhouding in een variabele. We kunnen het bewerken en alles beïnvloeden, behalve de hoofdtekst:

Met deze techniek kunt u de grootte van al uw tekstelementen beheren door slechts twee variabelen te bewerken. Niet alleen dat, je kunt profiteren van de em-eenheid en alle marges, opvullingen en spatiëring in het algemeen wijzigen door de - tekstbasisgrootte op hoofdniveau te bewerken.

Deze methode is niet alleen een tijdbesparende IMO, het is een krachtige benadering om tekst responsief te maken. Zowel ontwerpers als ontwikkelaars kunnen hiervan profiteren. Het enige dat we nodig hebben, is een demo-typography.html-bestand instellen met enkele tekstelementen plus enkele componenten. De ontwerper kan direct in de codering springen en de typografie aanpassen.

Dus ... wat is het addertje? Wanneer u de ontwikkelaarstools gebruikt om de lettergrootte te inspecteren, ziet u geen numerieke waarden, maar variabelenamen; die niet veel informatie bieden. Maar maakt het uit? Is het cruciaal om te weten dat een lettergrootte 28 px is in plaats van 29,4560 px? Jouw beslissing!

tussenruimte

Nu de grootte is opgelost, moeten we omgaan met afstand. Wat is de ideale marge onderaan van een

-element? Hoe zit het met paragrafen? Een optie om met afstand om te gaan is het instellen van een andere schaal om het verticale ritme te beheren.

Dit is hoe het werkt:

  1. Stel een basiswaarde of basislijn in -> bijv. 24 px
  2. Genereer een set waarden die veelvouden zijn van de basislijn
  3. Gebruik deze waarden om een ​​consistente afstand tussen elementen te genereren

Het voordeel van deze methode is dat het een harmonieuze verticale afstand creëert, waardoor de gebruiker zich 'veilig' voelt. Lees meer over waarom verticaal ritme een goede oefening is in dit geweldige artikel van Zell Liew.

Dat gezegd hebbende, hebben we gekozen voor iets anders! Omdat we de em-eenheid gebruiken voor de lettergrootte, moeten we de afstand instellen in px of remwaarden als we het verticale ritme willen behouden (anders wordt de afstand beïnvloed door de em-eenheid van de lettergrootte). Als gevolg hiervan, als we de lettergrootte van de

wijzigen, willen we misschien ook de marge onderaan aanpassen (bijvoorbeeld een mediaquery instellen en de marge onderaan verhogen naar - spatie-xl); anders kan de marge te klein lijken nu de

groter is dan voorheen.

Hoewel het niet erg is om een ​​mediaquery in te stellen om de marge aan te passen, hebben we besloten volledig te vertrouwen op de elasticiteit van em-eenheden. Als u uw marges in em instelt, is de kans groot dat u ze niet hoeft te bewerken.

Alleen mijn 2 cent: we gebruiken vaak webconcepten die zijn ontstaan ​​in printontwerp (bijvoorbeeld verticaal ritme). We kunnen deze regels, omwille van de eenvoud, overtreden als dit de gebruikerservaring niet beïnvloedt.

Hier is een voorbeeld van het instellen van een afstandssysteem met behulp van em-eenheden:

Over het algemeen scheid ik spatiëring (_spacing.scss) van typografie (_typography.scss), maar dit is aan jou.

De reden waarom de marges van lijsten en alinea's afstammen van de klasse .text-container is om tekstblokken te scheiden van alle andere plaatsen waar een alinea of ​​een ongeordende lijst kan worden gebruikt. Optioneel kunt u het element targeten.

Tekstgrootte en spatiëring op componentniveau bewerken

Het systeem dat we onderzoeken is zinvol zolang alle tekstelementen overeenkomstig veranderen met de twee hoofdtekstvariabelen (- tekst-basis-grootte en - tekst-schaal-verhouding). Hoe kunnen we de tekstgrootte op componentniveau bewerken?

Optie 1 richt zich op de component:

Deze wijziging is van invloed op de hele component, in alle mediaquery's. Het is alsof je zegt: "Ik wil dat alle tekstelementen van dit component 120% zijn van wat ze normaal zouden zijn".

Als u zich op een specifiek element in de component wilt richten, hebt u de volgende opties:

Met de eerste optie kunt u de grootte van de

instellen als veelvoud van de - tekst-basisgrootte (in dit voorbeeld x3); waarschijnlijk niet ideaal, omdat de grootte van de

niet langer wordt beïnvloed door de - tekst-schaal-ratio variabele. De tweede optie stelt een nieuwe grootte in op basis van de - tekst-basis-grootte. Ook geen fan van deze optie, omdat het een waarde genereert die hoogstwaarschijnlijk afwijkt van de schaal, en het wordt niet beïnvloed door de - tekst-schaal-verhouding.

Van de andere twee opties is de laatste mijn favoriet (de variabele opnieuw toewijzen), omdat de verkregen nieuwe waarde nog steeds tot de typeschaal behoort.

kleuren

Thema's maken deel uit van een meer gecompliceerd onderwerp dat het ontdekken waard is in een ander artikel. Laten we om onze typografie-verkenning te voltooien eens kijken hoe we de primaire kleuren kunnen instellen *:

* Over het algemeen geef ik er de voorkeur aan om alle kleurvariabelen in een apart bestand (_colors.scss) op te slaan.

De bovenstaande stijl kan worden gebruikt om enkele basisregels in te stellen. De kans is groot dat we variaties van deze kleuren moeten maken. Binnenkort kunnen we dit doen door de variabele waarden bij te werken. Helaas wordt het bijwerken van een CSS-variabele met behulp van een klasse niet in alle moderne browsers (en gulp-plug-ins) ondersteund. Voorlopig moeten we de variabele volledig wijzigen!

Alles bij elkaar gezet

Laten we alle stukken bij elkaar zetten! Dit is hoe we typografie tot nu toe in ons kader hebben ingesteld. Het is niet noodzakelijk de definitieve versie. We zullen alles bekijken voordat we de bibliotheek op Github publiceren. Oh en alle feedback is welkom! Laat ons horen wat u denkt en wat beter kan.

Ik hoop dat je het artikel leuk vond! Volg ons voor meer informatie over webdesign op Medium of Twitter.