Icon Fonts: Mind the Baseline

Written by Tyler Sticka on

Earlier this week, I made my first custom icon font using IcoMoon (implemented with Filament Group’s “bulletproof” technique).

I set my grid sizes and exported, but all the icons felt a little higher than I wanted them to be in relation to their surrounding elements. I did some finagling in CSS, but found the results varied (sometimes wildly) between platforms.

After some fruitless Googling, I trudged through the font’s preferences and found the culprit: A rather diminutive baseline height value. In IcoMoon, this is under Preferences, then Font Metrics.

Here’s a quick example at the default height (6.25%):

Here are the same elements and icons, but with a larger baseline height (18.75%):

Lesson learned: If the icon font’s vertical alignment is off, adjust its baseline height before resorting to CSS tweaks.

The more you know…

Tyler Sticka

Tyler Sticka is Cloud Four’s Lead Designer, allowing him to think about responsive and component-based design almost every day. When he isn’t sketching on sticky notes, experimenting with SVG or nitpicking design details with his coworkers, he enjoys reading comics, making video games and listening to weird music. He tweets as @tylersticka.

Never miss an article!

Get Weekly Digests


Let’s discuss your project! Email Us