1

in a smashing magazine article, I read "According to our study, on average, the ratio between the headline and the body copy is around 2.5" - and this is the formula HEADLINE ÷ BODY COPY = 2.5

Does it mean that if my body copy is 16px, by heading one <h1> should be 40px (16 x 2.5). The only reason I think I am wrong is that in the same article and in all the websites I investigated, the body size is 16px and the heading font is 29px or 30px

On the other hand Tim brown says that we should multiply the body text by the golden ratio and select any of the results to be your heading size, is this the same thing but by using 2.5 instead of 1.618?

Can you please help me understand this

Improve this question
3
  • 2
    It doesn't necessarily mean anything. If your design looks good and it's readable, all of that doesn't matter. It's a study, not a rule.
    – Joonas
    Commented May 21, 2013 at 10:42
  • Joonas thanks. I get that but I just would like to know just whether I understood it or not.
    – aurel
    Commented May 21, 2013 at 10:50
  • 1
    "Tim brown says that we should multiply the body text by the golden ratio" = gag
    – DA01
    Commented May 21, 2013 at 15:44

2 Answers 2

Reset to default
2

It doesn't mean anything. Yes you are correct by way of what a ratio is in your understanding of what they're talking about. The better question is why are they talking about it at all?

In the Smashing Magazine article you can view how they conducted the research and the data. You'll find the sites chosen seem completely arbitrary and are far too small of a sample to have any sort of statistical merit. 50 sites out of millions, and these 50 include rather insignificant ones among them such as lessthan100g.com a site I've never even heard of and appears to have little to no activity on it including a twitter that doesn't even exist.

I would look at the data and ratio for purely entertainment and curiosity purpose then do as Joonas said - what looks good.

Improve this answer
6
  • Thanks Ryan, I am not good with typography, and I am trying to find a "hook" to help me reproduce a pleasing type. But then I took that calculation and applied it to my favourite sites and it did not work. That's why I was hoping that I misunderstood it :) Thanks for your clarification
    – aurel
    Commented May 21, 2013 at 12:49
  • when you say reproduce a pleasing type. You're trying to design a font or you mean layout type on a page?
    – Ryan
    Commented May 21, 2013 at 13:14
  • sorry, layout. just are there a set of rules when laying out typography in a web page desing
    – aurel
    Commented May 21, 2013 at 13:32
  • There's never really a set of rules in design and recommendations are only fleeting as styles and mediums change and progress in HCI/UX/GD pushes new methodology out there. Even in Modern Web design you have to account for corporate people with small monitors (most in my office are on 15"), tablets, mobile phones, retina displays. You basically need to get as many devices as you can for testing or ask friends to look at stuff for you.
    – Ryan
    Commented May 21, 2013 at 14:12
  • And don't be afraid to make up your own rules and try to be progressive instead of like every other site out there. Break the grid.
    – Ryan
    Commented May 21, 2013 at 14:13
1

It should also be noted that setting a global ratio for headline : body assumes that you aren't changing the font and/or weight. Size is only one factor contributing to hierarchy. You can't leave weight, style, color, or design elements out of the equation. The specific sizes should be relative to your chosen typeface(s) and these other factors, but 2.5 times is almost never necessary.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.