Default, or system fonts, have come on a long way over the years. Gone are the days of only being able to use safe webfonts such as Times New Roman or Arial. Not to say these are bad fonts, they have their moments. But system fonts have got a lot nicer, more visually appealing, and more readable for a wider range of abilities.
The benefits of using system fonts
Using system fonts also means you don’t need to load any additional font files for your website. Depending on what webfont you might be using, the different languages you support in those font files and how many styles you may need, you could be saving a fair amount of weight by removing them in place of system fonts. If ultra-low-carbon design and approach are what you’re trying to achieve to create a more sustainable website, reducing the loading weight is one key aspect. Removing additional fonts can help a great deal in making this happen.
What about design consistency?
The thing about system fonts is that they are designed to be ultra usable, to have a level of design and consistency in all kinds of uses across the different native programs on a computer. So they should be very consistent.
A quick example
The already low weight website for One small step for earth was loading two weights of the font Inter. A very popular font at the time of writing.
Two weights with no italics weighed in at around 40KBs. The entire site load was only 51.52KBs. The site has a simple aesthetic, so it made perfect sense to remove the fonts and make the page even lighter. By removing the use of Inter as the font and using system fonts instead, the website now weighs a tiny 12.33KBs on the initial page load.
The website doesn’t get a huge amount of views, but imagine a website that does? Imagine the data that could be saved; the reduction of energy and time used to display the website. If a website you’re building doesn’t absolutely need a custom webfont, try removing them and see what weight you could save in the process.
If you do need to load webfonts, see our guide on how to load web fonts for the best page load performance or see whether you can reduce the weight of your typography with a variable font in place of loading lots of weights and variants.