Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Daniel Racowsky
Daniel Racowsky
1,574 Points

Font Size Ratios?

Font sizes; there's a dizzying blur of theories and "best" practices and standards on what might work or look the best.

Assuming the goal is beautiful, useable web design, what proportions do you suggest using for font size hierarchies ranging from H1 to body?

In other words, which font sizes for the body, H4, H3, H2, would play best with a 92px H1?

2 Answers

I've used the golden ratio in the past.

CJ Williams
CJ Williams
34,372 Points

Same here, Thomas. Very useful tool.

Jorge Eduardo Garcia Celorio
Jorge Eduardo Garcia Celorio
10,112 Points

Based on the context of your question, I wouldn't recommend using absolute units for fonts (such as px). It'd be better to use relative units such as ems. An em is approximately 16px. So, let's say, that your h1 is 5.75em (same as 92px), then your h2 would be 5em (80px), your h3 would be 4.25em and so forth. You subtract a fraction from the ems you specified to your h1. That fraction obviously depends on your UX needs. The advantage of using ems is that they directly lead you to a responsive web site!

I hope this comment helps you!

P.S. send us a link on what you're working on, and I'll help you with suggestions!