Trending designs to inspire you
Work designers are riffing on
Interviews, tutorials, and more
Prompt to flex your design skills
Find your dream design job
An exclusive list for contract work
Get new leads in your inbox every day
Introduce yourself to new clients with Pitch
Learn product design in just 16 weeks...
Learn UI Design Basics and Figma Fundamentals...
Scale Design Systems in 8 weeks...
Land your dream job! You'll have a career support specialist to review your portfolio...
Level up your skills with our interactive courses and workshops…
Portfolio creation made easy
Fresh leads in your inbox every day
Build your team’s pipeline or profile
Find, contact, and hire designers
The #1 job board for creatives
Board for freelance & contract work
Centre Based on X-Height
Looks great for text with ascenders and descenders. Not so good for numbers and all caps, where there's no descenders. Looks good for "Cancel", but bad for "OK".
Centre Based on Cap Height & Baseline
Looks bad for text with ascenders and descenders. Great for numbers and all caps, where there's no descenders. Looks good for "OK", but bad for "Cancel".
Centre Based on Cap Height and Descenders
Very similar to centring on x-height. Great for text with ascenders and descenders. Not so good for numbers and all caps. Depending on the typeface, centring on cap height and descenders can vary a fair bit from x-height centring. Looks alright for "Cancel", but bad for "OK".
In this scenario, we're talking about a movement range of 3 pixels, and these buttons are quite large. Often, the movement range for the three methods can be as little as 1 pixel. Higher PPI screens are going to allow for more accuracy, which means most of us will need to make a firm decision.
My personal preference is usually x-height with initial caps text, and cap height & baseline when you know all the buttons are going to be uppercase.
What about you?