Studio Editor: Met websitetypografie werken

Leestijd 4 minuten
Websitetypografie verwijst naar de tekst die op een website wordt gebruikt. Het is onderverdeeld in Lettertypen en Tekststijlen, die je afzonderlijk kunt aanpassen aan het uiterlijk dat je wilt bereiken.
In dit artikel lees je meer over:

Lettertypen en tekststijlen

Het Lettertypen-gedeelte toont alle lettertypen die je gebruikt in de tekststijlen van de website. Wanneer je een lettertype wijzigt in het Lettertypen-gedeelte, worden automatisch alle tekststijlen bijgewerkt die het oude lettertype gebruikten. 
De Tekststijlen verwijzen naar de afzonderlijke teksttypen die op de website worden gebruikt (bijvoorbeeld: Koptekst 2, Paragraaf 1). 
Tip:
H1 - H6 zijn koptags die automatisch aan deze titels worden toegewezen. Door de hiërarchie van bovenaf in je titels te houden, in overeenstemming met de koptags, wordt zowel je SEO als de toegankelijkheid geholpen. 

Websitetypografie bijwerken

Je kunt de lettertypen van de website wijzigen of het uiterlijk van de 9 afzonderlijke tekststijlen aanpassen (6 koppen, 3 alinea's).   

Om de typografie bij te werken:

  1. Klik links in de Editor op Websitestijlen.
  2. Klik op het Typografie-tabblad.
  3. Kies wat je wilt aanpassen: een lettertype of een tekststijl:
    • Lettertype:
      1. Klik onder Lettertypen op het lettertype dat je wilt bijwerken.
      2. Selecteer een nieuw lettertype in de dropdown.
      3. Klik op Bijwerken om het nieuwe lettertype toe te passen.
    • Tekststijl:
      1. Wijs de relevante tekst aan onder Tekststijlen en klik op het Meer acties-pictogram.
      2. Klik op Bewerken.
      3. Pas de tekststijl naar wens aan:
        • Kies een nieuw lettertype uit de dropdown.
        • Kies de lettergrootte.
        • Maak de tekst proportioneel schalend zodat het er op elk schermformaat ideaal uitziet.
          • Stel de maximale en minimale grootte in px (pixels).
        • Maak de tekst vet en/of cursief.
        • Stel de regel- en tekenafstand in.
        • Kies de kleur van de tekst.
      4. Ga terug naar het hoofdpaneel door linksboven op de pijlte klikken.
De Tekst bewerken-opties zijn geopend voor kop 6 in het Websitestijlen-paneel. De cursor schakelt de Tekst schalen-schakelaar in.

Tekststijlen toepassen op een pagina

Thematitels en -paragrafen zijn beschikbaar vanuit het Elementen toevoegen-paneel. Klik op Tekst en sleep de relevante stijl onder Tekstthema's naar de gewenste locatie. 
Een screenshot van de tekstthema's die beschikbaar zijn in het Elementen toevoegen-paneel. De thematekst is gemarkeerd.

Een stijl op een tekstelement toepassen

Je kunt ook een stijl toepassen op een bestaand tekstelement op de pagina. Klik op het element op Tekst bewerken en selecteer de relevante stijl in de Thema-dropdown in de Inspector
Een bijgesneden screenshot van het Ontwerp-gedeelte in het Inspector-paneel. De Stijl-dropdown is gemarkeerd.

Tekststijlen overschrijven

Als je het ontwerp van een tekstelement wijzigt nadat je er een stijl (thema) voor hebt geselecteerd, maak je een 'ontwerpoverschrijving'. Dit betekent dat eventuele updates van de gekozen stijl niet van toepassing zijn op dit tekstelement. 
Je kunt tekstelementen met overschrijvingen terugzetten naar hun oorspronkelijke stijl. Bovendien kun je ook overschrijvingen toepassen op de stijl zelf. Wijs Stijl aan en klik op het Meer acties-pictogramundefinedom te selecteren wat je wilt doen.
Het Ontwerp-tabblad met tekst in het Inspector-paneel. De cursor wijst de Reset-optie in de tekststijl aan.

Vond je dit artikel nuttig?

|