Typography
// Headings
:root {
–font-size-h1: clamp(24px, 3.2vw, 34px);
–font-size-h2: clamp(22px, 2.5vw, 28px);
–font-size-h3: clamp(20px, 2.5vw, 22px);
–font-size-h4: clamp(18px, 2.5vw, 20px);
–font-size-h5: clamp(16px, 2.5vw, 18px);
–font-size-h6: clamp(14px, 2.5vw, 16px);
–font-size-h1-line-height: 1.2;
–font-size-h2-line-height: 1.2;
–font-size-h3-line-height: 1.2;
–font-size-h4-line-height: 1.2;
–font-size-h5-line-height: 1.2;
–font-size-h6-line-height: 1.2;
}
// Fallback for browsers that doesn’t support clamp
@supports not (font-size:clamp(32px, 2.5vw, 40px)) {
:root {
–font-size-h1: 24px;
–font-size-h2: 22px;
–font-size-h3: 20px;
–font-size-h4: 18px;
–font-size-h5: 16px;
–font-size-h6: 14px;
}
@mediascreen and (min-width: 992px) {
:root {
–font-size-h1: 34px;
–font-size-h2: 28px;
–font-size-h3: 22px;
–font-size-h4: 20px;
–font-size-h5: 18px;
–font-size-h6: 16px;
}
}
H1 title example lighter
H1 title example light
H1 title example medium
H1 title example bold
H2 heading title example
H3 heading title example
H4 heading title example
H5 heading title example
H6 heading title example
H1 color-1 center lighter
H2 color-2 center light
H3 color-3 center normal
H4 color-4 center medium
H5 color-5 center bold
H6 color-6 center bolder
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is standard paragraph text. This is standard paragraph text. This is standard paragraph text. This is standard paragraph text. This is standard paragraph text. This is standard paragraph text. This is standard paragraph text.
This is a paragraph text CENTERED. This is a paragraph text CENTERED. This is standard paragraph text CENTERED. This is standard paragraph text CENTERED. This is standard paragraph text CENTERED.
This is a paragraph text ALIGN RIGHT. This is a paragraph text ALIGN RIGHT. This is standard paragraph text ALIGN RIGHT. This is standard paragraph text ALIGN RIGHT. This is standard paragraph text ALIGN RIGHT.
This is a text in text color body style for elements with colored backgrounds. This is a text in text color body style. This is a text in text color body style.
This is a text in text color white style for elements with colored backgrounds. This is a text in text color white style. This is a text in text color white style.
This is a text in text color black style for elements with colored backgrounds. This is a text in text color black style. This is a text in text color black style.
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
:root {
–font-size-xs: 0.75rem; // 12px
–font-size-sm: 0.875rem; // 14px
–font-size-md: 1rem; // 16px
–font-size-lg: 1.125rem; // 18px
–font-size-xl: 1.25rem; // 20px
–font-size-xxl: 1.5rem; // 24px
–font-size-2xl: 2rem; // 32px
–font-size-large: 3rem; // 48px
–font-size-larger: 4rem; // 64px
–font-size-largest: 4.5rem; // 72px
}
:root {
–font-weight-lighter: 200;
–font-weight-light: 300;
–font-weight-normal: 400;
–font-weight-medium: 500;
–font-weight-semi-bold: 600;
–font-weight-bold: 700;
–font-weight-bolder: 900;
}
This is text with –font-size-xs. This is text with –font-size-xs. This is text with –font-size-xs. This is text with –font-size-xs. This is text with –font-size-xs.
This is text with –font-size-sm. This is text with –font-size-sm. This is text with –font-size-sm. This is text with –font-size-sm. This is text with –font-size-sm.
This is text with –font-size-md. This is text with –font-size-md. This is text with –font-size-md. This is text with –font-size-md. This is text with –font-size-sm. This is text with –font-size-md.
This is text with –font-size-lg. This is text with –font-size-lg. This is text with –font-size-lg. This is text with –font-size-lg. This is text with –font-size-lg. This is text with –font-size-lg. This is text with –font-size-lg.
This is text with –font-size-xl. This is text with –font-size-xl. This is text with –font-size-xl. This is text with –font-size-xl. This is text with –font-size-xl. This is text with –font-size-xl.
This is text with –font-size-xxl. This is text with –font-size-xxl. This is text with –font-size-xxl. This is text with –font-size-xxl. This is text with –font-size-xxl. This is text with –font-size-xxl.
This is a text in text color body style for elements with colored backgrounds. This is a text in text color body style. This is a text in text color body style.
This is a text in text color white style for elements with colored backgrounds. This is a text in text color white style. This is a text in text color white style.
This is a text in text color black style for elements with colored backgrounds. This is a text in text color black style. This is a text in text color black style.
This is text with –font-size-xxl and –font-weight-lighter. This is text with –font-size-xxl and –font-weight-lighter. This is text with –font-size-xxl and –font-weight-lighter.
This is text with –font-size-xl and –font-weight-light. This is text with –font-size-xl and –font-weight-light. This is text with –font-size-xl and –font-weight-light.
This is text with –font-size-lg and –font-weight-normal. This is text with –font-size-lg and –font-weight-normal. This is text with –font-size-lg and –font-weight-normal.
This is text with –font-size-md and –font-weight-medium. This is text with –font-size-md and –font-weight-medium. This is text with –font-size-md and –font-weight-medium.
This is text with –font-size-sm and –font-weight-bold. This is text with –font-size-sm and –font-weight-bold. This is text with –font-size-sm and –font-weight-bold.
This is text with –font-size-xs and –font-weight-bolder. This is text with –font-size-xs and –font-weight-bolder. This is text with –font-size-xs and –font-weight-bolder.
Text color styles
This is a text in text color 1 style. This is a text in text color 1 style. This is a text in text color 1 style. This is a text in text color 1 style.
This is a text in text color 2 style. This is a text in text color 2 style. This is a text in text color 2 style. This is a text in text color 2 style.
This is a text in text color 3 style. This is a text in text color 3 style. This is a text in text color 3 style. This is a text in text color 3 style.
This is a text in text color 4 style. This is a text in text color 4 style. This is a text in text color 4 style. This is a text in text color 4 style.
This is a text in text color 5 style. This is a text in text color 5 style. This is a text in text color 5 style. This is a text in text color 5 style.
This is a text in text color 6 style. This is a text in text color 6 style. This is a text in text color 6 style. This is a text in text color 6 style.
This is a text in text color 7 style. This is a text in text color 7 style. This is a text in text color 7 style. This is a text in text color 7 style.
This is a text in text color 8 style. This is a text in text color 8 style. This is a text in text color 8 style. This is a text in text color 8 style.
This is a text in text color 9 style. This is a text in text color 9 style. This is a text in text color 9 style. This is a text in text color 9 style.
This is a text in text color 10 style. This is a text in text color 10 style. This is a text in text color 10 style. This is a text in text color 10 style.