Typography

Typefaces

The Carlisle Syntec® 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:

Display Text


  .display-text {
    padding: 20px 0;
    font-size: 38px;
    font-weight: 400;
    color: #003591;
  }

Heading 1


  h1, .h1 {
    font-size: 22px;
    font-weight: bold;
    color: #003591;
  }

Heading 2


  h2, .h2 {
    font-size: 16px;
    font-weight: bold;
    line-height: 21px;
    color: #003591;
  }

Heading 3


  h3, .h3 {
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    color: #003591;
  }

Heading 4


  h4, .h4 {
    font-size: 13px;
    font-weight: bold;
    line-height: 17px;
    color: #003591;
  }

Heading 5


  h5, .h5 {
    font-size: 13px;
    font-weight: normal;
    line-height: 17px;
    color: #003591;
  }

Heading 6


  h6, .h6 {
    font-size: 13px;
    font-weight: normal;
    line-height: 17px;
    text-transform: uppercase;
    color: #003591;
  }

Body Copy

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

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

<div class="carlislesyntec 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="carlislesyntec 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 class="arial letters">0 1 2 3 4 5 6 7 8 9</p>
</div>

<div class="carlislesyntec 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. 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="carlislesyntec 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="carlislesyntec example">
    <p class="body-copy dark navy-blue 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>

For all headings and display text on dark backgrounds:

Font color should be changed to white
Font-family: Helvetica, Arial and sans-serif for all headings

Lead Paragraph:

An opening paragraph that summarizes page content
Font-size: 18px
Line-height: 24px;
Text color on light background: #464646 or #003591
Text color on dark background: white
Font-family: Helvetica, Arial, sans-serif

Body Copy:

Use when one or more sentences which makes a paragraph.
Font-size: 12px
Line-height: 16px;
Text color on light background: #464646
Text color on dark background: white
Font-family: Helvetica, Arial, sans-serif
Alignment: Type set flush left provides the eye a constant starting point for each line, making text easier to read.