Typography
After some research, we decided to stick with the Native font stack as we want to rely on system fonts. We use the default fonts from Bootstrap with the default font-size of 16px
. We use Bootstrap typography and text classes when needed. We also use the monospace font stack provided by Bootstrap for preformatted text (pre HTML tag) or elements with class .text-monospace.
Example
Inline Text Elements
This line of text is meant to be treated as deleted text
This line of text is meant to be treated as no longer accurate
This line of text is meant to be treated as an addition to the document
This line of text will render as underlined
This line of text is meant to be treated as fine print
This line rendered as bold text
This line rendered as italicized text
Text Utilities
This is a regular paragraph
This paragraph stands out with .lead
This paragraph has a smaller word with .small
THIS IS IN LOWERCASE
this is in uppercase
this is capitalized
Bold text
Normal weight text
Light weight text
Italic text
Regular paragraph left aligned with .text-left on all viewport sizes
Regular paragraph center aligned with .text-center on all viewport sizes
Regular paragraph right aligned with .text-right on all viewport sizes
This is in monospace
This is a preformatted text
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
%hr
%h5 Inline Text Elements
%hr
%p
%del This line of text is meant to be treated as deleted text
%p
%s This line of text is meant to be treated as no longer accurate
%p
%ins This line of text is meant to be treated as an addition to the document
%p
%u This line of text will render as underlined
%p
%small This line of text is meant to be treated as fine print
%p
%strong This line rendered as bold text
%p
%em This line rendered as italicized text
%hr
%h5 Text Utilities
%hr
%p This is a regular paragraph
%p.lead This paragraph stands out with .lead
%p
This paragraph has a
%span.small smaller
word with .small
%p.text-lowercase THIS IS IN LOWERCASE
%p.text-uppercase this is in uppercase
%p.text-capitalize this is capitalized
%p.font-weight-bold Bold text
%p.font-weight-normal Normal weight text
%p.font-weight-light Light weight text
%p.font-italic Italic text
%p.text-left Regular paragraph left aligned with .text-left on all viewport sizes
%p.text-center Regular paragraph center aligned with .text-center on all viewport sizes
%p.text-right Regular paragraph right aligned with .text-right on all viewport sizes
%p.text-monospace This is in monospace
%pre This is a preformatted text