Typography

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


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

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


Open Bootstrap Docs

vAPP 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 h6

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.

Extra Light weight text.

Light weight text.

Normal weight text

Medium weight text.

Semi-Bolder weight text.

Bolder weight text

Markup example:


                                    <p class="font-w--200">Extra Light weight text.</p>
                                    <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>;Bolder weight text</p>
                                

Text Link Hover.

Markup example:


                                    <a href="#" class="text-color--700 text-hover--primary--80">Text Hover Color Primary.</a>
                                
Class Reference

h1-font
h2-font
h3-font
h4-font
h5-font
h6-font
body-font
font-size--12
font-size--14
font-size--15
font-size--16
font-size--17
font-size--18
font-size--20
font-size--21
font-size--24
font-size--28
font-size--32
font-size--40
font-size--45
font-size--50
font-size--60
font-size--67
font-size--72
line-height--25
line-height--26
line-height--32
line-height--36
line-height--42
line-height--66
line-height--68
font-w--200
font-w--300
font-w--400
font-w--500
font-w--600
font-w--700
text-hover--primary--80