‍

Huuman Academy Lesson: x-height

Devin Shepherd, Huumanize Design Director

‍

‍What is x-height?

X-height is a typography measurement that spans the distance between the lowercase letter's baseline, or bottom, to its imaginary middle line. It’s easiest to see with letters like x, n, o, v, w, and z. These letters give the most accurate idea of type size because they don’t have any ascenders or descenders, the strokes that respectively extend above the x-height and below the baseline, like the letters b, d, g, and p.  

‍

‍

X-height makes typefaces (aka fonts) look different even when they are the same size. It’s why a 12-point lowercase x in Times New Roman actually looks smaller than a 12-point lowercase x in Arial. 

‍

That’s why what seems like a simple font change to a design project can be a big deal, especially if it’s a text-heavy project. Leave a little extra time for a project like that, and be sure to thank your designer. 

‍

Why is it so important?

Marketing is all about getting your message across. When you need to create a sign, poster, or logo, your graphic designer will use a display typeface. Most of these special print fonts have high x-height, which means you’ll be able to read that sign, poster, or logo clearly and from a distance. 

‍

Website designers are also mindful of x-height, especially when creating a cascading style sheet. CSS is concerned with how your website content is presented and separated from its layout, colors, and, you guessed it, fonts. Web fonts exist so your website will look the same in every browser, from Microsoft Edge to Mozilla Firefox to Google Chrome and back again. 

‍

But What About Mobile Design?

We’re so glad you asked. There’s typography for that, too. 

‍

Mobile fonts are eye-friendly, improve UX, and help with accessibility, all things that make users happy. This is also where the two primary typefaces can come into play — serif (with decorative tapers called “feet”) and sans serif (without feet).

‍

San serif is the winner when it comes to mobile app design. It’s simple, clean, and read easily in different sizes to aid in responsive design. Apple uses a font called San Francisco, and Google Android uses one called Roboto. Mobile screens are smaller, so leading (the spaces between lines) and line length (the number of characters per line) also play a part. 

‍

‍

Now you know what x-height is, why it’s important, and a little more about design for print, web, and mobile, are you ready to Huumanize how people see your brand? 

We’re an agency of digital media & design experts who collaborate with businesses of all sizes to perfect their brand presence and optimize their digital kingdoms. Connect with us, and let’s explore how we can help your business grow!

‍