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.