Thursday, April 8, 2021

System Fonts: All You Need to Know

System Fonts: All You Need to Know

In this tutorial, we'll be taking a look at system fonts. We'll be going over what exactly system fonts are and what they aren't! We'll be looking at them from a design perspective, discussing the pros and cons of system fonts. We will also be exploring system fonts in popular culture, and we'll touch briefly on the web and technical side of things.

What Is a System Font?

To put it simply, system fonts are the default fonts that came with your device! As they are the fonts which are built into the system, they are often used as the default fonts for many applications. These fonts will often be used in the user interface (UI), as the default text in applications, and even as the fonts you read on the web in some cases. They will also be available to you in the pool of fonts for applications which allow you to change fonts, such as word processors.

Arial System Font
Arial is a system font that has been packaged with Windows since the early 90s.

This pool of fonts, however, is actually quite small. While this can be limiting, there are a number of technical reasons. One of the reasons is that if an operating system had too many fonts, that would be a lot of wasted file size considering users wouldn't use most of them.

One of the biggest impacts system fonts have is their general relevance in popular culture and design. As these are the fonts paired with the operating system, naturally a lot of people are going to see and use them. 

How Do I Install Fonts?

System fonts have a lot of utility when it comes to Mac and Windows. One of the most common questions in regards to system fonts is how to add additional fonts to your operating system. Check out these videos for help with that for Mac and Windows.

How to Install Fonts on a Mac

Working on a Mac, and you're not sure how to install fonts? Check out this free video tutorial for extra help.

How to Install Fonts on Windows

Using a Windows system, and you're not sure how to install fonts? Check out this free video tutorial if you need a visual walkthrough.

System UI Fonts

There is often some confusion about what adding a font does in regards to system UI fonts. Keep in mind that a newly installed font will then have to be used in some way. This could be in a word processor, design program, or just about any program that allows you to switch fonts.

A system font is not necessarily the font used in the UI. Well, of course, technically it is a system font by default as it's one of the fonts that came with the device. Usually, the font that the designers of the operating system have chosen is used in the UI. As you can see below, this capture of an iOS settings page shows the font used in the user interface.

ios UI Font
Settings page from iOS using the San Francisco font for the system UI font

The UI for operating systems often uses a sans-serif system UI font. These fonts are typically not exciting, but they are clean and easy to read. That's essential when you have a large audience using your devices. Making this font a system font is a must as this font will need to be used and accessible the moment you get your device. Imagine getting a device with no fonts! How would you install new fonts if you can't read anything?

So you may be wondering if you can change the system UI font. Well, that depends on the operating system. Apple tends to be pretty restrictive, but it is possible through third-party applications. Android and Windows tend to be less restrictive, but changing them isn't always straightforward. Generally I'd suggest avoiding it unless you really dislike the default system UI fonts.

Should I Design With System Fonts?

There is a lot of discussion out there when it comes to system fonts in the design space. There are both pros and cons to working with them; it all really depends on your perspective.

Pro: Availability

System Fonts Easily Available
System fonts are easily available to everyone and don't require downloads

Designing with system fonts is a relatively common practice, especially for new designers. As the fonts are already installed, it's very easy to pick them up and start working with them. The ease of access makes them a very tempting prospect, especially when you don't want to be bothered with the hassle of finding and installing fonts.

Con: Lack of Variety

System Fonts Variety
System fonts don't tend to take chances and have subtle differences in aesthetic.

This is a big issue! There aren't typically many system fonts that come with your system. Depending on your design needs, there may not be any default fonts which are suitable. Modern desktops come with about 100 fonts, while mobile devices only get a very small selection. This sounds generous, but you usually have a selection of a handful of sans-serif and serif fonts which are suitable for body copy. There are rarely any script or decorative fonts as system fonts seem to focus mostly on utility.

Pro: Great Support for Characters

Helvetica Special Characters for a System Font
Helvetica comes with a large variety of special characters!

Something that is good about system fonts is that they are carefully curated. One of the benefits is that these fonts typically have a large variety of special characters. When you download fonts online, it can be a bit of a mixed bag when it comes to support for extra characters, but when you use a system font, you just know that all your special characters will be supported.

Con: Preconceived Ideas

Comci Sans System Font
Comic Sans is a fun system font but has a mixed reputation!

As common system fonts get a lot of exposure, you will find that people have a lot of opinions on them. The discourse for some of these fonts can get surprisingly heated! Even people outside the design world will pick up on commonly used fonts. Sadly, this can often make your designs seem unprofessional and in some cases even comical. Personally, I think great design can be made with just about any font. However, it's a lot easier to make great designs when you're picking out fonts which really suit your project.

There are some other considerations to think about too, which aren't necessarily positive or negative! Hopefully the negatives haven't convinced you to look into how to delete system fonts!

System Fonts and Licensing

Something interesting to note about system fonts is that they do have a variety of different rules when it comes to their licensing. Just because a font is a system font and comes with your computer doesn't necessarily mean you can do anything you want with it. Generally anything for personal use is fine, but when you start using fonts in a commercial sense, there may be restrictions on their use.

For example, you could happily use system fonts on your school papers, but if you were to use one as part of a logo design, the usage might not be so clear cut. This is especially true if your designs are being used for commercial purposes (as with most design-related things) because licensing for personal and commercial use can be very different. It's always important to read up on the font's usage rights, regardless of whether it is a system font or not.

