What is the proper way to vertically align a text with an ascender (and no descenders) in a button like this? The top buttons are aligned on their x-height (metrical correct). The bottom ones are aligned on the cap height (optical correct).
about 1 year ago
I always align the vertical middle of the text to the vertical middle of the button.
But how do you determine the middle? On the x-height or on the cap height of the text?
The lower example, for sure. Prettier!
Like Herman said... prettier
Second alignment +1
But if there is a descender in the text it would look misaligned again, right? Good question. How does css handle this?
@Pim Coumans Exactly. If the text is dynamic, and "suddenly" contains a descender, the text moves a few pixels up?
I guess? If I had time, I'd make test html page
It's all about the eye ;-)
@Sanne Wijbenga eye pixel perfection)
With this example, aligning by cap height is superior, however as @Pim Coumans rightly said, the moment a decender comes into play - aligning by x-height would be better. CSS and typography still isn't perfect; there's no real baseline controls so this sort of thing is controlled by line-height and margin/padding.
12 months ago
Thanks for your comment @Nathan Monk!
No worries @Roy Abbink
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter