How to align different font sizes — horizontally
Courtesy of @bazen.agency
We’re posting this again just as we need to remind ourselves once again of alignment.
The most overlooked thing in designs.
One thing to remember, if you have different sizes of text that you need to align, is to align it to x-height or baseline.
If there is a caps font then align them to baseline or cap-height.
And remember NEVER to align horizontally different font sizes fonts on the central line.
We’re going to cover a lot of aligning as that was the most requested subject. So stay tuned.
If you have any questions or/and ambiguities, feel free to ask us in comments.
Thank you so much for being here and creating this wonderful community!
The general rule for aligning is that you align with the biggest surface available.
You're aligning small type x-height to the big type x-height.
Bonus — 4 tools that may be useful in your designer way:
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.