Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Note

Summary

Although, fluid typography as a concept solves a lot of issues with the uncountable wide array available device screen sizes but , the current implementation seem 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 math overrides the user's default font size settings and etc. After weighting weighing up the pros and cons of fluid typography, I do not recommend us to 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 the Fluid 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 all various devices. However, it can be difficult to have a smooth responsive typography that will work perfectly with reach each screen resolution due to the way breakpoint worksbreakpoints 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. 

...


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

Code Block
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.

...

If we would like to implement the fluid typography, we will need to design the 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.

...

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

Cons

  • Firefox browser do 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

...