Looking for alternatives to common system fonts? Check out these font collections for inspiration and downloads:

Web Safe Fonts and System Fonts

System Fonts Web Fonts
Google Fonts are a great example of web fonts in use

System fonts also have an interesting relationship with the web! You may have noticed that looking at websites on different devices results in different fonts. It may be hard to notice at first, but pay close attention to subtle differences in the body text. The reason for this is that websites will often be using the default system fonts.

That's all well and good to know, but it's a scary prospect as a designer to think your designs could be displayed differently on different devices. For example, if you set the font to something that isn't included on another device, that device will just use a common system font by default.

Want to learn more about web fonts? Check out this article for even more info:

There are a couple of ways you can mitigate this by using font families. For example, if you use a sans-serif font family setting in your CSS, this will ensure that at the very least your text will be in the same kind of style.

You can also bypass common system fonts entirely by using web fonts. Web fonts can be installed on your server and used by a client, or you can use someone else's server, such as Google Fonts. Generally, if you don't want to get burned by unexpected fonts popping up on people's devices, using web fonts is the answer! Did you know Envato Elements has a large variety of web safe fonts?

What System Fonts Do I Have?

The system fonts you have will largely depend on the device you're using and the version of the operating system. One of the more fun ways to check out your system fonts is to open up a design program such as Photoshop and simply go through your list of fonts.

What Are Microsoft Windows System Fonts?

System Font Windows
Times New Roman is a system font on Windows, which was also the default for Word.

Windows system fonts are a familiar but often surprisingly divisive set of system fonts. As Windows was so dominant during the 1990s and 2000s, it seems almost everyone knows them.

Times New Roman was the default system font for Microsoft Word. It's an easily readable serif font that looks suitable for the body copy in a newspaper or book. Personally, looking at Times New Roman, I'm instantly reminded of college papers. Interestingly, nowadays Microsoft Word uses Calibri as its default Word font. Sans-serif fonts make for a cleaner look and are more in line with how most modern design looks.

Check out the current list of Windows system fonts.

What Are Apple System Fonts?

System Fonts Mac
Apple uses sophisticated sans-serif fonts in its UI.

Apple has a reputation for being well designed, and many designers swear by their Macs. It comes as no surprise to know that many Apple system fonts are considered to be of good design.

So what are Apple's system fonts? One of the more well-known Mac system fonts Apple is associated with is Helvetica. Helvetica is a really popular sans-serif font and was widely used even before the desktop computer revolution. Nowadays, the default system font for Apple devices is San Francisco, which seems to take a lot of inspiration from Helvetica. Helvetica still comes installed on Macs to this day as one of the Mac system fonts!

iOS also comes with a handful of fonts that are in line with Apple's overall aesthetic. Check out the current list of macOS system fonts.

What Are Android System Fonts?

System Fonts Roboto
Roboto is used in a variety of Google products.

Android system fonts can vary wildly depending on the manufacturer, but typically most Android devices do come with Roboto. It's a sans serif that's easy on the eyes, as you would expect from any solid system font. Other than that, what Android system fonts come with your device is largely dependent on the manufacturer of the device and can vary wildly.

Something that's interesting to note with Android devices is how easy it is to change the default UI font.

Looking for System Font Alternatives?

You may find as a designer that you want to use system fonts but you want to avoid the negatives. In that case, what you could do is find and install fonts which have similar characteristics, but with none of the associated baggage. Luckily for you, Envato Elements comes with a large variety of fonts!

envato elements

With Envato Elements, you get access to thousands of fonts for one low price. They come in a large variety of styles to match your design needs and can act as a replacement for common system fonts.

Here is a sample of some of the stylish fonts that you can download right now. 

1. Daaron (General-Purpose Sans-Serif Font)

Sans Serif Font

Looking for a replacement for body copy for the likes of Arial, Helvetica, and Calibri? Then check out Darron! This modern sans serif font family is a great all-purpose font. It has a nice, inviting, rounded aesthetic, which can help keep your text feeling sophisticated but not too stiff.

2. Addington CF (General-Purpose Serif Font)

Serif System Font Alternative

Check out this graceful font that could work well as body copy text. This could be a great alternative to fonts such as Times New Roman. This font can give a really sophisticated flair to your designs, while still looking fresh and new. Try it out for a book cover or for when you want to earn trust with your audience.

3. Cute Bubble (Fun Sans-Serif Font)

When you need a font that's playful and personal, you can try out this cute bubble font. This is a great replacement for fonts like Comic Sans. The genuine handwritten font is full of personality and works great with any project which needs a cute, readable aesthetic.

4. Standberg (Script Font)

Script Font Alternative To System Font

Or how about something completely different? You don't see many script and decorative fonts in system fonts due to their lack of versatility. However, this script can add a sense of style to your designs which just can't be beaten. Check out Envato Elements for many more script and decorative fonts in styles you just don't see in system fonts!

What Do You Think About System Fonts?

So what do you think about system fonts? As you can see, there is a lot to consider in regards to system fonts, and there is no clear right or wrong answer. Being aware of system fonts and their place in design can help you make informed decisions. Hopefully you have a better understanding of what a system font is.

Looking for some more tutorials related to fonts and design? Then check out these amazing tutorials and articles on Envato Tuts+.


No comments:

Post a Comment