Appearance
Typography
Meaning and Message
Good and proper use of our fonts is important for our brand and they should be used consistently across all products. Fonts used in our Primerica products should match our brand standards for their respective use.
For our digital products, we use Open Sans font. For print products, we use both Interstate and Garamond, as defined in the Primerica Branding Guidelines.
All our digital products should first use standard, semantic text tags wherever possible. Variables are given as modifiers for an alternate solution.
Font, Headings, Body and Button Text Formats
Open Sans
Aa
- Regular / 400
- Semibold / 600
- Bold / 700
Large Hero Header
64px / 2.25rem / Line height: 82px
Hero Header
36px / 2.25rem / Line height: 48px
Heading one
24px / 1.5rem / Line height: 36px
Heading two
20px / 1.25rem / Line height: 30px
Heading three
18px / 1.125rem / Line height: 27px
Heading four
16px / 1rem / Line height: 24px
Heading five
14px / .875rem / Line height: 24px
Heading six
12px / .75rem / Line height: 21px
Body 1 - Large
16px / 1rem / Line height: 24px / Link default color: / Link hover color:
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.
Body 2 - Medium
14px / .875rem / Line height: 24px / Link default color: / Link hover color:
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.
Body 3 - Small
12px / .75rem / Line height: 21px / Link default color: / Link hover color:
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.
Semi-bold / 16px / 1rem / Line height: 24px / Button default color: / Button hover color:
Type Sizes
Type sizes should be used with semantic tags where possible. Classes can be created to use sizes that fall outside of the default specification, but should be used sparingly. Creating different specifications leads to inconsistency. Open Sans has five weights (300 Light, 400 Normal, Semi-Bold 600, Bold 700 and Extra Bold 800), each of them with an italic version, totaling ten versions.
Type Colors
Our standard in page color for typography is #333333 on light backgrounds, and #FFFFFF on dark backgrounds. This is a guideline and may be changed as per project requirements or design needs.
Line Height
In the context of an enterprise application, the need for long-form text is quite rare. More often, application design involves many small bits of text that all represent the user’s data. This text is spaced intentionally to maintain distinction between different types and rows of data. As a result, we take a pragmatic approach to spacing and line height by resetting all margins and paddings to 0, and allowing the line-height property for all text to inherit a globally defined ratio of 1.5 of the text size. This allows designers and developers to easily opt-in to specific text spacing by leveraging our CSS Text and Spacing Utilities. We do provide a long-form text CSS utility, which will result in our recommended vertical text rhythm for optimizing a balance between readability and space efficiency.
Example Page Hierarchy
The following section is an example how headings appear with normal paragraph text.
<h1>Page Heading</h1> Page Heading
font-size: 1.5rem; (24px) font-weight: 600; line-height: 36px;
<h2>Section Heading</h2> Section Heading
font-size: 1.25rem; (20px) font-weight: 600; line-height: 30px;
<h3>Section of the page</h3> Section of the page
font-size: 1.125rem; (18px) font-weight:600; line-height: 27px;
<h4>Subsection of the page</h4> Subsection of the page
font-size: 1rem; (16px) font-weight: 600; line-height: 24px;
<h5>Subsection of the page</h5> Subsection of the page
font-size: .875rem (14px) font-weight: 600; line-height: 24px;
<h6>Subsection of the page</h6> Subsection of the page
font-size: .75rem (12px) font-weight: 600; line-height: 21px;
Inline Formatting
Inline formatting is used to give special treatment to specific portions of typical paragraph text. It is applied using standards HTML tags as shown in the code below the example.
<a>This is a text link</a>This is a text link
<strong>Strong is used to indicate strong importance</strong> Strong is used to indicate strong importance
<i>This text has added emphasis</i> This text has added emphasis
<b>b element</b>The b element is stylistically different text from normal text, without any special importance
<i>i element</i>The i element is text that is set off from the normal text
<u>u element</u>The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
<del>This text is deleted</del> This text is deleted and <ins>This text is inserted</ins> This text is inserted
<s>This text has a strikethrough</s> This text has a strikethrough
<sup>®</sup> Superscript®
<sub>2</sub> Subscript for things like H2O
<small>This small text is for fine print, etc.</small> This small text is for fine print, etc.
<abbr>title="HyperText Markup Language">HTML</abbr> Abbreviation: HTML
<kbd>Cmd</kbd> Keyboard input: Cmd
<q>This text is a short inline quotation</q> This text is a short inline quotation
<cite>—This is a citation</cite> —This is a citation
<dfn>dfn element</dfn>The dfn element indicates a definition
<mark>mark element</mark> The mark element indicates a highlight
<code>This is what inline code looks like</code> This is what inline code looks like
<samp>This is sample output from a computer program</samp> This is sample output from a computer program
<var>x = y</var> The variable element: x = y
Hyperlinks
Link purpose (in context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A) In cases where the link takes one to a document or a web application, the name of the document or web application would be sufficient to describe the purpose of the link (which is to take you to the document or web application.)