Type Spacing

This is H1 Headline

This is H2 Headline

This is H3 Headline

This is H4 Headline

This is H5 Headline

This is H6 Headline

This is p tag: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-18
font-18 second line

font-18 text-leading-tight
font-18 narrow second line

font-16

small — title

small — regular Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is H1 Headline

This is H2 Headline

This is H3 Headline

This is H4 Headline

This is H5 Headline

This is H6 Headline

Leading & Letter-spacing

Leading

default leading
lorem ipsum first line
lorem ipsum second line

text-leading-tight
lorem ipsum first line
lorem ipsum second line

text-leading-wide
lorem ipsum first line
lorem ipsum second line

Letter-spacing

default letter-spacing
lorem ipsum 1234567

text-letterspacing-tight
lorem ipsum 1234567

text-letterspacing-wide
lorem ipsum 1234567

text-mono-space-num
lorem ipsum 1234567

Font weight

Datadog's Corpsite bases Bootstrap 4's Text helper classes, with custom helper classes
BS4 Text classes

fw-bolder
font-weight: 700 !important;
Hello World

fw-semibold
font-weight: 600 !important;
Hello World

fw-book
font-weight: var(--bs-body-font-weight) !important;
Hello World

fw-light
font-weight: 200 !important;
Hello World

Examples

This is H1 Headline

H3 Subheadline Example

This is H2 Headline

This is H5 Headline

This is H3 Headline

This is H4 Headline

This is H6 Headline

This is H5 Headline

font-18
font-18 second line

font-18 text-leading-tight
font-18 narrow second line

This is small. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

This is small

This is small. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

This is small

Smaller Tag

This is small. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

This is small

This is small. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Smaller Tag
Second line smaller class

This is small. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

Non-Latin Typefaces

Japanese
Noto Sans JP

業ヤマソユ書死びンフっ選報ぐだリ七感ッぶすゆ力率作ま高嫌ぞ白得チオヨ常48同フタ作8車おクかず梅観八ご入新ヒスシヲ区午椅漁珍がね。

Korean
Noto Sans KR

농업생산성의 제고와 농지의 합리적인 이용을 위하거나 불가피한 사정으로 발생하는 농지의 임대차와 위탁경영은 법률이 정하는 바에 의하여 인정된다

Typography

Main Typography

Hierarchy

H1 — Headline

H2 — Headline

H3 — Headline

H4 — Headline

H5 — Headline

H6 — Headline

Type Spacing

This is H1 Headline

This is H2 Headline

This is H3 Headline

This is H4 Headline

This is H5 Headline

This is H6 Headline

This is H1 Headline

This is H2 Headline

This is H3 Headline

This is H4 Headline

This is H5 Headline

This is H6 Headline

Leading & Letter-spacing

Font weight

Examples

This is H1 Headline

This is H1 Headline

H3 Subheadline Example

This is H2 Headline

This is H5 Headline

This is H3 Headline

This is H4 Headline

This is H6 Headline

This is H5 Headline

Non-Latin Typefaces