Clemson.edu Typography Update

As the new templates age and we approach the end of the content migration process, our team has been listening to feedback and keeping an eye on how the templates are being implemented and performing. With this redesign, our goal has been to take a proactive approach to making incremental changes that address feedback from users and contributors as well as performance. Through this we hope to constantly improve and update the website rather than go through a full-scale redesign every 10-15 years as we have in the past.

As part of our most recent update some of the default sizing for typographic elements such as paragraphs, headings, and lists have been adjusted to reflect a more proportionally consistent sense of scale and spacing between elements. Scale and proportion were also considered in the initial design, but with this update, a mathematical approach to the values was used to bring them into more precise and cohesive proportion.

These changes mainly targeted the basic instances of these type elements and may not reflect in some of the modules, widgets, and menus. We will be taking a look at the performance and functionality of each of the modules and widgets in the near future and more changes to typography would coincide with that update. 

Detailed below are the main changes from the March 8^th update.

Updates to Default Heading and Paragraph Values

The mathematical basis of these changes start with an update to the default paragraph size from 16px to 18px. This change increases the legibility of our more detailed and lengthy copy and takes advantage of the generous amount of space the larger content area these templates allow. From there this 18px value was used with the minor third typescale(x1.2) to generate incrementally larger and smaller values for the rest of the basic web typographic elements. From here resizing to mobile was as simple as taking each level down one size in the scale.

Addition of max-width value to paragraphs

With this update, a max-width value of 800px was added globally to paragraph tags and lists to help curb unintentional instances of copy that run across the entire width of a page. The ideal line length for legibility is within 45-85 characters, and this update will bring copy closer to those values if they were not originally put into appropriately sized columns. This value was also adjusted to accommodate for some edge cases such as when an image element is contained within a paragraph. While these changes will help, please continue to be mindful of column layout choices to maximize use of space and legibility when building pages.

Moving towards a consistent 8px grid for layouts

Moving towards a consistent 8px grid for layouts

As we continue to revisit the UI elements of the new template, we are seeking to adjust specific sizes of elements to adhere to a standardized 8 pixel grid format.  Along with the font size adjustments, the line-heights for the different type elements may have been tweaked to begin moving towards a standard grid layout for Clemson.edu. These changes will add more consistency to sizing and spacing across the site and ease of design and development in the future.

If you’re interested in learning more, here a few good articles that explain further about using grids for UI design.

• https://uxplanet.org/everything-you-should-know-about-8-point-grid-system-in-ux-design-b69cb945b18d
• https://blog.prototypr.io/the-8pt-grid-consistent-spacing-in-ui-design-with-sketch-577e4f0fd520

Updates to Twitter Icon and the Custom Clemson Fonts

This update also adds a few updates and additions to the Clemson custom icon font. The biggest being the change to the twitter icon to reflect their updated brand. For widgets that add icons automatically through the cascade backend such as the contact widgets and modules, you may have to republish the include files themselves for changes to take effect. For instances where the icon was added manually to HTML or in the content modules of the cascade templates like image and icon buttons, the new classes to use are “clemson-icon clemson-twitter-x” instead of “lab la-twitter”.

Font size information