Published on <a href="http://ift.tt/2qmrkK8">| Prototyping: From UX to Front End &mdash; Medium</a> Ricardo Magalhães 
It barely matters how many <a href="http://ift.tt/2qS6OV1">books on typography</a> I’ve read and will read: I struggle just as much as anyone else when it comes to finding a good typeface for a particular project. The message, the mood and the context, they all play equal parts in the decision in finding the right typeface for the job.
There is however, an often overlooked aspect that I’d like to make a good case for the next time you’re hunting for the one typeface, and that is to learn how to assess its x-height impact on readability and legibility. Over the years I’ve been learning how to pay more and more importance to it, and here’s why you’ll maybe want to understand it better a bit too.
<h4>What is x-height?</h4>
The x-height is literally what it means: the height of a lowercase x character for a particular typeface, measured from its baseline. This height should be seen as a relative unit for measuring the proportion of the lowercase letters: the height measurement alone, as a unit, doesn’t tell us much.
<img alt="" src="http://ift.tt/2qmGVcF">x-height for the Adelle typeface
<h4>Why does it matter?</h4>
You may have or may have not noticed that x-height varies a lot amongst typefaces (example a couple of paragraphs below). Now consider that you are reading this piece of text in lowercase letters: this paragraph isn’t a street or a highway sign to be read in 0.2 seconds, but a continuous flow of words which were carefully put together on a medium that respects this context. Different contexts or purposes call for different readability and legibility choices, and x-height has a bigger impact on both of these than, perhaps, the choice between going serif or sans-serif.
<h4>So, large or small x-height?</h4>
Here’s the interesting (though often frustrating) bit: you’ll find references among different knowledge sources stating that sometimes, a larger x-height is a better option for a legible piece of text, and others, a smaller one is the best. So where do we stand? The first thing to note is that yes, a larger x-height certainly gives the appearance of having better legibility. But that’s not the entire story!
Let’s look at two popular sans-serif typefaces, Gill Sans and Fira Sans, put together:
<img alt="" src="http://ift.tt/2qS6PZ3">
Pay attention to the middle red line, aligned with Gill Sans’ x-height. Notice how Fira Sans exceeds it? It has a larger x-height, and there are two important aspects to make a note of here:
<ul>
<li>They are both set at the same screen size of 50px;</li>
<li>It just happens that they have the same cap height (that’s the height of the capital, shown as the blue line).</li>
</ul>
At such a big display size, and so few characters being shown and on a single sentence, Fira Sans would arguably win the legibility test. But bigger isn’t always better. Let’s compare these typefaces, still set at the same size but this time on a full paragraph, with their baselines aligned:
<img alt="" src="http://ift.tt/2qmHsLm">Gill Sans on the left, Fira Sans on the right, both set at 25px with 30px line height.
Skipping for now the fact that Fira Sans on the right takes more real-estate space than Gill Sans at the same type size and line height, I invite you to read these two paragraphs and pay attention to the amount of effort you’re doing to recognise the shapes of the letters are you read. It seems, in this case, that a smaller x-height also increases the perceived space / size of the ascenders and descenders. The opposite of this tends to make the lowercase letters less distinguishable from the capitalised ones. This messes up with the overall box-shape of the line form and makes it harder for our eyes to recognise the different shapes. Recognising these shapes is a key part of the process on <a href="http://ift.tt/2qS6NAr">how we read</a>.
If you’ve ever wondered what makes all caps text hard to read, let’s look at word shapes and try to find a clue:
<img alt="" src="http://ift.tt/2qmpjxw">Smaller x-heights (left) make letter shapes with more contrast. Uppercase, not so much…
Naturally, all of this happens too with serifed typefaces:
<img alt="" src="http://ift.tt/2qRWTiq">Adelle and Baskerville both set at the same font size, 50px, have massively different x-heights
Which one would you prefer for larger amounts of text in a paragraph? This is a good example of how a smaller x-height can score higher on the legibility scale. Naturally, font contrast also plays a key role in this example (which is a topic for another article), but bear that in mind for the following example:
<img alt="" src="http://ift.tt/2qmNiwp">Adelle on the left, Baskerville on the right, both set at the same size
It’s a fact that larger x-heights will make text more visible, but always consider what impact the overall shape has on the overall shape of the text. In the example above, Adelle is <a href="http://ift.tt/2qRW0Gy">clearly screaming for more space</a> in her life.
For experimentation’ sake, let’s now readjust Adelle on the left to match Baskerville’s x-height. This means decreasing its point size from 22 to 18px, and giving it a smaller line height to match its now smaller type size. And now let’s compare them again side by side:
<img alt="" src="http://ift.tt/2qmNj3r">Adelle on the left, downsized to match Baskerville’s x-height, with a shorter line height
This now feels much better, but after a whopping downsize of 4 pixels in size. The choice between the two could now be made depending on its medium: typically, <a href="http://ift.tt/2qS5At9">text for the screen benefits from a larger x-height</a>, while paper with its shorter reading distances, can benefit from a lower one. Again, not a hard rule, but something to keep in mind.
<h3>What’s the takeaway from all this?</h3>
Grains of salt. The main takeaway is that you shouldn’t treat typography as a fixed set of rules without considering its context first. A larger x-height might not make your text more legible despite what some literature might say, so don’t follow it by the book. Pay attention to the space the typeface needs to breathe, and adjust type sizes and line height accordingly.
<h4>Choosing typefaces</h4>
If you own a subscription for <a href="http://ift.tt/2qmMkQL">Typekit</a>, you can already search through their typeface collection sorted by different x-heights. Here’s a screenshot of their current filter:
<img alt="" src="http://ift.tt/2qS9WAp">Filtering through a medium x-height on Typekit
Next time you’re choosing a typeface, try to pay attention to x-height and don’t settle for a fixed size until you actually choose the fonts to use, since this will dictate how they look and feel on the screen (or paper). And stop sweating about the sans-serif vs. serif debate, since this is something that doesn’t really impact readability.
And if you’re trying to pair typefaces, another struggle in the typography world, keep in mind that <a href="http://ift.tt/2qmEmqL">mixing typefaces with similar x-heights</a> usually creates a sense of harmony between them.
<blockquote>If you’re interested in well curated news about typography (and coffee), I invite you to subscribe to my <a href="http://ift.tt/2qS3yJi">Coffee Table Typography newsletter</a>. It goes out twice a week, no ads, no selling, just the sheer passion of type delivered from me to you.</blockquote>
Happy typing! ✍️ Any suggestions, <a href="https://twitter.com/magalhini">ping me on Twitter</a> or leave a comment.
<img src="http://ift.tt/2qmA7vE" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2qRLb7w">To choose the right typeface, look at its x-height instead.</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

To choose the right typeface, look at its x-height instead.

Top Stories