Typography

Description

This typographical heirarchy is based on Ballinger. Ballinger was designed by Max Phillips from Signal Type Foundry which is based in Dublin. It is a san-serif, grotesque font that is said to have a warm and energetic feel due to curves. It was designed for clear communication and optimal readability.

In the case that users do not have Ballinger on their operating system, I created a descending list of font-families as follows: font-family: Ballinger, Arial, Helvetica, sans-serif;. For use in this design system, I established a monospace typeface using Courier in CSS for displaying anything in code.

Type Scale

This typographical scale is based on the Golden Ratio and a Pentatonic Scale.

Display

This is a display header.

style: normal;
font-weight: 600;
font-size: 3.1785em;
color: #000000;
line-height: 1;

H1

This is an H1 Header

style: normal;
font-weight: 600;
font-size: 1.9792em;
color: #000000;
line-height: 1;

H2

This is an H2 Header

style: normal;
font-weight: 600;
font-size: 1.4792em;
color: #000000;
line-height: 1;

H3

This is an H3 Header

style: normal;
font-weight: 600;
font-size: 1.2292em;
color: #000000;
line-height: 1;

H4

This is an H4 Header

style: normal;
font-weight: 600;
font-size: 1.1042em;
color: #000000;
line-height: 1;

This is paragraph text

style: normal;
font-weight: normal;
font-size: 1em;
color: #000000;
line-height: 1;

Link

This is a link (hover for hover-style demo)

style: normal;
font-weight: normal;
font-size: 1em;
color: #22798F;
line-height: 1;
Hover-Style
- style: normal;
- text-decoration: underlined;
- font-weight: normal;
- font-size: 1em;
- color: #5ABFD8;
- line-height: 1;

Emphasis

This is emphasis text

style: normal;
font-weight: 600;
font-size: 1em;
color: #000000;
line-height: 1;

Small

This is small text

style: normal;
font-weight: normal;
font-size: 0.8333em;
color: #000000;
line-height: 1;