Typography
Typography is the visual component of the written word. We use typography to pop out or play down (de-emphasize) texts on a page and thus make it more scannable and easy to read.
Overview
Typography can be achieved by:
- playing with
font-sizeproperty (and we use modular scale for that) - adjusting thickness of font via
font-weightpropery - modifying
letter-spacingproperty - applying different shades of color (do de-emphatize)
We've adjusted those setting across man tags.
Headings
Typographic hierarchy is defined by the differences in size and weight of textual elements on the page. A successful hierarchy uses a succinct set of size and weight combinations to both create points of focus and outline the content of a page in an easily scannable structure.
- h1
-
Regular 8msu (22.4333px)fnt-size8 font weight 400
- h2
-
Regular 4msu (17.7167px)fnt-size4 font weight 400
- h3
-
Regular 3msu (16px)fnt-size3 font weight 400
- h4
-
Regular 2msu (15.75px)fnt-size2 font weight 400
- h5
-
Regular 1msu (14.2167px)fnt-size1 font weight 400
- h6
-
Regular 0msu (14px)fnt-size0 font weight 400
Supporting blocks
This include paragraphs, spans, links etc.
Paragraph
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.
Span
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.
Links
Modular scale
We have used modular scale website with following settings to help us provide clean scaling.
$modularscale: (
base: 0.875rem 1rem,
ratio: 1.125
);
1rem = 16px
1em = 14px
| MS | REM | EM | PX |
|---|---|---|---|
| ms(10) | 1.577rem | 1.802em | 25.228px |
| ms(9) | 1.424rem | 1.627em | 22.778px |
| ms(8) | 1.402rem | 1.602em | 22.428px |
| ms(7) | 1.266rem | 1.446em | 20.244px |
| ms(6) | 1.246rem | 1.424em | 19.936px |
| ms(5) | 1.125rem | 1.286em | 18.004px |
| ms(4) | 1.107rem | 1.266em | 17.724px |
| ms(3) | 1rem | 1.143em | 16.002px |
| ms(2) | 0.984rem | 1.125em | 15.75px |
| ms(1) | 0.889rem | 1.0163em | 14.2282px |
| ms(0) | 0.875rem | 1em | 14px |
| ms(-1) | 0.79rem | 0.903em | 12.642px |
Text examples:
Superscript
To add a superscript text (top index), use the "sup" tag without a space between the text and the "sup" tag.
Example: