1

everyone! We are currently working in a project team on a design system that is primarily used to develop web applications. These web applications mainly consist of forms. One requirement here is that everything must be as compact as possible. The web applications have an extremely high content density.

With the fonts, we have currently solved it in such a way that we have a base font size of 16 px from a viewport of 0–1280 px. If the viewport is larger than 1280px, the base font size is increased to 18px.

The current question is whether we should leave the base font size adjustment from 16 px to 18 px, or whether we should go to 16 px base font size throughout.

There are certainly arguments for both variants.

I would be very happy if you could share your thoughts with me on this.

Thanks in advance!

Warm greetings Sebastian

Improve this question

3 Answers 3

Reset to default
2

Don't increase the font size.

As Slugolicious points out, font size in relation to accessibility has to do with user control and the effect it has on the layout---emphasis on user control.

Why do people choose larger monitors? ...for larger font sizes? No. Rather...for more screen real-estate, to allow more visible elements on the screen at the same time and replace mouse and keyboard actions with a quick glance.

Larger monitors are typically not further away from the user and therefore there's no cognitive advantage to increasing the font size, but instead it reduces the benefit of increased screen real-estate.

One thing to consider is the increased width of blocks of text, and the soltution there is increasing the number of columns at particular width increments.

Improve this answer
1

You tagged this with accessibility so I'll comment on that perspective, specifically with regards to the Web Content Accessibility Guidelines (WCAG).

There aren't any legal requirements to use a certain size font. It's more of a UX decision. There are guidelines that mention font sizes but they don't say that you must use a certain size font.

  • 1.4.3 Contrast (Minimum) - this guideline mentions the font size because the font size affects the minimum contrast allowed. For "normal" size text, the contrast minimum is 4.5:1. But for "large" text, which is defined as 18pt normal weight or 14pt bold, then the contrast minimum can be 3:1. But again, this guideline doesn't require a certain size font. It just qualifies the color contrast based on the font size that you choose to use.

  • 1.4.4 Resize text - this guideline says the user should be able to bump up their font size up to 200% and the page should still function properly and show all the content.

  • 1.4.10 Reflow - this is similar to 1.4.4 but it's more about not requiring the user to scroll in two directions (vertical and horizontal) if the page is at a certain viewport size. This is normally tested by zooming to 400% so it, too, doesn't require a certain font size but the font size might affect this guideline.

  • 1.4.12 Text Spacing - this says that if the user changes some of the font properties (line height, paragraph spacing, letter spacing, word spacing), that the page should still function properly and display all its content (no overlapping text). But again, this guideline doesn't require a certain size font.

So whether you use a smaller font size for smaller viewports and larger fonts for larger viewports is not a WCAG issue. But whatever font size you choose, make sure the above four guidelines can pass with your font size.

Update: One other guideline that sort of mentions font size is a AAA requirement so it's often overlooked since most companies and most accessibility laws only require AA level.

  • 2.5.5 Target Size - this guideline requires interactive/clickable things to be no smaller than 44px x 44px (with some exceptions). That's not really a font requirement but it is sort of related.

When WCAG 2.2 is approved (we're currently using WCAG 2.1), a new AA guideline will be added so it will be required by most laws (if the laws point to the latest version of WCAG).

  • 2.5.8 Target Size (Minimum) - this guideline requires interactive/clickable things to be no smaller than 24px x 24px (with some exceptions).
Improve this answer
1
  • Many thanks for your response! At its core, my question is aimed in particular at the issue of accessibility. I think the points you made are absolutely important.
    – s-lauer
    Dec 13, 2022 at 7:46
1

Let people choose when there is a need for specific workflows or preferences...

From the article "10 Usability Heuristics for User Interface Design" from Nielsen Norman Group, take note of #7: Flexibility and efficiency of use:

...

  • Provide personalization by tailoring content and functionality for individual users.
  • Allow for customization, so users can make selections about how they want the product to work.

source

I've worked on a project where each user had a different workflow and thus needs regarding the use of large data tables. So if this is about large data tables, I can tell from personal experience that it can be a welcome addition to have an option for (and near) each individual table to adjust the font size. Some might want to see more data on their screen and prefer a smaller font size, others might prefer the readability from a slightly larger font size. It depends on the workflow and personal preference so you should check with the users what the preferences are.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.