The Designer’s Guide to Font Formats in 2023: TTF, OTF, WOFF, EOT & SVG
EOT, TTF, WOFF, SVG, WOFF2... there are so many choices! Let's brush up on some basics and take a closer look at the different font formats in use on the Web.
There’s no shortage of typefaces to use in your design projects. Endless fonts are available all across the web, and in many cases, each one of them is available in multiple formats. While having a selection of endless fonts to choose from seems like a blessing, nothing can sour a digital design quicker than selecting the wrong font format.
For example, certain font formats can be designed differently and for different purposes, so it’s essential to consider how you’ll use the font before selecting it. Additionally, font formats can vary from one platform to another, which can lead to compatibility issues and unexpected results.
Simply put, it’s essential for designers to research and understand the different font formats and to select the one that best meets the needs of their project.
This guide is designed to help you understand the font formats available in 2023. We’ll go over the various types and talk about the pros and cons of using them across different types of projects. It also touches on a few best practices. Whether you’re a beginner or a seasoned pro, keep reading to find out which font format is perfect for your next project.
Font Formats by Browser Support
Selecting the right font format is often a confusing endeavor. With no less than five major formats still in circulation, it’s not as easy as selecting a font and firing up Figma or Photoshop.
Each font format has its own set of features and benefits, making it important to choose the right format for your project. And while many online design courses shed light on the topic, you can get a great start here, beginning with an overview of each format.
TrueType Font (TTF)
The TrueType format was developed by Apple in the 1980s to compete with Adobe’s PostScript Type 1 format. To ensure its eventual success over Adobe’s format, Apple licensed TrueType fonts to Microsoft for free.
Recognizable by the .ttf extension, TrueType fonts are widely used on both Mac and Windows operating systems. Every font includes display and printer data in a single file, making it good for digital and print projects. Thanks to its wide support across platforms, this font format is great for nearly any kind of design project, from web design to company branding.
OpenType (OTF)
Developed by Microsoft and later Adobe, the OpenType format is the successor to TrueType, built on the same underlying structure. Like TrueType, .otf fonts are cross-platform and bundled with both display and print data in a single file. Likewise, OpenType has wide support across operating systems and platforms.
The OpenType format features an important capability that’s unavailable to TrueType fonts — it supports tens of thousands of glyphs in a single file. With the ability to hold endless variations in weight, style, and even individual glyphs, this font is especially attractive to designers.
Web Open Font Format (WOFF)
WOFF, or Web Open Font Format, is the original format for delivering web fonts, and it’s the recommended format for web design by the Web Fonts Working Group of the World Wide Web Consortium (W3C). Developed in 2009, it’s essentially a wrapper for TrueType and OpenType formats that compresses the fonts, providing faster load times and better compatibility across different web browsers. WOFF fonts can be embedded into web documents, such as HTML and CSS, making them much easier to use on websites than TTF and OTF formats.
WOFF2 is the latest evolution of the original format. It further reduces the size of fonts, making them faster to download and easier to store. This font type comes with a few additional features, such as support for more compression algorithms, more metadata, and more efficient data storage.
Embedded Open Type (EOT)
EOT fonts were designed by Microsoft to be fonts used on the web. It is an attempt to address the copyright shortcomings of TTF and OTF when publishing on the web. EOT uses a Microsoft tool to create a font from existing TTF/OTF fonts. Compression and subsetting make the font files smaller. Subsetting provides some copyright protection, but EOT also uses encryption for further protection. Sounds promising? Yup, but EOT format is only supported by Internet Explorer.
Scalable Vector Graphics font (SVG)
Last on the list of font formats is SVG, which actually isn’t a font format in and of itself. Short for Scalable Vector Graphics, the SVG format is a vector-based graphics format that uses mathematical measurements written in plain text to form 2D images. Developed by the W3C in 1999, SVG was originally designed for the web, although its ability to scale without quality loss has contributed to its widespread adoption in design.
When the SVG format was created, there wasn’t wide support for fonts in browsers. To assist in text rendering on the web, the W3C added a font specification to the SVG specification to pass glyph information from other fonts into the web-ready vector format.
Here’s an interesting fact that could help in your design job search: The raw data in OTF, TTF, and SVG formats are all vector-based. At their core, all three formats are mathematical expressions. For this reason, and SVG’s wide adoption, SVG fonts are popular in certain types of design projects.
Choosing the Right Font Format for the Job
When it comes to selecting the right font format for your project, there are a few things to consider, the first of which is the final deliverables of your design project. Since different formats work better on different platforms, you’ll need to ensure the font you pick is compatible with — and optimized — for the platform your work ends up on.
Print Design Projects
If you’re a graphic designer working on projects that will end up in print, the formats available to you are narrower. Most desktop applications, including the Adobe suite and other popular design tools, only support TrueType and OpenType font formats. While these tools can open SVG fonts, these fonts won’t provide the same level of typographical control as the fonts supported on your system.
The SVG format is a good choice if you need a highly detailed font for a logo. Many typeface designs, designed as lettering sets, only come in SVG format. This type of typography considered a display font, is designed for short snippets of text. While they don’t have the same typographical considerations for use in body or document text, they’re often far more detailed than a typical font.
- Best font formats: TTF and OTF
- Less optimal formats: SVG
- Formats to avoid: N/A
- Incompatible formats: WOFF and EOT
App and Interface Design Projects
Nearly any product designer will tell you that selecting the right font for a digital product is integral to its success. Interface designs, in particular, often have higher legibility requirements than a document or website. Since users potentially read the same text over and over, interfaces require crystal-clear typography.
Given the widespread availability of apps across desktops, mobile devices, and the web, the right font format isn’t always clear. While TrueType and OpenType fonts remain the best and most accessible options if you’re designing apps for the web, the best option changes to WOFF.
- Best font formats: TTF, OTF, and WOFF
- Less optimal formats: N/A
- Formats to avoid: SVG
- Incompatible formats: EOT
Web-Based Design Projects
When it comes to design, no other medium has the variability and technical considerations that the web does. With an expansive range of operating systems, web browsers, internet connections, and screen sizes, choosing the right font format is as difficult as finding good freelance design jobs. In other words, it’s difficult if you don’t have a good resource.
While you don’t need to be a web developer, you do need some technical prowess if you’re designing for the web. For starters, knowing what kind of browsers your audiences use impacts what font format you’ll choose and use during the design process. For modern browsers, WOFF offers the best performance and availability. Older browsers that lack support, on the other hand, may require you to embed an OTF or TTF font. Some designs might require both approaches.
Not quite antiquated and not quite modern, the SVG font format is better left to design-only applications. While some older browsers still support it, most modern implementations have dropped support in favor of WOFF.
In the increasingly rare event that you’re designing a site for users on Internet Explorer, you might use an EOT font. But in cases like these, it’s better to go with a system font for performance reasons.
- Best font formats: WOFF
- Less optimal formats: TTF and OTF
- Formats to avoid: SVG
- Incompatible formats: EOT
Design Projects With Wider Impact
If you’re looking for a way to raise your value and increase your design salary, take some time to understand how typefaces and font choices impact the breadth of design. With the increasing popularity of design systems and business presence across a range of digital and physical mediums, choosing the right font format shouldn’t be an afterthought.
Right now, for wide-ranging compatibility and safety, TTF or OTF is the best choice. But that certainly won’t be the case in every situation, and as you can see from the evolution of fonts over the years, it certainly won’t be that way in the future.
Selecting the Right Font Format: Sans Confusion
The sheer number of available formats and how they’re used can make selecting the right font overwhelming. Taking the time to read guides like this one or finding a design mentor to help augment your knowledge goes a long way. Ultimately, knowing where and how to use each format makes you a much more well-rounded designer.
Products Seen In This Post:
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
Making beautiful design simple & accessible to all.
View More Posts
