jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS- en ontwerptools

Gratis CSS Root-Relative Font Units Calculator

Bereken pixel-equivalenten voor rcap-, rch-, rex- en ric-eenheden op basis van root-lettergrootte. Vergelijk met rem.

Tool laden...

Wat is CSS Root-Relative Font Units Calculator?

Root-relatieve lettertype-eenheden (Baseline 2026: Chrome 131+, Safari 18.2+, Firefox 136+) geven ontwikkelaars toegang tot specifieke glyph-metingen van het root-element-lettertype. rcap is gelijk aan de kapitaalhoogte (de hoogte van hoofdletters), rch is gelijk aan de tekenbreedte (de advance measure van het 0-glyph), rex is gelijk aan de x-hoogte (hoogte van kleine letters zoals x) en ric is gelijk aan de ideograafbreedte (typisch 1em in CJK-lettertypen). In tegenstelling tot rem dat simpelweg de root-lettergrootte is en u niets vertelt over de werkelijke glyph-verhoudingen van het lettertype, onthullen deze eenheden de ware metrieken van het gebruikte lettertype.

Snel antwoord

rcap (kapitaalhoogte), rch (tekenbreedte), rex (x-hoogte) en ric (ideograafbreedte) zijn root-relatieve lettertype-eenheden die verwijzen naar specifieke glyph-metingen van het root-element-lettertype, in tegenstelling tot rem dat alleen de lettergrootte weerspiegelt. Hun pixelwaarden variëren per lettertypefamilie. Gebruik rcap voor kapitaalhoogte-uitlijning, rex voor verticaal ritme, rch voor tekenbreedte-formaten en ric voor CJK-tekst. Chrome 131+, Safari 18.2+, Firefox 136+ (Baseline 2026).

Last updated: 2026-06-01

Beperkingen

  • Deze eenheden verwijzen naar het root-element-lettertype, niet naar het element waarop ze worden toegepast.
  • rch meet de breedte van het nul-glyph, die mogelijk niet de gemiddelde tekenbreedte voor uw specifieke tekstinhoud vertegenwoordigt.
  • ric is gelijk aan 1em in niet-CJK-lettertypen, waardoor het overbodig is met rem voor Latijnse tekst.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Voer de root-lettertypefamilie en -grootte in om de berekende pixel-equivalenten voor rcap, rch, rex en ric te zien op basis van de werkelijke glyph-metingen van het lettertype.
  2. Vergelijk elke eenheid met rem om de verhouding te zien. Een lettertype met een grote x-hoogte heeft een rex-waarde dicht bij rem, terwijl een lettertype met kleine kleine letters een kleinere rex heeft.
  3. Selecteer een use case uit de presets om de aanbevolen eenheid te vinden.
  4. Kopieer de gegenereerde CSS met de geselecteerde eenheid toegepast op uw gekozen eigenschap, inclusief een rem-fallback-declaratie.

Waarvoor je het kunt gebruiken

  • Lijn de hoogte van decoratieve beginletters of drop caps exact uit op de kapitaalhoogte van de omringende tekst met rcap, waardoor overshoot of gaten worden vermeden.
  • Bepaal de grootte van formulierinvoervelden en monospace-codeblokken op basis van werkelijke tekenbreedte (rch), zodat een maxlength van 40 exact binnen de veldbreedte past.
  • Stel verticale afstand (margin, padding) op tekstelementen in met rex voor verticaal ritme dat proportioneel schaalt met de lettertype-x-hoogte bij verschillende lettertypen.

Gebruik

Praktische voorbeelden

Voorbeeld

Drop cap uitgelijnd op kapitaalhoogte

Een tijdschriftartikel gebruikt een grote initiële drop cap. In plaats van een lettergrootte te raden die visueel uitlijnt, gebruik height: 4rcap om de drop cap-hoogte exact in te stellen op 4 keer de kapitaalhoogte van het root-lettertype. De drop cap lijnt perfect uit met het beginwoord in hoofdletters, ongeacht het lettertype.

