Skip to content

Font Size

This page lists all Font Size CSS custom properties available in the OxyProps Framework

Font Sizes Fixed

link Font Sizes Fixed
Default valueCSS VariableUtility Class
0.5 rem --o-font-size-00 o-font-00
0.75 rem --o-font-size-0 o-font-0
1 rem --o-font-size-1 o-font-1
1.1 rem --o-font-size-2 o-font-2
1.25 rem --o-font-size-3 o-font-3
1.5 rem --o-font-size-4 o-font-4
2 rem --o-font-size-5 o-font-5
2.5 rem --o-font-size-6 o-font-6
3 rem --o-font-size-7 o-font-7
3.5 rem --o-font-size-8 o-font-8

Fluid Font Sizes

link Fluid Font Sizes
Default valueCSS VariableUtility Class
clamp(.75rem, 1.5vw, 1rem) --o-font-size-fluid-0 o-font-fluid-0
clamp(1rem, 2vw, 1.5rem) --o-font-size-fluid-1 o-font-fluid-1
clamp(1.5rem, 3vw, 2.5rem) --o-font-size-fluid-2 o-font-fluid-2
clamp(2rem, 4vw, 3.5rem) --o-font-size-fluid-3 o-font-fluid-3

Advanced Fluid Font Sizes

link Advanced Fluid Font Sizes
Default valueCSS VariableUtility Class
Automatic size based on html element --o-fluid-font o-fluid-font
00: base ÷ scale ratio --o-fluid-font-00 o-fluid-font-00
0 = base font size --o-fluid-font-0 o-fluid-font-0
1: base × scale ratio --o-fluid-font-1 o-fluid-font-1
2: base × scale ratio^2 --o-fluid-font-2 o-fluid-font-2
3: base × scale ratio^3 --o-fluid-font-3 o-fluid-font-3
4: base × scale ratio^4 --o-fluid-font-4 o-fluid-font-4
5: base × scale ratio^5 --o-fluid-font-5 o-fluid-font-5
6: base × scale ratio^6 --o-fluid-font-6 o-fluid-font-6
7: base × scale ratio^7 --o-fluid-font-7 o-fluid-font-7
8: base × scale ratio^8 --o-fluid-font-8 o-fluid-font-8
00 sub: 00 × subheading ratio --o-fluid-font-00-sub o-fluid-font-00-sub
0 sub: 0 × subheading ratio --o-fluid-font-0-sub o-fluid-font-0-sub
1 sub: 1 × subheading ratio --o-fluid-font-1-sub o-fluid-font-1-sub
2 sub: 2 × subheading ratio --o-fluid-font-2-sub o-fluid-font-2-sub
3 sub: 3 × subheading ratio --o-fluid-font-3-sub o-fluid-font-3-sub
4 sub: 4 × subheading ratio --o-fluid-font-4-sub o-fluid-font-4-sub
5 sub: 5 × subheading ratio --o-fluid-font-5-sub o-fluid-font-5-sub
6 sub: 6 × subheading ratio --o-fluid-font-6-sub o-fluid-font-6-sub
7 sub: 7 × subheading ratio --o-fluid-font-7-sub o-fluid-font-7-sub
8 sub: 8 × subheading ratio --o-fluid-font-8-sub o-fluid-font-8-sub
Default valueUtility Class
Subheading Lvl 1 to match a <h1> heading o-subh1
Subheading Lvl 2 to match a <h2> heading o-subh2
Subheading Lvl 3 to match a <h3> heading o-subh3
Subheading Lvl 4 to match a <h4> heading o-subh4
Subheading Lvl 5 to match a <h5> heading o-subh5
Subheading Lvl 6 to match a <h6> heading o-subh6