Design System

Typografie & gewichten

De zelf-gehoste merklettertypen naast elkaar. Bedoeld om te zien welke gewichten écht een fontbestand hebben en welke de browser benadert, plus de volledige type-schaal op ware grootte.

← Terug naar Components

Het gewicht-verhaal

We leveren Helvetica Neue in drie gewichten: 400 (Roman, body), 500 (Medium, knoppen) en 700 (Bold, koppen).

Koppen gebruiken het token --font-weight-semibold = 600, maar er is geen fontbestand voor 600. De browser kiest dan het dichtstbijzijnde geladen gewicht en dat is 700. Hieronder zie je het: 600 en 700 zijn identiek, 500 is duidelijk lichter.

500 · geleverd

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

Medium · knoppen
600 · valt terug

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

SemiBold-token → rendert als 700
700 · geleverd

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

Bold · koppen

Volledige gewichtsladder

Helvetica Neue op elke stap. Alleen 400 / 500 / 700 hebben een eigen bestand; de rest benadert de browser.

  • 300 Light fallback

    Odoo vs Lightspeed kassa

  • 400 Roman / Regular bestand Body

    Odoo vs Lightspeed kassa

  • 500 Medium bestand Buttons

    Odoo vs Lightspeed kassa

  • 600 SemiBold fallback Heading token → valt terug op 700

    Odoo vs Lightspeed kassa

  • 700 Bold bestand Koppen + nadruk

    Odoo vs Lightspeed kassa

  • 800 ExtraBold fallback

    Odoo vs Lightspeed kassa

  • 900 Black fallback

    Odoo vs Lightspeed kassa

Type-schaal

Kop-tokens (gerenderd op het 700-koptengewicht) en body-tokens.

Koppen
--text-heading-xl · 96px

Odoo zonder omwegen

--text-heading-lg · 56px

Odoo zonder omwegen

--text-heading-md · 32px

Odoo zonder omwegen

--text-heading-sm · 24px

Odoo zonder omwegen

--text-heading-xs · 20px

Odoo zonder omwegen

Body
--text-body-lg · 18px

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

--text-body-md · 16px

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

--text-body-sm · 14px

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

--text-body-xs · 12px

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

Helvetica Neue vs IBM Plex Mono

Helvetica Neue · body

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

€7.890 omzet · 1.234 producten · 56 kassa’s · 09:45

IBM Plex Mono · eyebrow + code

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

Odoo zonder omwegen: kassa, voorraad en boekhouding in één systeem.

€7.890 omzet · 1.234 producten · 56 kassa’s · 09:45

Knoppen: Medium (nu) vs Bold (oud)

De reden voor de overstap naar Helvetica Neue: knoppen op Medium voelen minder zwaar dan op Bold. Zelfde label, twee gewichten.

Medium · 500 Start de gratis Quickscan
Bold · 700 Start de gratis Quickscan