Unlike graphic and print designs where their final pieces are rasterized, product design on the other hand requires more attention in the technical aspect as it is imperative that the fonts have to be usable - it needs to be seen across browsers and devices.
When the browser or the device does not support the font, it would be replaced by a generic pre-installed font. This can cause the website or application to look off-brand or worse, impact its functionality should the spacings be affected.
Google fonts are generally the go-to resource for designers to find their next font. One would expect that this curated library of fonts would be designer-friendly due to its easy-to-use interface. Moreover, since 2010, the service has steadily grown in both library diversity and scale. However, the library is limited. It does not always fulfill the specific aspects of the typeface we designers have in mind.
To be free to create our own library of fonts, it is now time for us to understand what makes fonts compatible across browsers and devices and how we can find them! But before we begin, let’s kick off with some definitions.
Web fonts VS Web-safe fonts
Web fonts are fonts designed and used for the worldwide web. This covers fonts used in digital designs like websites and applications.
Web-safe fonts or rather ‘safe’ web fonts are pre-installed in most operating systems of devices (e.g. For desktop there are Windows, and Mac OS. For mobile there are android, and iOS. ). We may typically see them as the backup fonts that the page uses when the intended font does not load (for reasons like incompatible fonts *cough *). This term does not refer to fonts that are compatible across browsers and devices! That is a common misconception.
Let’s now get into the ways that we can find compatible fonts and understand how the font is compatible for each way.
How can we find compatible fonts then?
1 Sticking to Web-safe fonts
Web-safe fonts refer to the ones that most operating systems have in common.
Each operating system in every device has its own set of pre-installed fonts. Web-safe fonts refer to the ones that most operating systems have in common. If your website uses Calibri, Mac users may not be able to see it. On the other hand, if Helvetica is used, Windows users may not see it. Arial instead would be seen by all users as it is found in both operating systems.
You can check out a list of web-safe fonts for desktops. The percentage refers to the number of operating system editions under Windows or Mac with that particular font. Meanwhile, this is a list of pre-installed fonts for the operating systems of mobile devices.
In 2021, there are only 6 web-safe fonts across the latest version of macOS and Windows (Arial, Courier New, Georgia, Times New Roman, Trebuchet MS, and Verdana).
Even though the list is limited, it at least covers the various types of fonts such as sans serif, serif, monospace fonts, and more.
How it technically works and some considerations
When opening a webpage or an app, the browser or device respectively would first search for the font specified on the device locally. If the font can’t be found (as a custom font was used), the browser or device would need to download the font file before opening the webpage or app. Without the need to download, it cuts down on the loading time.
2. Custom fonts from online
An abundance of fonts await us online
Compatible fonts can actually be found from anywhere (surprise!) as long as we keep in mind these two aspects:
1. Licenses indicate the font’s functionality. Find the right licenses for your needs.
Perhaps we are looking at font libraries like DaFont that aren’t as neatly curated as Google Fonts and we are not that sure if the font we have in mind would be compatible with our technical requirements.
Check out the licenses as they indicate the functions that the font was designed for. For product design, we should look out for the following types:
- Web font licenses
- Allow the font to be embedded into a website or email;
- Mobile app licenses
- Allow the font to be embedded into phone/tablet apps
- Server licenses
- Allow the font to be embedded into web or cloud-based services and SaaS use cases.
I personally appreciate how Font Squirrel clearly indicates them through icons.
2. Lookout for .ttf file format to ensure smooth rendering
Rendering refers to the process of transforming the font glyphs into pixels in the final product (as a grid is used). It would affect the display quality and accuracy of the font (for eg the weight or thickness of the font). The tricky part is that each browser and device has its own rendering systems.
You could deep dive into the mechanisms, but generally .ttf (TrueType Font file) is compatible with most, or not all rendering systems used by the current web and mobile browsers today. Similarly, this file format is largely used for app development too and so the same can be said across devices.
How it technically works and some considerations
For browsers, when a custom font is used, the font file is first uploaded onto the server and then embedded directly into it. So the mechanism is the same, but the method to do it in CSS differs slightly depending on where the font is sourced from:
An online font service (google fonts, adobe fonts)
This is a site that stores and serves up (you’ll understand what I mean) the fonts for you. It is a simplified form of the process.
It only requires two lines in the CSS to embed even a relatively unknown font such as Bigelow Rules into a browser:
Really simple code in CSS when a font from Google Font is used
Custom fonts - such as from a free font library (such as Font Squirrel, DaFont, and Everything Fonts) or our own fonts
To embed these fonts requires the @font-face CSS rule (which online font services settle for us). But not to worry, as the code can now be easily generated online.
For both methods, these lines of code only need to be specified once in the head of the code for the rest of the website to use it. In short, it really is not that troublesome.
Meanwhile, for mobile apps, the code required to use a custom font in an app would depend on the native code of the operating system (if you’re interested, this is the code for iOS and android). In other words, it is not the same and so I cannot generalize it for this article. However, considering the low complexity of the code required and the documentation available it would be a trivial task for engineers experienced in creating mobile apps.
Conclusion
These are my main takeaways after all the research:
- ‘Web-safe’ fonts do not refer to fonts that are compatible with all browsers and devices. That is a misconception! Instead, it means fonts that have been pre-installed in most operating systems of devices.
- Honestly, numerous fonts would be technically supported across browsers and devices, not just the ones found on Google Font! We just need to double-check if it has a web font, mobile app, or server licenses depending on our needs and ensures that it is in the .ttf file format.
Feel free to find your own fonts for your next project 😉
—
2359 Media is Asia’s leading digital consultancy tech firm with a mission to create a positive impact on the way people live and work through brilliant design and innovation. We are a collective of motley individuals with diverse expertise and passions, underscored by the same values and aspirations of solving problems with groundbreaking technology. We want to transform tomorrow together, impacting the world one innovation at a time.
If you enjoyed this article, check out Design Challenge: Redesigning 2359 Media’s Website
Looking for bespoke digital solutions for your business, or have a great innovative product that you need help building? Connect with us at 2359!
