What is typography?
Generally, typography is defined as the art and technique of arranging letters and text for legibility. Typography in website design refers to the selection of fonts, size, hierarchy, colour, and alignment to ensure optimal legibility across myriad platforms and screen-size combinations.
Queen's WebPublish content management system was designed with typographical best practices in mind, with a standardized typography that adhered to Queen's visual identity guidelines built directly into the theme.
Brand fonts online
WebPublish uses a pre-set application of consistent typography required to maintain the Queen's brand.
Websites created using an alternative platform must adhere to use of only Queen's-approved fonts. No alternative (free or paid) fonts may be used.
Open Sans
Open Sans is the preferred sans serif font for all Queen's websites and is free to use. Open Sans may be used with font-weights ranging from 400-700.
Volkhov
Queen's serif font Volkhov, may be used in limited applications such as headings, sub-headings, and sections titles, etc. To ensure readability, Volkhov may never be used as a body copy website font. Volkhov may only be used with a font-weight of 400.
Gotham ScreenSmart
Queen's sans serif font Gotham ScreenSmart, is a paid font that is not currently available for use across the University. Gotham ScreenSmart has been reserved for the queensu.ca home site and Queen's Gazette.
WebPublish typography
The following outlines a few of the design considerations and decisions that have been implemented for WebPublish.
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 methods of delivery (operating systems, browsers, and versions) through which our layout may be rendered. WebPublish typography has been designed with a digital and mobile-first approach, factoring in how web content re-flows across user devices.
Accessibility
With typography, less is more. Limiting our options – avoiding specialty fonts and variations in colour, contrast, font size, line lengths, and spacing – positively impacts the accessibility of our content for our users.
Following best practices in accessibility, WebPublish typography is defined in a relative unit of measurement called "rems." This is the latest option from CSS3 specifications. This allows our design framework to accommodate user preferences while still aligning with 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 in a user's systems, then a series of pre-defined fall-back fonts are rendered in its place. Internet and server outages are other possible reasons why Queen's primary font might not load.
WebPublish offers a font stack that considers:
- web font options
- system font options
- mobile device font options
- generic font classifications (as a last resort)
Developers of Queen's sites that are not hosted on the WebPublish CMS can access a scss file to get a head start on typography.
Our font stack is as follows:
- Queen's selected typeface: Open Sans
- Fallback #1 (system fonts): Arial
- Fallback #2 (iOS 12, WP8+): Verdana
- Fallback #3 (Android): Roboto
- Generic font classification: Sans-serif