DEV Community

wonder apps
wonder apps

Posted on

How to Pick Fonts for a Portfolio Website Mockup

Choosing a font sounds trivial until you are staring at thousands of options with no way to try them. This guide walks through a repeatable process with font keyboard so you spend five minutes deciding instead of fifty.

Use the real text, not 'Aa'
Type your actual sentence into the preview inside font keyboard. Fonts behave very differently with real words — your brand name, a long caption, a short heading. Judging from a two-letter sample is how people end up with fonts that look wrong in context.

Give each project its own set
Rather than one giant list, keep small sets inside font keyboard — one for your brand, one for personal notes, one for client work. Small curated sets get reused; giant lists get ignored.

Do not mix too many families
Two families is usually enough, three is the ceiling. When in doubt, pick one strong display font and one neutral body font and let them do their jobs.

Test on the actual post or page
Before publishing, apply the font and look at it in situ — on the real post, in the real app, at the real size. Previews are honest, but nothing beats seeing the finished thing.

A useful rule: if a font makes you work to read it, it is the wrong font for that job — no matter how nice it looks.

None of this takes long once you have the routine down, and font keyboard is what makes it quick on a phone. Pick a font, use it everywhere for a week, and you will notice the difference more than you expect.

Top comments (0)