Style

Typography

Typography is used to present content clearly and efficiently while adding consistency across experiences and platforms. It should convey the voice and tone of the brand, be easily understood, and allow users to quickly determine valuable content. Typography should not be overly noticeable and should simply allow the user to navigate without distraction.

Primary

Our font is Roboto. You can copy and paste the CDN code below into your site to use it.


                        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Default font

When Artegra or Roboto are not available use Arial as a default font. Arial is also to be used for all typography in emails.

Headings

Heading	Example
`<h1></h1>`	h1 heading
`<h2></h2>`	h2 heading
`<h3></h3>`	h3 heading
`<h4></h4>`	h4 heading
`<h5></h5>`	h5 heading
`<h6></h6>`	h6 heading


                        <h1>h1 heading</h1>

                        <h2>h2 heading</h2>

                        <h3>h3 heading</h3>

                        <h4>h4 heading</h4>

                        <h5>h5 heading</h5>

                        <h6>h6 heading</h6>

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading


                                <p class="h1">h1 heading</p>

                                <p class="h2">h2 heading</p>

                                <p class="h3">h3 heading</p>

                                <p class="h4">h4 heading</p>

                                <p class="h5">h5 heading</p>

                                <p class="h6">h6 heading</p>

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit


                               
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>

Links

This is a link

This is a link inside of a sentence.


                           
        
                         <a href="#">This is a link</a>
        
                            <p>This is a <a href="#">link</a>inside of a sentence</p>