Typografie-omzetter

Loading tool...

In modern responsive webdesign is het gebruik van de juiste typografische eenheden van cruciaal belang voor het creëren van toegankelijke, vloeiende lay-outs. Hoewel absolute eenheden zoals pixels (px) hun plaats hebben, geeft modern CSS sterk de voorkeur aan relatieve eenheden zoals Root EM (rem) en Element EM (em), zodat lay-outs naadloos kunnen schalen op basis van de browserinstellingen van een gebruiker.

Het omzetten van een heel stylesheet van pixels naar rems kan wiskundig gezien tijdrovend zijn. Omdat 1 rem gelijk is aan de basislettergrootte van het document (die standaard meestal $16$px is), vereist het omzetten van $24$px naar rems de berekening $24 \div 16$. Als u die basislettergrootte echter wijzigt naar $18$px, is al uw eerdere rekenwerk achterhaald.

Onze Typografie Converter verwerkt deze berekeningen dynamisch. U kunt direct uw basislettergrootte definiëren en vrij converteren tussen standaard CSS-eenheden (px, rem, em, pt) en print-specifieke eenheden (in, cm, mm, pica's). Of u nu een lettertypeontwerper bent die een logo overzet van drukwerk naar het web of een frontend-ontwikkelaar die een verouderde site opnieuw opbouwt, deze tool biedt onmiddellijk wiskundig nauwkeurige schaalbare waarden.

CSS-eenheden converteren

  1. 1

    Voer de basislettergrootte van uw project in. Dit staat standaard op 16px, wat de standaardinstelling is voor Chrome, Safari en Firefox.

  2. 2

    Voer het aantal in dat u wilt converteren (bijv. 24).

  3. 3

    Selecteer uw begineenheid in het 'Van'-menu (bijv. Pixels).

  4. 4

    Selecteer uw doeleenheid in het 'To'-menu (bijv. Root EM) en bekijk de uiteindelijke geschaalde waarde.

Waarom dit hulpmiddel gebruiken?

  • Maakt de overgang van oude CSS naar moderne standaarden eenvoudig
  • Zorgt voor perfect toegankelijke schaalbreakpoints
  • Aanpasbare basislettergrootte voor volledige flexibiliteit
  • Gratis en snel zonder opdringerige pop-ups
  • Cruciaal hulpmiddel voor UI/UX-ontwikkelaars en ontwerpers

Relatieve eenheden begrijpen

Wat is een 'rem'?

REM staat voor 'Root EM'. Het schaalt relatief ten opzichte van de root lettergrootte `` van een document. Als de rootgrootte 16px is, dan is 2rem overal op de pagina gelijk aan 32px.

Wat is een 'em'?

EM schaalt relatief ten opzichte van de lettergrootte van het *directe bovenliggende element* (parent). Als een bovenliggende `div` een lettergrootte van 20px heeft, wordt een element daarin met `1.5em` berekend als 30px. Dit maakt het moeilijker te beheren dan 'rem', maar erg krachtig voor geïsoleerde modulaire componenten.

Veelgestelde vragen

Waarom zou ik niet gewoon pixels (px) gebruiken voor alles?

Het hardcoderen van pixelwaarden breekt toegankelijkheidsopties. Als een visueel beperkte gebruiker de standaardlettergrootte van zijn browser verhoogt naar 24px, zal uw website niet goed inzoomen als u `font-size: 16px;` hebt afgedwongen. Het gebruik van relatieve eenheden (`rem`) stelt de browser in staat om de schaal dynamisch te herberekenen.

Wat is een punt (pt)?

Een punt is een fysieke meeteenheid die voornamelijk wordt gebruikt in gedrukte media en typografiesoftware zoals InDesign of Word. Eén punt is precies gelijk aan 1/72 van een inch. We converteren dit logisch uitgaande van een CSS-schermresolutie van 96 DPI.

Maakt mijn basislettergrootte uit voor het omzetten van punten (pt) naar pixels (px)?

Nee. Conversies tussen absolute eenheden (zoals px, pt, cm, in) zijn vaste vermenigvuldigers en zijn niet afhankelijk van de basislettergrootte.

Gerelateerde hulpmiddelen