Skip to main content

Something Fishy about UI Hyphen Font Families

Published on .

UI hyphen font families are:

All of them will use the default system font families.

Reference: font-family - CSS: Cascading Style Sheets | MDN

The purpose of them is to allow users to see the font family that they are already familiar. So the font family of the website is the same as the font family of their operating system.

The problem is the users can not change the system font family. There are no options or settings provided by the operating system to change the font family.

Changing the system font families can be a hard thing to do.

I searched about how to change the font family on Windows 10. After I read an article about it, I think the way to change the font family is not user-friendly.

The article that I read — How to Change the Default System Font on Windows 10

I wish there is a setting to change the font family—like on the browser's setting.

If the website uses just serif or sans-serif, the users can change the font family on the browser setting. Also, the users can change the browser's language and then, the website will respond with the appropriate font family.

I am not sure that UI hyphen font families are bad. They work as expected. But, does the ability for the users to change the font matter?

If it matters then serif, sans-serif, and monospace will be better than UI hyphen font families.

If it does not matter then UI hyphen font families will be better.

By the way, you can play with the UI hyphen font families and the browser's default font families by yourself.

A website with the UI hyphen font families

A website with the browser's default font families

I recommend comparing both of them side by side to see the differences.

Resources

Never, ever use system-ui as the value of font-family

CSS Fonts Module Level 4 #generic-font-families