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 Category | Typeface | Weight | Size | Case | Semantic Class |
---|---|---|---|---|---|
H1 | Roboto | 900 | 28/14em | Normal | Huge |
H2 | Roboto | 900 | 24/14em | Normal | Large |
H3 | Roboto | 900 | 18/14em | Normal | Medium |
H4 | Roboto | 700 | 15/14em | Normal | Small |
H5 | Roboto | 700 | 14/14em | Normal | Tiny |
p | Roboto | 300 | 14px | Normal | N/A |
small | Roboto | 300 | 11.2px | Normal | N/A |
Sub headers
H1 Sub Header
H2 Sub Header
H3 Sub Header
H4 Sub Header
H5 Sub Header
Example
States
Disabled Header