Common CSS (Spacing & Position Utilities)

FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, and spacing. These utilities form the foundation for more advanced responsive interfaces.

Demo: This element has class fixed-top. It is fixed at the top of the viewport.

Demo: This element has class fixed-bottom. It is fixed at the bottom of the viewport.

Heading Typography Sizes

The framework specifies customizable typography sizes for all standard heading elements (H1 to H6) using CSS root variables. These can be overridden dynamically or in your custom stylesheets.

Live Typography Scaling

Modify the values below to adjust heading sizes across the site dynamically.

--h1-size

--h2-size

--h3-size

--h4-size

--h5-size

--h6-size

H1 Heading Size Sample

H2 Heading Size Sample

H3 Heading Size Sample

H4 Heading Size Sample

H5 Heading Size Sample

H6 Heading Size Sample

Typography Variables Reference

Variable	Default Value	Description
--h1-size	2rem	Font size for h1 headings
--h2-size	1.5rem	Font size for h2 headings
--h3-size	1.25rem	Font size for h3 headings
--h4-size	1rem	Font size for h4 headings
--h5-size	0.875rem	Font size for h5 headings
--h6-size	0.75rem	Font size for h6 headings

Display Classes

Large, eye-catching text styles for hero sections, titles, and major landing page headers:

Display 4

Display 3

Display 2

Display 1

Class	Font Size	Font Weight
.display4	112px	200 (Light)
.display3	56px	400 (Regular)
.display2	48px	400 (Regular)
.display1	36px	400 (Regular)

Heading Classes

Heading helper classes let you apply standard heading font sizes to any HTML tag (like <span>, <p>, or <div>):

Span tag with class .h1

P tag with class .h2

Div tag with class .h3

Span tag with class .h4

Live Font Settings Customizer

Customize the global font family, base size, line height, and font weight variables to see how they modify the document's body text rendering.

--font-name (Family)

--font-size

--line-height

--font-weight

This preview paragraph uses the --font-name, --font-size, --line-height, and --font-weight variables. Changing the inputs above will dynamically update these variables in real-time inside the isolated container styles.

Font Settings Reference

Metro UI uses CSS variables to configure the primary font styles globally. These can be adjusted at the root stylesheet:

Variable	Default Value	Description
--font-name	-apple-system, BlinkMacSystemFont, "Segoe UI", ...	System font stack prioritizing local OS rendering
--font-size	1rem	Base typography font size for body elements
--line-height	1.5	Base line height for layout copy readability
--font-weight	400	Default text font weight