How do you choose which fonts and font sizes to use in your product website?

Question

Cody Frederick · Accepted Answer

I've spent a lot of time thinking about this myself.

Here's what I've done in the past (for better or worse).

Browse around Google Fonts for hours looking for the perfect font for my brand, and ultimately just deciding on Open Sans or Lato.
Steal a font stack from another site that looks good. There's no shame in this; everything's a remix.
Use a system font stack. This is becoming very common these days. I believe Github, Medium, Wordpress all use this technique. Here's an article about system font stacks. https://css-tricks.com/snippets/css/system-font-stack/

Personally, I would recommend option #3 for the body text of your site. Then, pick a heading font that closely aligns with your brand. Don't use more than two different fonts, and remember that content is king.

Cody Frederick · Answer

You might use the exact same font as your logo. Or, if your app is targeting casual users, then maybe choose rounded fonts. For trying to convey a sense of professionalism, then choose fonts that are more square. Does that help?

Aleix Ramon · Answer

That helps, thank you! :)

Aleix Ramon · Answer

Thanks Cody! Very useful answer. But, how would you "pick a heading font that closely aligns with your brand"? How have you approached this step in the past?

ps "everything is a remix" is probably my favorite sentence ever

Aleix Ramon · Answer

Hey Cody, I've applied some of your tips here: https://checkwise.io/home-2
I've just submitted it to be roasted here in WIP. Thanks again for the advice!

Go to Homepage	`g` `h`
Go to Done Todos	`g` `d`
Go to Questions	`g` `q`
Compose a New Todo	`n`
Go to Search	`/`
Show this dialog	`?`

How do you choose which fonts and font sizes to use in your product website?

Keyboard Shortcuts