Voorbeeld

Invoerveld op tekenbreedte formaat

Een formulier heeft een telefoonnummerveld met maxlength=10. Stel width: 12rch in om een invoerveld te maken dat iets meer dan 10 tekens van het huidige lettertype past. Het veld krimpt of groeit met het lettertype in plaats van een vaste pixelbreedte te zijn.

Veelgemaakte fouten

  • Aannemen dat rcap en rex hetzelfde zijn als de eigen lettertype-metrieken van het element — deze eenheden verwijzen altijd naar het root-element-lettertype, niet naar het element waarop ze worden toegepast.
  • Ric gebruiken buiten CJK-contexten zonder te begrijpen dat het gelijk is aan 1em in niet-CJK-lettertypen — de ideograafbreedte (ric) is betekenisvol voor Chinese, Japanse en Koreaanse tekst.
  • Vergeten dat rch gebaseerd is op de breedte van het nul-glyph (0) — het vertegenwoordigt niet de gemiddelde tekenbreedte of de breedte van de letter w.

Verificatie

  1. Inspecteer in Chrome 131+ een opgemaakt element dat rcap of rex gebruikt en controleer of de berekende pixelwaarde overeenkomt met de verwachte glyph-meting van de root-lettertypefamilie.
  2. Vergelijk dezelfde declaratie met rem door de eenheid te verwisselen — de rcap-waarde moet een kleinere hoogte produceren die overeenkomt met de werkelijke hoofdletterverhoudingen.

FAQ

Vragen over CSS Root-Relative Font Units Calculator

Hoe verschilt rcap van het gebruik van em of rem voor kapitaalhoogte-uitlijning?

em en rem zijn gebaseerd op de lettergrootte, de afstand van de bovenkant van de em-box tot de onderkant. De kapitaalhoogte is meestal kleiner dan de lettergrootte. Het gebruik van height: 1em op een drop cap creëert meer visuele hoogte dan 1rcap omdat em de descender-ruimte omvat. rcap geeft u de werkelijke hoogte van hoofdletters.

Waarom verandert de pixelwaarde van rcap of rex wanneer ik het lettertype wijzig bij dezelfde lettergrootte?

rcap, rex, rch en ric meten werkelijke glyph-metrieken van het root-lettertype. Verschillende lettertypen hebben verschillende verhoudingen, zelfs bij dezelfde lettergrootte. Dit is het hele punt van deze eenheden — ze onthullen de ware typografische metingen van het gebruikte lettertype.

Kan ik rcap en rex gebruiken voor responsieve typografie met clamp()?

Ja. Deze eenheden werken in elke CSS-lengtecontext, inclusief clamp(), min(), max() en calc(). Bijvoorbeeld font-size: clamp(1rex, 2vw + 1rex, 2rex) creëert responsieve tekst die schaalt met viewportbreedte terwijl de x-hoogte-verhouding behouden blijft.

Wat gebeurt er in browsers die rcap, rch, rex of ric niet ondersteunen?

Deze eenheden zijn Baseline 2026 (Chrome 131+, Safari 18.2+, Firefox 136+). In niet-ondersteunde browsers wordt de declaratie die de eenheid bevat volledig genegeerd. Geef altijd een rem- of px-fallback vóór de rcap/rch/rex/ric-declaratie.

Gerelateerde tools

Meer css- en ontwerptools

CSS- en ontwerptools

CSS-carrouselgenerator

Genereer native CSS-carrouselmarkup met scroll-snap, scrollknoppen, scrollmarkeringen en een toegankelijke lijststructuur. Geen JavaScript nodig.

Open tool

CSS- en ontwerptools

CSS Scroll-State-querygenerator

Genereer CSS scroll-state()-containerqueries om gesnapte, vastgezette of scrollbare elementen te stylen. Inclusief JavaScript-fallback voor ondersteuning in andere browsers.

Open tool

Probeer ook

Probeer ook