Updates to typography in the WMS

We're pleased to announce that the new McGill fonts will be deployed to the WMS in the coming weeks

What will change

This deployment will affect the body copy and text headers (H2, H3, etc.) in the main content area, blocks, sidebars, and footer. We are rigorously testing this change and expect the impact on most sites to be minor: the proportions of the old  fonts (CartoGothic, Georgia) and the new (McGill Sans and McGill Serif) are similar.

How site admins can prepare

No action should be needed for the majority of site administrators.

Some sites may see headers or body text that overflow an additional line after this change. This will not prevent users from reading or accessing content, but it may be a concern to site managers who have carefully crafted blocks to exactly match in height, particularly where block titles currently span the maximum width of the available lines.

If this is the case for you, we suggest that you proactively review headers in areas of concern on your site. As long as the headers are just one or two characters less than the current maximum on each line, there should be no change in the placement of line breaks.

Behind the scenes

In the images below, you can see how the combined Web Services team tests changes like this.

The initial assessment is done using visual regression testing on a variety of layouts and use cases. With visual regression testing, two versions of the page (one before the change, and one after) are compared to highlight differences between them. You can see an example below showing the current typography (left) and new header typography (right), with a composite image (center) to demonstrate the differences between the two. Note that we're doing this same level of testing for updates to body copy, although those images aren't included below.

font comparison on sample site 1

Based on this initial testing, the Web Services Group and Digital Communications assess the level of risk to the average WMS site - in this case, we felt the risk was low. For low-risk changes, we follow the visual regression testing with a round of QA testing on a mix of typical and high-complexity websites affected by the change. In this case, we placed a particular focus on sites that use blocks and larger headers, since these were the areas most affected by the proposed change.

Below, you can see a comparison sample of a live site (in this case, /Research). In this example, you'll notice greater size differentiation between the H2, H3, and H4 styles in the new version (at left). We feel that this will improve the user experience and add visual interest to sites, and in spite of this change, existing WMS layouts appear unbroken. The main area of difference is the "related content" blocks; depending on how site admins feel about this change, we may reduce the header class from an H2 to a smaller style in a future deployment. 

Comparison of old and new fonts on /research website

Questions?

If you have any questions, concerns, or urgent support requests, please itsupport [at] mcgill.ca (contact the Service Desk). For consultation services, fill out the request form.

Back to top