Typografisk skalgenerator
Generatorn beräknar en modulär typografisk skala från en grundstorlek och en kvot, från Minor Second (1.067) till Golden Ratio (1.618), och ger nio storlekar som CSS custom properties.
Om verktyget
Generatorn beräknar en modulär typografisk skala från en grundstorlek och en kvot, från Minor Second (1.067) till Golden Ratio (1.618), och ger nio storlekar som CSS custom properties.
Så använder du det
- Ange en grundstorlek i pixlar (16 px är webbläsarens standard).
- Välj en skalkvot, till exempel Major Third (1.25).
- Välj enhet: rem, px eller em.
- Klicka på Copy CSS Variables för att använda storlekarna från --xs till --4xl.
Bra att veta
- Varje steg i en modulär skala multiplicerar föregående storlek med samma kvot.
- Generatorn ger nio steg: två under grundstorleken, grundstorleken och sex över den.
- Mindre kvoter (1.067–1.2) passar täta gränssnitt; större kvoter (1.333–1.618) passar redaktionella sidor med stora rubriker.
- rem-värden beräknas utifrån en rotfontstorlek på 16 px.
- Med rem skalas texten efter användarens inställning för teckenstorlek i webbläsaren.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Vad är en modulär typografisk skala?
Det är en uppsättning fontstorlekar där varje storlek är den föregående multiplicerad med en fast kvot, vilket gör att rubriker och brödtext hänger ihop visuellt.
Vilken skalkvot ska jag använda?
Major Third (1.25) och Perfect Fourth (1.333) är populära allroundval. Använd en mindre kvot för appar och dashboards och en större för landningssidor och bloggar.
Ska fontstorlekar anges i rem eller px?
rem rekommenderas oftast eftersom det respekterar användarens önskade teckenstorlek i webbläsaren, vilket förbättrar tillgängligheten.
Vilken grundstorlek ska jag använda?
16 px är webbläsarnas standard och en bra grund för brödtext; många webbplatser använder 16–18 px för bekväm läsning.