Font recommendations for your website

[Mr_shine]

Hi all Bubblers! I am a graphic designer (and a tech enthusiast).

Besides the common ones like Poppin and Barlow, I have some ideas about fonts for your website to make it look good and express its personality:
(From primary headline, secondary headline to body text)

1. Roboto

• Can be used in cunsumer electronics sites like Apple & Sony
• Can be used in business and consumer sites like Ups & Fedex
• 900 for primary headline, 700 for secondary headline, 300 for body text
• 85% line height
  
  

1. DM Sans

• Can be used in tourism & travel sites like Tripadvisor & Expedia
• 700 for primary headline, 500 for secondary headline, 300 for body text
• 80% line height
  
  

1. Monserrant + Roboto Slab

• Can be used in multimedia sites like Dribbble and Spotify
• Monserrant 800 for primary headline, 600 for secondary headline; Roboto Slab regular for body text
• 80% line height
  
  

1. Arvo + Roboto

• Can be used in programming and developer software sites like Mozilla & Opera
• Arvo 700 for primary headline, regular for secondary headline; Roboto 300 for body text
• 80% line height
  
  

1. Rubik + Nunito

• Can be used in arts & entertainment sites like Fandom and Screen Rant
• Rubik 800 for primary headline, 500 for secondary headline; Nunito regular for body text
• 80% line height
  
  

The usages are my mere opinion. Hope these are helpful.

You can comment here for suggestions specifically for your website.
Here’s my profile if you 're intereted

[paramedic404]

Inter is among the most popular interface fonts right now. You might wanna take a look

[Mr_shine]

Agree. I indeed have it here, I just picked 5. Thanks for your suggestion anyway

Extrabold (800) for primary headline, semibold (600) for secondary headline & regular for body text

[adaml]

Hi there, thank for this post, it was really useful to read. I recently launched puktag.com built on Bubble and I wondered if you had any thoughts about my Font? I built it with Barlow but I’m not sure if that is a good fit.

Thank you for your time,
Adam

[zach8]

I am also a graphic designer, and while I commend you for taking the time to share info with the community, I have to disagree and say this tactic of styling fonts based on other apps is a huge faux pas if you follow the basic concepts of graphic design.

You’re designing to give your app a feeling, and make it distinguished. If you base your design on a more popular design, your product will only feel like a smaller, cheaper, and inferior version of the more recognizable entity that you copied your fonts from. Plus, if you’re following a trend for easy recognition from users, then you’re in the same boat with every other person who decided to follow that trend, and your product gets associated with all those other indistinguishable products.

Yes, take influence from what is out there, but never ever try and style your work based on the stylizations of any other product–especially larger entities. I always recommend avoiding trendy fonts. It just leaves your app–or other product–looking like anything from other apps, to menus, and party flyers, custom mylar bags for weed brands, and anything else that might have a trendy font on it. Nothing worse than seeing your styles on something you can’t stand.

There are not supposed to be quick and easy font solutions. Fonts should be chosen with great consideration and care–but it doesn’t take a graphic designer to find a good font, just an informed viewer. If you know what you’re building, and you know who who will use it, then you’ll be able to find great fonts that are not played out.

If you’re gonna take the time to build an app, take the time to find unique fonts for it. Don’t let anyone tell you what fonts to use. And don’t be afraid of buying a font for your app! You’re investing tons of time, and there are now endless options for low-cost fonts. And, if you use a paid font, you will not have to worry about seeing it everywhere, or being associated with low-quality design that uses the same free font you grabbed off font squirrel.

As an aside: velvetyne.fr is an excellent source for stylized fonts

[zach8]

Hey Adam,

Super clean site! Congrats on a good build and getting it out there!!!

Are you asking about your wordmark? Or the fonts across the site? You said you “built it with Barlow” so I’m assuming you mean the “PukTag” wordmark on the top left? It’s great that you were able to do this for yourself.

It’s not flawed in any ways if that’s what you’re asking? It is a little close to the wordmark for Tag Heuer in m eyes, but I’m also a person who has an index of hundreds of logos and wordmarks in my head .

It looks clean, but not distinguished. Wordmarks are usually not built from a font alone, unless the font itself is unique to the brand.

Milton Glaser, and Paul Rand are great places to start if you want to take a look at inspiring wordmarks and get more ideas.

[adaml]

Hi Zach,
Thank you for the kind words. I was asking about the font across the entire site which is currently ‘Barlow’. I would love some recommendations for a more suitable font.

[zach8]

You said you built the site with Barlow, and I saw “I built the font with Barlow”. I am way too far in it.

Barlow is solid for your body, but maybe add a title font to that you get some contrast.

Proxima and Arial are 2 other fonts you might try if you want another sans-serif font. Arial is nice because it also has several weights like Barlow.

If you say more about what you want to achieve by changing the font, I can make better recommendations. I’m wary to just throw fonts at you without understanding what it is that you would like to achieve when the font is changed.