Typography

Typography should present your design and content as clearly and efficiently as possible.

The Semantic UI system contains a range of styles that support the needs of the designer and content. And with a "semantic" way of writing classes and props, you can simply say "big" and see bigger elements, or "small" for smaller elements.

Font sizes are measured in 'em'. The base font size is 14px, so 1em = 14px. If a size is listed as a fraction, it's calculated on build.

Scale CategoryTypefaceWeightSizeCaseSemantic Class

H1

Roboto90028/14emNormalHuge

H2

Roboto90024/14emNormalLarge

H3

Roboto90018/14emNormalMedium

H4

Roboto70015/14emNormalSmall
H5
Roboto70014/14emNormalTiny

p

Roboto30014pxNormalN/A

small

Roboto30011.2pxNormalN/A

Sub headers

H1
Sub Header

H2
Sub Header

H3
Sub Header

H4
Sub Header

H5
Sub Header
Example

States

Disabled Header
See more variations and examples