PT Serif + PT Sans

PT Serif + Barlow

PT Serif + Figtree

PT Serif + Plus Jakarta Sans

Pairing Fonts with PT Serif? 🤔 Here are four fonts from Google with similar x-heights!

1️⃣ PT Sans
2️⃣ Barlow
3️⃣ Figtree
4️⃣ Plus Jakarta Sans

🔎 Want to find more font pairings? Try xheightable.com

#fontpairing #typography #designresources #graphicdesign #branding #uxdesign #fontpairings

xheightable xheightable is a free tool for pairing fonts using their xheights. Choose from over 100 fonts from Google and Adobe and find your perfect match.

🔎 Want to find more font pairings? Try xheightable.com
💡 Which pairing is your favorite? Let us know in the comments! 👇
🔄 Retweet to help fellow designers!

#fontpairing #typography #designresources #graphicdesign #branding #uxdesign #fontpairings

4️⃣ Roboto Slab
Roboto Slab is a slab serif that contrasts well with the slightly more elegant Source Sans.

Source Sans + Merriweather

3️⃣ Merriweather
Merriweather is a contemporary serif. Inspired by FF Meta, it has a slightly larger x-height that pairs well with Source Sans.

Source Sans + IBM Plex Serif

2️⃣ IBM Plex Serif
Designed by IBM for their corporate brand, is another transitional serif, this time with a slightly technical edge.

Source Sans + Source Serif

1️⃣ Source Serif
Part of the Source family, Source Serif is a transitional serif with plenty of character, inspired by Fournier’s fonts from the 18th Century.

Pairing Fonts with Source Sans? 🤔 Here are five fonts from Google with similar x-heights!

🔠 Source Sans is a modern open source font designed by Paul Hunt for Adobe. It is inspired by Gothic sans serifs like Franklin but has a slight humanist edge.

xheightable xheightable is a free tool for pairing fonts using their xheights. Choose from over 100 fonts from Google and Adobe and find your perfect match.

💡 Which pairing is your favorite? Let us know in the comments! 👇
🔎 Want to find more font pairings? Try xheightable.com (Link in bio)
🔄 Retweet to help fellow designers!

#fontpairing #typography #designresources #graphicdesign #branding #uxdesign #fontpairings

Futura + Cardo

4️⃣ Futura + Cardo
Cardo is a modern serif design inspired by old-style typefaces and is available through Google.

Futura + Caslon

3️⃣ Futura + Adobe Caslon
Another old-style serif that is a great match for Futura.

Futura + Neue Kabel

2️⃣ Futura + Neue Kabel
Designed to compete with Futura, Neue Kabel’s quirkier letterforms contrast well with the more geometric Futura.

Futura + EB Garamond

1️⃣ Futura + EB Garamond
Futura has a low x-height so pairs well with older serifs. EB Garamond is a free version of the old-style serif. Widely acclaimed for its quality, it also matches perfectly with Futura.

🧵 Pairing Fonts with Futura?

🔠 Futura is a classic geometric sans serif from the 1920s. Long used in print, it has also become a popular choice for web and UI design. It has a low x-height so pairs well with older typefaces.

Here are five fonts from Google and Adobe with similar x-heights! ⬇️

In case you missed this yesterday 👇

In case you missed this yesterday 👇

💡 Which pairing is your favorite? Let us know in the comments! 👇
🔎 Want to find more font pairings? Try xheightable.com (Link in bio)
🔄 Retweet to help fellow designers!

#fontpairing #typography #designresources #graphicdesign #googlefonts #branding #uxdesign

5️⃣ Inter + Source Sans
Source Sans is another humanist sans serif. Like Fira, it contrasts well with Inter.

4️⃣ Inter + Roboto Slab
Roboto Slab is another slab serif. It is based on another neo-grotesque, Roboto.

3️⃣ Inter + Fira Sans
Fira Sans is a humanist sans serif. Although Inter is a sans serif too, the two styles contrast with each other.

2️⃣ Inter + Faustina
Faustina is a contemporary serif. It has been designed for editorial content.

1️⃣ Inter + Bitter
Bitter is a slab serif. Like Inter, it has been optimised for screens.

🧵 Pairing Fonts with Inter?

🔠 Inter is a modern take on neo-grotesque fonts like Helvetica. It has been optimized for screens and has a high x-height.

Here are five fonts from Google with similar x-heights! ⬇️

✨ Save this for later!
💬 Reply with “🔠” if you want more font pairing tips!
🔗 Tag a designer who needs this!

A screengrab of the xheightable homepage on a desktop screen.

💡 Want to find the perfect font match? Try xheightable—a free tool that helps you pair fonts perfectly by using their x-heights! 🔗 xheightable.com

A diagram showing the letters Aa in the font Inter and Aa in the font Adobe Garamond. Inter has an x-height of 76% and Adobe Garamond has an x-height of 62%

⚠️ Not Ideal: Inter & Garamond
They have a 16% difference in x-height, making them feel unbalanced.

A diagram showing the letters Aa in the font Inter and Aa in the font Roboto Slab. Inter has an x-height of 76% and Roboto Slab has an x-height of 74%

✅ Close Enough: Inter & Roboto Slab
Their x-heights differ by just 2% – still works well!

A diagram showing the letters Aa in the font Inter and Aa in the font Bitter. Both have an x-height for 76%.

✅ Good Pairing: Inter & Bitter
They have the same x-height = great match!

🎯 Why does x-height matter for font pairing?
Fonts with similar x-heights have matching proportions, making them more harmonious together.

A diagram showing an uppercase letter “X” and a lowercase letter “x”. The uppercase letter illustrates the “cap height” and the lowercase letter illustrates the “x-height”.

What is an x-height? 🤔
It’s the height of lowercase letters (like "x") in relation to uppercase letters (like "X"). Example: Inter’s x-height is 76% of its cap height.

🔤 Struggling with font pairing? The secret is in the x-height! Let’s break it down. 🧵👇