Font Treatment

Typical Page Layout

To help define the font treatment we need to view it in groups on a typical page layout. While we have a lot of pages that have special layouts we will focus on the basics and flesh those out later in the document. The basic page layout follows this order:

Base Setup

Base info:

  • font-size: 14px
  • font-weight: 400 (normal)
  • color: #272c34
  • letter-spacing: initial*
  • line-height: 1.15em
  • text-transform: initial*
  • font-style: normal*

* denotes default value these are not set initially. (We use a reset.css to provide consistency across browsers so these might be defined via the resets).

When we refer to the default or base unit of an attribute it is set to “initial” which is the CSS term to refer to the original or default value. For reduction of code and simplicity if an item uses an initial value we will leave it away.

The above value list (with referred mixins) will be used for each item below.

Font Size

I’m attempting to restrict the font size to just four five six (scorecard). Proxima Nova displays best using even pixel values below the base value.  These will be defined as mixins in .less as such

  • .xsmallFont(): 12px (based from a .largeFont instead of .baseFont)
  • .smallFont(): 12px
  • .baseFont(): 14px
  • .largeFont(): 16px
  • .xLargeFont(): 20px
  • .hugeFont(): 24px
  • megaFont(): 56px

Since the modern web is more dynamic the values will be defined to allow scaling.

following this model the mixins above are defined as such (pxtoem.com):

 

  • .xsmallFont(): 0.714em
  • .smallFont()0.857em
  • .largeFont()1.143em
  • .xLargeFont(): 1.429em
  • .hugeFont()1.714em
  • .megaFont()3.5em

going forward we will only use the mixins to define font sizes if more than four are required we will append them here. DO NOT use html sizes (small. x-small etc.), EMs, PX or other sizes use ONLY the mixins above.

Font Weight

Proxima Nova has a lot of font weights but we only use the following:

.lightFont(): 300 (light)

.baseFontWeight(): 400

.semiBoldFont(): 700 (semi-bold)

.boldFont(): 800 (bold)

.xBoldFont(): 900 (Extra Bold)

going forward we will only use the mixins to define font weights if more than four are required we will append them here. DO NOT use html weights (thin, bold etc.) use ONLY the mixins above.

Color

Colors for the new design follow the high contrast model where navigation text is light on a dark bg and dark on a light bg for data.

Color will be defined in relation to the areas below.

Letter Spacing

letter spacing will follow the default font-determined kerning for base, small and large fonts. For Extra Large there is a negative letter spacing of: -0.025em this is defined with the font size mixin .xLargeFont()

Line Height

line height follows the base number above otherwise it is defined with layout.

Text Transform

The new design uses all caps on text in certain scenarios such as buttons, tertiary menus and some titles. The mixin used is:

.upperCase() for these.

Font Style

Font Style determines when an item is Italic. The new design includes occasions where italics is used.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *