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