Headings are used to structure the content of a page and allow users to quickly identify key sections.
Our style guide allows for the choice between two different types of headings—a default heading family for content-focused and/or transactional pages (Financial Security Blog/MyCOUNTRY) and a marketing heading family for marketing-specific pages (COUNTRYFinancial.com). Your website may use a combination of the two heading families together, however only one should be used per page. More information on how to choose and implement a specific family can be found below.
All of our font sizes have been chosen using a harmonious modular scale, similar to the Golden Ratio. This helps ensure a uniform visual rhythm, as well as aiding in overall readability down the page. Consider following the appropriate scale (shown in the examples below) for each heading family when designing additional font sizes for your project.
To calculate a new font size, multiply/divide the base font size of 1em by the appropriate scale factor. For example, if we are using the Golden Ratio scale of 1.618, our equation would be: 1em x 1.618 = 1.618em. Since our answer equals 1.618, this means our next available font size above 1em, would be 1.618em. You can continue using this principle as you further increase font size, by multiplying the scale factor with your previous answer. For the next font size in our example sequence, our equation would be: 1.618 x 1.618 = 2.618.
When using a modular scale to create new heading sizes, your base font size of 1em should always be equal to the size of your heading 5 (and vice versa). Following the example shown above, this would translate to the following heading sizes*:
h3 { font-size: 2.618em; }
h4 { font-size: 1.618em; }
h5 { font-size: 1em; }
*Above font sizes are for example only. Actual font sizes for heading families are listed below.
Depending on depth of content, you may use a variety of heading levels to establish content hierarchy. When doing so, ensure that headings are sequential and not used out of order. For example, in order to apply a Heading Level 3 to a page, you must first have used a Heading Level 1 and 2.
Headings Hierarchy Example
Our default heading family serves a dual purpose. It's ideal for any page that focuses on large bodies of content, where readability is the primary focus. This would include article pages, blog entries, and informational content, such as privacy policy or terms and conditions. Additionally, the default heading family may be used on transactional pages, where space is limited and the primary focus is on the client's interaction with the page itself. A prime example for this type of interaction would be MyCOUNTRY.
No additional classes are needed to use the default heading family, as they are part of our base CSS.
Font-size: 2.074em (33pt)*
Line-height: 1.25 (41pt)
Font-size: 1.728em (28pt)
Line-height: 1.25 (35pt)
Font-size: 1.44em (23pt)
Line-height: 1.25 (29pt)
Font-size: 1.2em (19pt)
Line-height: 1.25 (24pt)
Font-size: 1em (16pt)
Line-height: 1.25 (20pt)
Font-size: 0.833em (13pt)
Line-height: 1.25 (17pt)
Note: All of our default heading family sizes are based on a modular scale factor of 1.2, also known as the Minor Third.
*Font sizes shown in (pt) are specifically for prototyping and represent the desktop screen size.The marketing heading family is used on pages where an emphasis on scanability and informational heirarchy is needed to allow users to easily identify content—for example, COUNTRYFinancial.com.
To add the marketing heading family to your page, add class="marketing-heading" to the <body> tag of your html page, as shown below.
<body class="marketing-heading"></body>
Font-size: 2.441em (39pt)*
Line-height: 1.25 (49pt)
Font-size: 1.953em (31pt)
Line-height: 1.25 (39pt)
Font-size: 1.563em (25pt)
Line-height: 1.25 (31pt)
Font-size: 1.25em (20pt)
Line-height: 1.25 (25pt)
Font-size: 1em (16pt)
Line-height: 1.25 (20pt)
Font-size: 0.8em (13pt)
Line-height: 1.25 (16pt)
Note: All of our marketing heading family sizes are based on a modular scale factor of 1.25, also known as the Major Third.
*Font sizes shown in (pt) are specifically for prototyping and represent the desktop screen size.This heading family is primarily used for "transactional" pages, with a lot of information, usually monetary or billing specific. For example, MyCOUNTRY.
To add the marketing heading family to your page, add class="major-second-heading" to the <body> tag of your html page, as shown below.
<body class="major-second-heading"></body>
Font-size: 1.602em
Line-height: 1.125
Font-size: 1.424em
Line-height: 1.125
Font-size: 1.266em
Line-height: 1.125
Font-size: 1.125em
Line-height: 1.125
Font-size: 1em
Line-height: 1.125
Font-size: 0.889em
Line-height: 1.125
Note: All of our transactional heading family sizes are based on a modular scale factor of 1.125, also known as the Major Second.