Typography

We stick to Bootstrap’s global settings for typography. We use Bootstrap typography and text classes when needed. We use the default fonts from Bootstrap with the default font-size of 16px.


Example


Headings

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5
h6 Heading 6

Paragraph with .h1

Paragraph with .h2

Paragraph with .h3

Paragraph with .h4

Paragraph with .h5

Paragraph with .h6

h1 Heading 1 with faded text


Inline Text Elements

You can use the mark tag to highlight text.

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 highlighted word with .mark

This paragraph has a smaller word with .small

This is in monospace

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


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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
%hr
%h5 Headings
%hr

%h1 h1 Heading 1
%h2 h2 Heading 2
%h3 h3 Heading 3
%h4 h4 Heading 4
%h5 h5 Heading 5
%h6 h6 Heading 6

%p.h1 Paragraph with .h1
%p.h2 Paragraph with .h2
%p.h3 Paragraph with .h3
%p.h4 Paragraph with .h4
%p.h5 Paragraph with .h5
%p.h6 Paragraph with .h6

%h1
  h1 Heading 1
  %small.text-muted with faded text

%hr
%h5 Inline Text Elements
%hr

%p
  You can use the mark tag to
  %mark highlight
  text.
%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.mark highlighted
  word with .mark

%p
  This paragraph has a
  %span.small smaller
  word with .small

%p.text-monospace This is in monospace

%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