Typography

Typefaces

The Versico® brand uses two rather similar typefaces.

Helvetica

A a

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Helvetica is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger with input from Eduard Hoffmann.

It is a neo-grotesque or realist design, one influenced by the famous 19th century typeface Akzidenz-Grotesk and other German and Swiss designs. Its use became a hallmark of the International Typographic Style that emerged from the work of Swiss designers in the 1950s and 60s, becoming one of the most popular typefaces of the 20th century. Over the years, a wide range of variants have been released in different weights, widths and sizes, as well as matching designs for a range of non-Latin alphabets. Notable features of Helvetica as originally designed include the termination of all strokes on horizontal or vertical lines and unusually tight letter spacing, which give it a dense, compact appearance. Source: Wikipedia

Arial

A a

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Arial, sometimes marketed or displayed in software as Arial MT, is a sans-serif typeface and set of computer fonts. Fonts from the Arial family are packaged with all versions of Microsoft Windows from Windows 3.1 onwards, some other Microsoft software applications, Apple Mac OS X and many PostScript 3 computer printers. The typeface was designed in 1982 by a 10-person team, led by Robin Nicholas and Patricia Saunders, for Monotype Typography. It was created to be metrically identical to the popular typeface Helvetica, with all character widths identical, so that a document designed in Helvetica could be displayed and printed correctly without having to pay for a Helvetica license. Source: Wikipedia

Lead Paragraphs

The following is a lead paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur elementum purus at pharetra. Suspendisse potenti. Nulla sollicitudin mauris quis erat iaculis dictum. Mauris sed efficitur ipsum, at viverra ante. Quisque tellus libero, tristique id molestie at, volutpat et ante. Sed non leo nisl. Etiam et convallis augue. Quisque vitae condimentum diam. Etiam blandit arcu ac nulla elementum, pharetra sollicitudin justo dictum. Morbi porta a lectus vel vulputate. Vestibulum id nibh suscipit, euismod eros egestas, semper nulla. Proin ornare tellus quis augue varius, eu laoreet nunc volutpat. Morbi quis convallis enim, sed bibendum orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras gravida pellentesque erat, quis scelerisque elit faucibus vel.

Headings

The following are heading styles:

Use #231F1F for this background

Use #FFFFFF for this background

Display Text


  .display-text {
    font-weight: bold;
    font-size: 40px;
    text-transform: uppercase;
  }

Heading 1


  h1, .h1 {
    font-weight: bold;
    font-size: 25px;
  }

Heading 2


  h2, .h2 {
    font-weight: bold;
    font-size: 18px;
  }

Heading 3


  h3, .h3 {
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
  }

Heading 4


  h4, .h4 {
    font-weight: bold;
    font-size: 14px;
  }

Body Copy

Use #4C4C4C for this background

Use #FFFFFF for this background

The following is an example of body copy on a dark background:

<div class="versico example">
    <span class="helvetica huge">A a</span>
    <p class="helvetica letters">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
    <p class="helvetica letters">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    <p class="helvetica letters">0 1 2 3 4 5 6 7 8 9</p>
</div>
<div class="versico example">
    <span class="arial huge">A a</span>
    <p class="arial letters">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
    <p class="arial letters">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    <p c
<div class="versico example">
    <p class="body-copy sample-fixed">Use #4C4C4C for this background</p>
    <p class="body-copy sample-fixed light-gray">Use #4C4C4C for this background</p>
    <p class="body-copy sample-fixed gold">Use #4C4C4C for this background</p>
    <p class="body-copy sample-fixed dark-gold">Use #4C4C4C for this background</p>
    <p class="body-copy sample-fixed dark gray">Use #FFFFFF for this background</p>
    <p class="body-copy sample-fixed dark medium-gray">Use #FFFFFF for this background</p>
    <p class="body-copy sample-fixed dark dark-gray">Use #FFFFFF for this background</p>
</div>
<div class="versico example">
    <p class="body-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur elementum purus at pharetra. Suspendisse potenti. Nulla sollicitudin mauris quis erat iaculis dictum. Mauris sed efficitur ipsum, at viverra ante. Quisque tellus libero, tristique id molestie at, volutpat et ante. Sed non leo nisl. Etiam et convallis augue. Quisque vitae condimentum diam. Etiam blandit arcu ac nulla elementum, pharetra sollicitudin justo dictum. Morbi porta a lectus vel vulputate. Vestibulum id nibh suscipit, euismod eros egestas, semper nulla. Proin ornare tellus quis augue varius, eu laoreet nunc volutpat. Morbi quis convallis enim, sed bibendum orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras gravida pellentesque erat, quis scelerisque elit faucibus vel.</p>
</div>
<div class="versico example">
    <p class="lead-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur elementum purus at pharetra. Suspendisse potenti. Nulla sollicitudin mauris quis erat iaculis dictum. Mauris sed efficitur ipsum, at viverra ante.</span> Quisque tellus libero, tristique id molestie at, volutpat et ante. Sed non leo nisl. Etiam et convallis augue. Quisque vitae condimentum diam. Etiam blandit arcu ac nulla elementum, pharetra sollicitudin justo dictum. Morbi porta a lectus vel vulputate. Vestibulum id nibh suscipit, euismod eros egestas, semper nulla. Proin ornare tellus quis augue varius, eu laoreet nunc volutpat. Morbi quis convallis enim, sed bibendum orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras gravida pellentesque erat, quis scelerisque elit faucibus vel.</p>
</div>
<div class="versico example">
    <p class="body-copy dark gray sample">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur elementum purus at pharetra. Suspendisse potenti. Nulla sollicitudin mauris quis erat iaculis dictum. Mauris sed efficitur ipsum, at viverra ante. Quisque tellus libero, tristique id molestie at, volutpat et ante. Sed non leo nisl. Etiam et convallis augue. Quisque vitae condimentum diam. Etiam blandit arcu ac nulla elementum, pharetra sollicitudin justo dictum. Morbi porta a lectus vel vulputate. Vestibulum id nibh suscipit, euismod eros egestas, semper nulla. Proin ornare tellus quis augue varius, eu laoreet nunc volutpat. Morbi quis convallis enim, sed bibendum orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras gravida pellentesque erat, quis scelerisque elit faucibus vel.</p>
</div>
<div class="versico example">
    <h4 class="sample-fixed">Use #231F1F for this background</h4>
    <h4 class="sample-fixed light-gray">Use #231F1F for this background</h4>
    <h4 class="sample-fixed gold">Use #231F1F for this background</h4>
    <h4 class="sample-fixed dark-gold">Use #231F1F for this background</h4>
    <h4 class="sample-fixed dark gray">Use #FCC52B for this background</h4>
    <h4 class="sample-fixed dark medium-gray">Use #FCC52B for this background</h4>
    <h4 class="sample-fixed dark dark-gray">Use #FCC52B for this background</h4>
</div>

For All Body Copy, Headings, and Display Text:

Font-family: Helvetica, Arial and sans-serif;.

Color Guide:

For body copy, default to color #4C4C4C.
When body copy is displayed on a dark background, switch to white.
For headings and display fonts, default to color #231F1F.
When headings and display fonts are displayed on a dark background, switch to #FCC52B.

Lead Paragraphs

An opening paragraph that summarizes page content.
Same font size as an <h2> but matches the styling of a <p> tag.

Body Copy:

Use when one or more sentences make a paragraph
Alignment: Type set flush left provides the eye a constant starting point for each line, making text easier to read.

Headings & Display Font:

All headings and display fonts should have the style font-weight:bold;