Typography

What is Typography?

Generally, typography is defined as the art and technique of arranging letters and text for legibility. In web design, this includes the selection of components such as font, size, colour, layout, alignment, etc. WebPublish was designed with typographical best practices in mind. There are many intricacies involved in designing typography well for the web, which is why these components have been built directly into the theme and adjustments to the typography of a single site is discouraged; however, it can be helpful to understand what these factors are.

Not all fonts on the web were made for the web. While some old Serif and Sans Serif typefaces may still be beautifully designed, their intended application was not for the screen. Thus, for digital design, non-traditional fonts or fonts without such a long history are often the best choice.

Some of the factors that address font rendering include:

  • The operating system a viewer is using;&
  • Text rendering engines;
  • File formats;
  • User preferences settings.

WebPublish 3.0 Typography

The following outlines a few of the design considerations and decisions that have been implemented for WebPublish 3.0.

Responsive Design

Responsive design changes the way we look at our web typography. When designing for a multitude of screen sizes, we design in systems and create ways to maintain consistencies across the various ways our layout may be rendered. The WebPublish 3.0 typography was designed to factor in how web content re-flows, taking a digital and mobile-first approach to design.

Accessibility

With typography, less is more. Limited choices, avoiding specialty fonts, colour and contrast, font size variations, line lengths and spacing will all affect how accessible our type is.

To help address best practices in accessibility, the WebPublish 3.0 typography is defined in a relative unit of measurement called "rems", the newest option as part of the CSS3 specifications. This allows our design framework to handle changes in user preferences and still hold together as a reflection of the Queen's brand.

Font Stack

A font stack is an ordered set of fonts that are delivered to the browser for display. If the primary font isn't available, pre-defined fall-back fonts are defined. Due to the nature of the internet, timeouts and server outages are possible reasons why our desired fonts might not load. WebPublish 3.0 offers a well-formed font stack that considers:

  • An ideal web font option
  • System font options
  • Mobile device font options
  • generic font classifications as a last resort

Our font stack is as follows:

  1. Queen's selected Typeface: Open Sans
  2. Fallback #1 (System Fonts): Arial
  3. Fallback #2 (iOS 12, WP8+): Verdana
  4. Fallback #3 (Android): Roboto
  5. Generic Font Classification: Sans-serif