Using System UI Fonts for accessibility or not

Design help Layout & Design
1

I’m working on a site that needs to be highly accessible for people during emergencies.

What font should I use?

I like how easy the system ui font is to ready on my new mac (I believe it’s Helvetica), but is this going to look ok for people using an old pc with an outdated OS?

Side-note, is there a section of the forum dedicated to accessibility? Feel free to move me there!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

hi @IslandDesign I do not understand what have system font to do with website accessibility. BTW system font family on new mac is San Francisco.

3

Hey @Stan thanks for the reply.

My thought was that by using the “system-ui” font in webflow, it would be beneficial for accessibility by offering zero payload and increased readability, taking on the users own system preferences.

That might not make sense though.

If that doesn’t work, what is the most accessible font choice in webflow? Or google fonts?

4

Hi @IslandDesign accessibility is huge topic and and is not easy to achieve but if your website has governmental content, full accessibility is mandatory, including optimization for screen reader used by blind people. You can find many articles and books related to this big topic. It can take a few weeks to read, few months to understand and bring it into practice.

If you care only about fonts: adding custom fonts is one of advantages that UX will be identical on any OS on desktop or mobile devices. And again Accessibility aren’t just fonts. As this forum is mainly focused on problems with WF you will be better find more details about your concerns on internet as it is great source of information. Try to use appropriate keywords as eg. “typeface impact on accessibility”.

One example:

5

To read more about this topic - the name is not system ui font but safe fonts.

https://www.w3schools.com/cssref/css_websafe_fonts.asp

https://webaim.org/techniques/fonts/

For accessibility you should use readable font - for example not handwriting font. But, There is not a one and only one best accessibility font.

6

Lots of good info here. Going to start digging in. Thanks!

7

Thanks for your reply.

I started this thread after I saw that “system-ui” was an available font choice in webflow. I’ve never used system fonts for a website before, so it got me curious.

Thanks for the link. Lots to learn here!

2 Likes