I’m going to be re-doing a site for a client (what was previously a business-to-business site will now be business-to-consumer) and I had the comment of “let’s modernize the font a bit”.
I realize there’s a lot that goes into font selection but I’ve always been kinda terrible at font pairing so I’m looking for a starting point. I’m curious what are some favourite “modern-looking” fonts/combos around here (or tools you use to find/pick new fonts).
The site currently has Nunito for headers and Raleway for body. All I know about the new one is that it should be ‘clean’ (I’m actually going to start with @TemplateRepo aptly named project) and just get people to their store as quickly/easily as possible.
I’ve no idea if I’m any good at it, but my preferred body fonts are Raleway, Montserrat, Lato and Open Sans. I find one of those almost always pairs nicely with a header font.
As for the actual pairing choice. I just go with the one that to my eye looks the best. I’ve just signed off this one: https://www.dallingridgebikes.co.uk/ The header was chosen to match their logo and I just felt Raleway worked best with it. Open San felt too roundy, and Montserrat too wide. Raleway (to my eye) has a similar aspect ratio to the header fonts (if that makes sense) so went with it.
In my opinion, “modern” is not always the best criterium for choosing fonts. I think readability in small sizes is the most important factor of them all.
Raleway looks “modern”, but its readability is questionable. For example, you can hardly make a difference between a coma and a period, between a colon and a semi-colon.
Fonts should never be too small - with the growing interest in Accessibility it is widely accepted that fonts should be about 16px (12pt) and have good contrast ratio. There is no exact science to this but if registered with Google Search Console they’ll soon let you know if the fonts are too small.
Typefaces have been called modern since Victorian times and the term is not useful. Trendy is probably what you’re after. If you see a site where you like the font(s) just use your browser web inspector to find the name of the font.
There’s no magic wand. It’s a process that even the most hardened designer takes time over.
It helps to think about your overall site design approach - industrial / whimsical, serious / humorous and so on.
Then if you’d like to complement or contrast the headings and text. Generally this means a sans for headings and serif for text - or vica versa.
Then you’ve got different font weights to consider. Check this site out for a starter using Google font pairings. The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art)
Lastly, don’t use pixels for font sizes - REM every time. Good reasons for this but it will take a whole new post to explain. 🤣
I was just about to post that I dont think she wants ‘modern’ I think she wants something ‘showy’, or trendy as you say.
That’s all great feedback and your link looks like the perfect thing to start with. Thanks!
Then Lobster. Everytime. ;-)
(By the way. In case some don’t spot it, that’s sarcasm. I’d hate anyone to think I’d actually suggest Lobster seriously.)
Lobster 2 would really make it trendy