Mar 14, 2023 • DESIGN

Why We Choose To Use System Fonts

In today's digital age, font choice plays an important role in web design. Custom fonts can be used to give a unique look and feel to a website. However, despite the potential benefits of custom fonts, there are good reasons to choose system fonts instead.

System fonts refer to the pre-installed fonts on a user's device. These fonts are available on all devices and operating systems and are designed to be highly legible and easy to read. Here are some reasons why we choose to use system fonts:

1. Consistency across devices

One of the biggest advantages of using system fonts is that they provide a consistent experience across devices. Custom fonts may not render correctly on all devices, resulting in an inconsistent user experience. On the other hand, system fonts are guaranteed to be available on all devices, ensuring that the design remains consistent.

2. Faster page load times

Custom fonts can be large in size and slow to load, which can impact a website's performance. System fonts, on the other hand, are already installed on the user's device, so they load quickly and don't add extra weight to the website.

3. Accessibility

System fonts are designed with accessibility in mind, ensuring that they are highly legible and easy to read. Custom fonts may not be as legible, especially for users with visual impairments or dyslexia. Using system fonts ensures that the website is accessible to all users.

4. Licensing issues

Using custom fonts can also raise licensing issues. Some fonts require a license for commercial use, which can add an extra cost to the website design. System fonts are free to use and don't require any additional licensing.

While custom fonts have advantages, system fonts can provide a consistent, accessible, and performant user experience, eliminating licensing issues. Many well-known websites use system fonts, including Github, Medium, and Booking.com; if they work for them, it's likely to work for you.

Read More

- System Font Stack - CSS Tricks

- System shock - Marcin Wichary

Share this post