Page tree
Skip to end of metadata
Go to start of metadata
Title[DISCOVERY] Investigate Fluid Typography
GoalFind out if we should implement fluid typography into our Lens Design System
Pivotal storyhttps://www.pivotaltracker.com/story/show/172025964

Summary

Although fluid typography as a concept solves a lot of issues with the wide array of available device screen sizes, the current implementation seems to have a negative impact on accessibility. Some browsers do not support it. Some cases in some browsers, users can not adjust the font size. Using screen width calculations overrides the user's default font size settings etc. After weighing up the pros and cons of fluid typography, I do not recommend that we implement it at this stage. We might be able to look into this again once the accessibility issues have been fixed.

Discovery

We want to look into fluid typography and see the pros and cons so we can decide if we want to implement it. 

Due to the growing number of screen resolutions, website content is required to be implemented responsively so users can access the content in various devices. However, it can be difficult to have smooth responsive typography that will work perfectly with each screen resolution due to the way breakpoints work. As a result, we want to investigate fluid typography, a mathematic formula that can be added into SCSS/ CSS which would allow the content to change sizes according to different screen widths. 

This would allow us to implement a single set of typography settings where otherwise we might have many.

Fluid typography

Fluid Typography is a way to scale font-size according to the width of the viewport. Look at Fluid Typography for more details and sample. There are several more versions which can be found on Simplified Fluid Typography or The State of Fluid Web Typography

Code snippet: 

An example of a fluid typography formula. It calculates the font size accordingly with the view port size. 

Fluid Typo code snippet
body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}


Comparing with Lens implementation: 


Our current implementation is using a typeset, where we set our font size, with breakpoint attributes to control which typeset shows on which breakpoints. 

p {
  font-size: revised-typeset(body-copy, s-regular, font-size);
  line-height: revised-typeset(body-copy, s-regular, line-height);
  margin-bottom: 26px;


  @include breakpoint(large) {
    font-size: revised-typeset(body-copy, l-regular, font-size);
    line-height: revised-typeset(body-copy, l-regular, line-height);
  }

A sample website that has implemented the fluid typography

Fluid typography has been implemented in a variety of sites covering a wide range of topics and industries. The following are the breakpoints and typography settings for the Invision site which is a good example of fluid typography in a production website.

Invision

BreakpointsType of contentFont sizeLine heights
small 320h13244
h22436
h32032
p1628
medium 400-799h1calc(32px + (0 * (100vw – 400px)) / 399)calc(44px + (0 * (100vw – 400px)) / 399)
h2calc(24px + (0 * (100vw – 400px)) / 399)calc(36px + (0 * (100vw – 400px)) / 399)
h3calc(20px + (0 * (100vw – 400px)) / 399)calc(32px + (0 * (100vw – 400px)) / 399)
pcalc(16px + (0 * (100vw – 400px)) / 399)calc(28px + (0 * (100vw – 400px)) / 399)
large 800-1599h1calc(32px + (12 * (100vw – 800px)) / 799)calc(44px + (12 * (100vw – 800px)) / 799)
h2calc(24px + (12 * (100vw – 800px)) / 799)calc(36px + (12 * (100vw – 800px)) / 799)
h3calc(20px + (12 * (100vw – 800px)) / 799)calc(32px + (12 * (100vw – 800px)) / 799)
pcalc(16px + (12 * (100vw – 800px)) / 799)calc(28px + (12 * (100vw – 800px)) / 799)
Extra large 1600 +h15678
h23652
h32436
p1834

If we would like to implement fluid typography, we will need to design a similar set of values including the viewport size and the font sizes of all types of content. Designing a new collection of typography settings across multiple breakpoints and which look good across all content types will require significant design resource.

Pros

  • It allows us to set only maximum and minimum font size for each type of content.
  • It automatically calculates the font size and line height according to the width of the viewport. 

Cons

  • Firefox browser does not support this yet. An alternative solution for this is to add a Linear scaling between 2 font sizes using calc and vw to support it. 

  • Big effect on accessibility: Matej Latin from The State of Fluid Web Typography stated "My problem with all of the fluid web typography techniques is that they all override user’s default font size set in the browser (from my tests, this was only the case with Chrome). And in some cases and in some browsers, the font size can’t be resized by the user because the viewport units are used. This means that none of these solutions is completely compliant from the accessibility point of view." Although, this seems to be seen only on Chrome, but a very large group of our users are using it


Reference: