Typography

Documentation and examples for common text utilities to font size and weight.


Check the customization page to know how to update the SpaceMax font.

Check the color page to know how Typography works with different background color.


Open Bootstrap Docs

SpaceMax is fully SEO optimized. It is important for SEO to using heading tag consistent basis. That's why there are some pre-defined classes to maintain it.

Controlling the font size using heading tag:

This is Heading h1

This is Heading h2

This is Heading h3

This is Heading h4

This is Heading h5
This is Heading h5

This is Paragraph

Markup example:


                                            <h1>This is Heading h1</h1>
                                            <h2>This is Heading h2</h2>
                                            <h3>This is Heading h3</h3>
                                            <h4>This is Heading h4</h4>
                                            <h5>This is Heading h5</h5>
                                            <h6>This is Heading h5</h6>
                                            <p>This is Paragraph</p>
Controlling the font size using class
This is Heading h1 This is Heading h2 This is Heading h3 This is Heading h3 This is Heading h4 This is Heading h5 This is Paragraph

Markup example:


                                            <span class="h1-font">This is Heading h1</span>
                                            <span class="h2-font">This is Heading h2</span>
                                            <span class="h3-font">This is Heading h3</span>
                                            <span class="h4-font">This is Heading h3</span>
                                            <span class="h5-font">This is Heading h4</span>
                                            <span class="h6-font">This is Heading h5</span>
                                            <span class="body-font">This is Paragraph</span>

Font weight.

Light weight text.

Normal weight text

Medium weight text.

Semi-Bolder weight text.

Bolder weight text

Markup example:


                                    <p class="font-w--300">Light weight text.</p>
                                    <p class="font-w--400">Normal weight text</p>
                                    <p class="font-w--500">Medium weight text.</p>
                                    <p class="font-w--600">Semi-Bolder weight text.</p>
                                    <p class="font-w--700">Bolder weight text</p>

Text Link Hover.

Text Hover Color Primary.

Text Hover Color Dark.

Text Hover Color Light.

Markup example:


                                        <a href="#" class="text-color--700 text-hover--primary">Text Hover Color Primary.</a>
                                        <a href="#" class="text-color--300 text-hover--dark">Text Hover Color Dark.</a>
                                        <a href="#" class="text-color--700 text-hover--light">Text Hover Color Light.</a>
Class Reference
h1-font
h2-font
h3-font
h4-font
h5-font
h6-font
body-font
font-size-12
font-size-13
font-size-14
font-size-15
font-size-16
font-size-17
font-size-18
font-size-20
font-size-22
font-size-24
font-size-26
font-size-30
font-size-40
font-size-48
font-size-50
font-size-60
font-size-72
line-height--28
font-w-300
font-w--400
font-w--500
font-w--600
font-w--700
text-hover--primary
text-hover--dark
text-hover--light