Subtitle Appearance Analysis
Part 1: The Font
To my knowledge, the history of subtitling research dates back to 1957, when Simon Laks released his pioneering work Le Sous-titrage de films: Sa technique, son esthétique. Since then, this academic field has seen a huge increase in popularity and acknowledgement as a separate branch of translation studies.
However, one aspect of subtitling remains largely uncharted to this day, and it is subtitle appearance — that is, the way subtitles look. Much research went into finding out how to best spot, segment, condense, translate and position timed text, but when it comes to the visual dimension, there isn’t much up-to-date information available online. That’s why I decided to write this article series: to share some of my findings and, perhaps, stimulate further investigation.
Inspired by the work of Keith Rayner, Tim J. Slattery, Mary C. Dyson, Thomas Sanocki, Tobias Frere-Jones, Kevin Larson, Nick Kolenda and Joe Clark, this first part lays the foundation for the analysis and tackles one of the parameters — the font.
Before I can start talking about subtitle appearance, I need to establish a proper framework. Structure is necessary — otherwise, the countless factors and variables can make the analysis disjointed and confusing. Indeed, there are so many things to consider: the medium, the type of subtitling, the presentation method, the target audience, the display size, and so on. Because I want the framework to be comprehensive, along with the usual it should also include non-traditional approaches to subtitling like integrated titles and VFX, newer forms of media such as video games and virtual reality, outdated and novel technologies, etc.
To achieve that, I came up with this simple categorization of subtitle quality parameters:
So what do we have here?
The way I see it, subtitle quality parameters can be categorized into the following five groups:
The first four groups are unexpanded in the diagram; their only purpose is to show you how it all works in the grand scheme of things. The fifth group, appearance, branches into a hierarchy of parameters.
Okay, now that the categorization is there, I can go on to discuss appearance parameters in an orderly manner. But one question remains: How do we measure quality? In other words, how do we know if one design choice is better than another? Well, these two scales will help us with that:
By definition, readability is the ease with which one can understand a written text. In the case of subtitles it depends on all the five groups of quality parameters that I listed above. Since our focus is appearance, and because the word “ease” is too vague to be practical, I will use this definition:
Readability of an appearance is the degree to which it facilitates reading speed.
So, the faster you can read a sub based on how it looks, the better the score. A simple example showing how this scale works is the font choice. Compare:
The second font reads faster, so it scores higher.
Now, to be actually applicable to real-life situations, the scale needs to be even more specific, so I’ll take it a step further. But first, a little bit of theory. Did you know that when we read, our eyes move through text not smoothly but rather in quick jumps? Something like this:
Yep, imagine that. Also, we can see sharply only within a small area around the point we’re looking at; outside of it everything is blurry — and the further it goes, the blurrier it gets:
So, what our mind does during reading is it stops, takes a snapshot of the text within the sharp area and the blurry area nearby, interprets this information, estimates the best position for the next stop, and then jumps to it. And the cycle continues. For the English language, the jumps (called saccades) usually take around 20–40 ms, and the stops (called fixations) take on average 200–250 ms.
Looking at the scale from this perspective, if one appearance gives fewer/shorter saccades and fixations than another — and thus leads to faster reading — then it has better readability. This approach is specific and easy to use, and it works well across all the appearance parameters.
Subtitles, by their very nature, interfere with the image. Aesthetically, they’re an unwelcome blemish on the screen. The extent of this interference depends largely on how they look, and it is this extent that the second scale measures. Here’s how I define it:
Aesthetics of an appearance is the degree to which it harms the aesthetic value of the image.
So, the more displeasing, intrusive or distracting an appearance is, the lower its score.
Now, beauty is in the eye of the beholder, of course, but some aspects of it are no doubt objective. For instance, I think everyone will agree that, however readable, the following subtitle design would be awful for a black-and-white thriller film:
Huge size, garish colors, obtrusive visual effects and a number of other things will often drop a subtitle’s aesthetics score.
So, these are the two quality scales we’ll be using. Note that their purpose, by design, is to help you compare appearance choices within the context of one project — but not between different projects or project types. You don’t want to be comparing apples with oranges, so the scales don’t offer absolute numerical values for measuring quality; being relative, they only indicate what will work better (or worse) in a specific scenario.
Okay, now let’s use this simple framework to deconstruct the first appearance parameter.
Parameter #1: The Font
The subtitle font you choose can make or break your content. If it reads bad or looks bad — or both — your audience won’t be happy. Most subtitlers, designers and technicians are sensible enough to use something decent, but every now and then you’ll see stuff like this:
This is from the award-winning game Metal Gear Solid 5 released in 2015. Praised by players and critics alike, it was described by some as the greatest stealth game of all time. Its subtitle font, however, is far from great, as you can see above. Hard to read and oddly shaped, it detracted from the gaming experience.
Examples like this abound — you’ll find bad fonts everywhere: in films, games, corporate videos and many other types of audiovisual content. To help you pick a good one, I will first discuss readability and aesthetics in font design, then I will list the things to consider when choosing the font, and after that I’ll offer you a few superb fonts that outperform the commonly used ones.
I. Font readability
Put simply, glyphs are character designs. They make up fonts. Here are nine different a-glyphs:
Glyphs have four measures that influence how quickly you’ll be able to read the text: typicality, distinctiveness, uniformity and contrast potential. Let’s explore them one by one.
Measure #1: Typicality
During a fixation, one of the things your mind does is it scans glyphs’ visual features — the lines, curves, etc. — and tries to figure what characters they correspond to. The more a glyph resembles your mind’s idea of what the character should look like, the faster you’ll recognize it. The extent of this resemblance is called typicality.
For instance, think of the letter A. How do you imagine it? Probably something like “Two slanted lines connected on top plus a horizontal line in-between them”:
Fonts often deviate from this idea. Here’s a progression of A-glyphs from more typical to less typical:
Naturally, fonts with less typical glyphs read slower; they induce more/longer fixations:
As you can imagine, this measure is subjective to an extent. It will differ from person to person depending on where they’re from, what languages they know, what they’re doing for a living, and so on. For example, the style above seems exotic to me, but some literary scholars see it quite often as part of their work.
Another interesting quality of this measure is that it’s flexible. The mind adapts to the font during reading and over time becomes better at identifying its glyphs. So, typicality is not only subjective but also dynamic.
But, regardless, certain design choices inevitably reduce typicality. Which ones? From what I’ve gathered, it’s quirky shapes, distorted proportions, decorative elements and stylizations:
Well, these fonts are quite out there, no one would use them for subtitles, but even small deviations from the norm — e.g. slightly unusual glyph shapes — can affect typicality. Like in this case:
Can you spot which glyph here is atypical? (Hint: it’s in the word “rocket”.)
Measure #2: Distinctiveness
Even if a font’s glyphs are typical, they still can be hard to discern. Consider this example:
This is in Gill Sans, a font widely used in the UK. Its glyphs for I and l have the same shape. Such non-distinct glyphs can lead not only to longer fixations but also to so-called regressions — backward saccades needed for taking another look at ambiguous text parts.
Identical glyphs aside, even moderately similar ones can slow down your reading. This is because we extract letter information not only from the sharp glyphs but also from the blurry ones nearby, and those look much more like each other — especially in such combinations as rn - m, cl - d, S - 5, etc. If they’re distinct enough, your mind will be able to grab the word in one fixation, which saves time:
The same idea applies to short simple words that follow the fixated one:
Now, from what I’ve found in the literature and via my own testing, the following aspects of glyph design reduce distinctiveness:
1. Similar shapes of letterforms:
2. Similar shapes of punctuation marks:
3. Small counters (i.e. spaces within glyphs):
4. Short ascenders and descenders (i.e. elements extending up and down):
5. Small diacritics and i-dots:
6. Single-storey a-glyph:
7. All caps and small caps:
These design features make it harder to go through subtitle text, so it’s best to avoid them.
Measure #3: Uniformity
A font’s glyphs can be typical and distinct, and still lead to effortful reading. Try this:
The glyphs here alternate between four different fonts, and the result reads worse than each one of them on its own, since there’s no uniformity. Why exactly such patchworks are harder to read has yet to be fully understood. What’s known is that they do impede (or even stop) the mind’s font adaptation process mentioned previously.
The kind of mixing that I showed above doesn’t happen in real-life subtitling, of course, but many fonts do have uniformity issues. You’ve already seen one of such issues — ligatures. They make some letters look different in and out of certain combinations:
Another example would be the so-called oldstyle figures (I call them “jumpy numbers”):
Glyphs that differ in style will induce longer fixations in some cases, and that drops readability.
Measure #4: Contrast potential
The previous three measures were equally important for any kind of text. This last one becomes more relevant for text displayed on top of a moving image. Basically, a glyph’s contrast potential determines how well it will stand out against various backgrounds on its own and with a border.
What design features lead to contrast issues? It’s no secret:
1. Thin elements like serifs and narrow strokes (they don’t outline well).
2. Huge counters (small image bits that show through them interfere with your text processing).
To give you an example, this font was used in an official trailer of Shenmue III:
Source: YouTube Channel Deep Silver
Low contrast not only reduces glyph distinctiveness to varied degrees, depending on the image beneath, but also makes it harder to target the next fixation, since the blurry area gives less information. For instance, if you focus on the central letter e in the image above, the words “black” and “night” become near-invisible. As a result, your mind finds it more difficult to determine where to jump next. To avoid such problems, seasoned subtitlers usually opt for semi-bold or even bold sans-serifs.
No matter how readable a font’s glyphs are, if they’re poorly spaced, scanning the text will be difficult:
There are four types of spacing: letter spacing, kerning, word spacing and line spacing. Let’s discuss them.
Type #1: Letter spacing
This type adjusts the visual density of text by increasing or decreasing distances between all glyphs:
Studies have shown that both high and low letter densities harm readability. The former lets you squeeze more glyphs into each snapshot, leading to fewer but longer fixations, while the latter does the opposite. The net result for both cases, however, is more time spent reading the same text.
The optimal letter spacing will depend on the other properties of the font, but it’s really hard to pinpoint. According to a 2016 study by Timothy J. Slattery, Mark Yates and Bernhard Angele, it should be around 35% of the font’s average glyph width for non-audiovisual texts — but for subtitles it might be different due to larger font sizes, the border and the moving background. My tests suggest that smaller values work better, because they help reduce the picture’s interference.
Type #2: Kerning
The second type of spacing is equally important; it adjusts distances between specific pairs of glyphs rather than all of them at once. Take a look at these:
One of them has bad kerning. Can you spot which one?
Proper kerning brings uniformity to letter spacing. Without it, some glyphs get too close and become less distinct, while some get too far and prompt false visual signals as to where words start and end. Your mind has to filter out those, which takes time and leads to slower reading.
As it turns out, this metric is a great litmus test for subtitle fonts. Monospaced ones fail it by default, because they’re designed to have no kerning, and many proportional ones fail it as well. Here’s Georgia, for instance:
The apostrophe touches its neighbor on the left. And here’s Tahoma:
Just like many other fonts, it doesn’t work well with italicized glyphs, so the question mark touches the letter. Then there’s Sylfaen:
You can see that W-e, T-o and W-A are quite far away from each other.
And so on — many fonts have unkerned glyph pairs. Now, in principle, it’d be a good idea to steer clear of them, but the sad reality is that most subtitling tools and media players discard the kerning information embedded in font files. If you use one of those, don’t worry about this spacing type.
Type #3: Word spacing
Distances between words also make a big difference in how quickly one can read the subs. Reduce them to zero, and the text becomes an impenetrable forest of glyphs:
Make them too large, and your fixations won’t be able to grab more than one word at a time:
Since the space character can be kerned and letter-spaced just like any other character, this spacing type is influenced by the previous two. The study I mentioned above concluded that ideally it should be at least 3.5 times larger than the letter spacing (the upper limit wasn’t given) — but, again, for subtitles this value might differ. My tests seem to favor higher ratios.
Type #4: Line spacing
This last type adjusts the distance between two lines of text:
In non-audiovisual texts it does matter, because lengthy lines with tight spacing can sometimes make you botch the jump to the next line, so that you start re-reading the current one. Subtitles don’t have this issue, though, due to relatively small character limits. My tests indicate that outside of extreme values — like lines being very close or very far away — this spacing type doesn’t affect one’s reading speed. Just make sure that ascenders, descenders and other glyph parts don’t tickle each other:
I personally prefer the line spacing to be about 1.5 heights of the x-glyph.
And this is pretty much it for this part of the article. To sum up, if you need a readable font, choose one that has typical, distinct, uniform, high-contrast and properly spaced glyphs. And note that, even though some of my examples were quite extreme, in reality font-to-font differences tend to be subtle, so make sure to pay attention to details and inspect every single glyph you’ll be using (including the italics).
II. Font aesthetics
Sometimes you look at a font and think to yourself, “I don’t like it”. The glyphs and the spacing seem okay, but it just doesn’t feel right, and you’re not sure why.
Well, the devil is in the details, and the details can be quite elusive. You might not know it, but font design is a constant battle against optical illusions. It’s fascinating! Here, check this:
Looks good, right? Now, without sneaking a peak at the image below, try to answer these five questions:
1. Do the letters have the same height?
2. Do the strokes have the same width?
3. Does the O have a perfectly round space inside?
4. Are the diagonal strokes’ sides parallel in the A?
5. Are the distances between the letters equal?
If you answered “yes” to any of these, you’re off the mark:
1. The O and the A are taller than the other letters.
2. The strokes have varied widths.
3. The O’s space is stretched.
4. The sides in the A are not parallel.
5. The distances vary — from ample between the O and the D to negative between the A and the Y.
But the word looked good! How come? Well, turns out mathematical precision doesn’t equal optical balance, because our mind plays tricks on us. One of them makes horizontal lines visually heavier than vertical ones:
Two identical shapes. The one on the right, rotated 90 degrees, seems thicker. To make glyphs look equal, type designers have to shave some weight off horizontals — and diagonals, too.
Then there’s the illusion of size: shapes that get narrow at the top or at the bottom seem shorter. These two, for instance, have the exact same height:
But the eyes disagree. To placate them, font artisans make pointy and roundy glyphs for letters like A, V, O, G and S slightly taller than the rest.
Also, these three bars. Do they have the same length?
Well, yes, but the middle one appears just a tad longer. That’s why E’s top and bottom strokes get extended:
Oh, and the distances between letters... Here’s what you get if you make them equal:
Looks uneven, doesn’t it?
The list of such illusions goes on and on. To achieve visual harmony, font designers have to battle them by fine-tuning each glyph in many ways. These countless micro-adjustments are invisible to the untrained eye, but intuitively you can tell. Well-balanced fonts just feel nice. They make reading pleasant.
The more screen area the subs occupy, the more intrusive they feel. Although the biggest contributor to that is their font size, the font itself can also be a factor. If it’s too heavy, spaced, wide or tall, it will get in the way:
Compare these with the regular design:
Line spacing also plays a role here — make it too large, and your subs will become prominent:
The examples above might look exaggerated, but I’ve seen each one of them in professional subtitling. Huge letter spacing, for instance, was in a Turkish Airlines in-flight advertisement video.
As I said previously, subtitles are an unwelcome blemish on the screen, aesthetically speaking. To minimize their presence and thus honor the authors’ creative vision, people opt for neutral fonts that don’t call undue attention to themselves.
But what if you are the author? Well, then you’re free to choose whatever font you fancy. And people do, sometimes with awful results. Here’s an example from Syberia 3, a mysterious adventure game:
This comic-book text style seems out of place. It doesn’t match the game’s eerie atmosphere.
Fonts are more than mere collections of glyphs. They have personalities. They evoke associations. A font can appear strict or casual, elegant or ugly, modest or flashy. It can feel like it belongs to a specific time and place:
Funky, playful or romantic. Retro, modern or futuristic. There are countless font types, and if a neutral one doesn’t work for you, pick something that fits your content’s mood, theme and overall design.
Now, that said, be careful to avoid fonts that may lead to negative associations. For instance, you might remember the Avatar debacle (click to expand):
They used Papyrus, a tribal-looking font, for the Na’vi dialogue lines. Seems fitting, yet it caused quite a stir. How come? Well, Papyrus had been so overused in graphic design — on T-shirts, mugs, shop signs, etc. — that people started to think of it as “cheap” and “unoriginal”. So, when they saw it in such a high-budget film, mockery ensued.
Another good example is Fraktur:
By the looks of it, Fraktur would be great for integrated titles in a gothic-themed video game. And it would be, if it weren’t for one detail — it’s widely associated with Nazi Germany where it was used for official documents.
Then there are so-called wonton fonts. They’ve been criticized for stereotyping the Asian culture:
And so on. The takeaway is this: before committing to a font, make sure it’s not inappropriate in some way.
This concludes the second part of the article. To sum up, a font with good aesthetics is balanced, aptly styled and not too spread out. Now, you might be surprised that beauty isn’t one of the requirements, but, as I said, it’s in the eye of the beholder. In some very rare cases even such monsters as Karloff Negative could work well. Just remember that readability considerations should always take priority. After all, subtitles exist to be read — not to be marvelled at.
III. Font choice: what to consider
When it comes to choosing the subtitle font, many people habitually pick something tried-and-true, like Arial, Verdana or Helvetica, and call it a day. However, font selection done right is much more nuanced than that — you need to avoid the common pitfalls and decide on the right balance between readability and aesthetics.
Here are the eleven things you should consider to make an educated choice:
What works great for one audiovisual medium can be no good for another, and in this respect video games stand out the most due to their interactive nature.
First, to avoid obscuring player actions and interface elements, games use subtitle font sizes that would be considered too small for film/animation, and your chosen font should perform well at those specific sizes.
Second, games require more concentration: you need to not only scan the image but also input commands and think about what you should do next. Compared to the other media, you often have less time for the subs, so an easy-to-read font might be preferable for certain genres.
Third, games can offer multiple subtitle fonts in the settings. As a game designer, you can add several fonts and let the player decide which one works best for them.
And fourth, game devs have more creative room for using original fonts to facilitate the player’s immersion, which means in some cases sacrificing a bit of readability to greatly improve the aesthetics can be a good idea. Here’s a stylized subtitle font in Kingdom Come: Deliverance (click to expand):
Source: YouTube channel theRadBrad
If your product’s purpose is education or training — e.g. OSHA or e-learning — you need a font that’s as readable as possible, to help people absorb the information. If it’s advertisement or entertainment, the aesthetic part becomes more important, so you might want to choose a font with some charisma.
3. Type of subtitling
This also can be an important factor. For instance, in SDH and CC readability is king — you’ll need a legible font. Karaoke subs can benefit from a vibrant font that fits the music video’s theme, mood and visuals. Integrated titles, especially ones added by the creators, can be unorthodox font-wise and still work great. A good example of that is a video game called What Remains of Edith Finch. Here’s the font it uses when you’re playing as a child:
Source: YouTube channel hodilton
The other game characters have their own fonts — some strict, some old-fashioned, some mysterious. They’re part of the storytelling, and they do a great job at keeping you immersed.
4. Target languages
Where Arial, Helvetica and the other commonly used fonts really shine is language support — they work with a huge number of scripts. However, many fonts that look better and read better don’t offer such compatibility, supporting only one or several languages. If your project is multilingual, you need to keep that in mind when choosing the font, lest you end up with a bunch of boxes for subtitle text (□□□).
5. Presentation rate
When there’s ample time to read each subtitle, the font’s readability becomes less of a concern. So, you can pick an aesthetically pleasing font that fits your audiovisual material better than some boring sans-serif. That’s what Minnesota Opera did in one of their online videos:
Source: YouTube channel Minnesota Opera
A thin serif font. This would be a poor choice for something fast-paced, but in this case, where each subtitle stays for eight or more seconds, it works well with the classical theme.
6. Background color scheme
This also can be one of the deciding factors. For instance, cartoons tend to be bright (e.g. Rick and Morty), and for them you might need something with a good contrast potential. On the other hand, if the image is letterboxed, you can put your subs on the black stripe and get nice contrast at all times for any font.
7. Amount of action/detail
Thin fonts outline poorly. If your content has lots of action or visual detail, the border might sometimes be not enough. In that case it’s best to use a bold font that will help the subs stand out against the image.
8. Screen resolution
Some fonts — particularly those with fine elements — don’t render well on low-res displays. Yes, it’s 2018, you’d expect HD everywhere, but that’s not how it is. Information kiosks, in‑flight entertainment systems, classroom projectors, older TV sets and monitors — they all can be below 720p. For subtitling projects aimed at SD or lower, you need an appropriate font — one with no thin details.
Here’s a serif font on a low-resolution screen (Air Koryo safety video):
Source: YouTube channel Rob Montz
9. Eye strain
Nowadays, with people binge-watching whole shows in a single day and playing video games for hours on end, eye strain can be a strong influencing factor for some projects. If you know that the average viewer/player is likely to spend lots of time consuming your content non-stop, you might want to put more emphasis on readability.
10. Technical limitations
In some situations your font choice might be restricted by a technical aspect. For example, in the Digital Cinema Package, a format used for movie theaters and film festivals, the file size of the subtitle font is limited to 640KB to ensure compatibility with older projectors. So, if the subtitler or technician chooses a font that exceeds this limit — which has actually happened before — they can run into issues.
Another example of such a restriction is image quality in VR/360-degree content. Because the area of a spherical image is much bigger than that of a flat one, you need a higher resolution to achieve the same visual quality. Even at 4K the picture often isn’t sharp, so burned-in subtitles look blurry or jagged:
Source: YouTube channel DN VR
Until technology reaches a point where 8K becomes viable for target audiences, you shouldn’t use detailed/serif fonts for open subs in spherical content.
There are more examples, but the bottom line is this: when selecting the font, you need to be mindful of your project’s technical limitations.
11. Font licensing
Technically speaking, fonts aren’t just text styles — they are bits of software that tell your computer how to draw each character. Due to this, you can’t legally use them without a license, just like any other software. The cost of this license depends on its type, the payment model, the view count and some other things, ranging from zero to millions of dollars, and in many cases it’s better to opt for a free font to save yourself money and headache, even if that means worse readability/aesthetics. Or you can create your own font, like they did with Netflix Sans and BBC Reith!
Okay, now we’re moving to the last part of the article. To recap this one, when choosing the subtitle font, make sure you consider the medium, the content’s purpose, the type of subtitling, the target languages, the subtitle presentation rate, the background color scheme, the amount of on-screen action and detail, the target display resolution, the audience’s eye strain, the possible technical limitations and the licensing.
(Man, that’s a lot to consider!)
IV. Best subtitle fonts
This has already been a long read, so without further ado, here’s the list of the coolest fonts I could find based on the readability and aesthetics criteria I described above:
Best free all-purpose font
Choosing the winner took me quite a while — I had to go through hundreds and hundreds of free fonts. Many people will disagree with my choice, but I think Clear Sans Bold takes the cake in this category:
(The text in the image has all the lowercase glyphs from a to z, some digits, the most-used punctuation marks, the I-l pair at the beginning, plus you can see the spacing. It’s a good way to showcase a subtitle font.)
If Clear Sans doesn’t work for you for some reason, there are many other neat options such as Noto Sans, Open Sans, PT Sans, Nunito Sans, Source Sans Pro, Roboto and Lato. They all have pros and cons, so pick one that suits your project best.
Best premium all-purpose font
Testing these can be tricky, since they’re so expensive. I contacted some type designers and asked them for a demo version, played around in FontShop’s online tool, used SkyFonts to test-drive fonts free of charge and did some other stuff — all to give you this little nugget of information. Now, I couldn’t find a font that I’d consider perfect, so here are the ones I liked the most:
1. Motiva Sans Medium and Bold. If I were to pick my favorite, this would be it. Beautiful!
2. Soleto Bold. Brilliant design and one of the coolest question marks I’ve seen.
3. Bulo Bold. The hyphen could be a bit bigger, but other than that it’s great:
4. Brix Sans Bold. Another awesome specimen. If you like legged l’s, this one’s for you:
Best round-corner font
D Sari Semibold might look a bit odd at first, but it quickly grows on you, and then you can’t get enough of it. It makes reading fun!
Gandhi Sans Bold is magically readable owing to its fine-tuned spacing and extremely distinct glyphs. One of my favorite fonts. And it’s free!
Best language support
If your project involves subtitling into several dozen languages, the Noto font superfamily is the way to go. It’s free, well-designed, and it covers almost every script in the world. Your subs will have a consistent look across the board.
Best font you can’t use
Netflix Sans. Let’s be honest here, it’s pretty rad. However, you can’t use the font — it’s proprietary.
All right, this is it! Thanks for making it all the way to the end! I hope you have learned something new. Next time I will write about font size (done!), which is more complicated than one might think. If you have any thoughts, questions or remarks, please leave a comment below or send me a message. Cheers!