开发者

css heading tags "standards"?

开发者 https://www.devze.com 2023-03-14 16:22 出处:网络
I\'m looking for a way to standardize my h1, h2, h3, etc tags after I apply a css reset, I know this mostly depends on the design but I remember seeing in a site that there was some sort of \"golden r

I'm looking for a way to standardize my h1, h2, h3, etc tags after I apply a css reset, I know this mostly depends on the design but I remember seeing in a site that there was some sort of "golden ratio" be开发者_运维知识库tween the text size, line-height and margin-bottom that would improve readability and better the way headers looked on the page.

Do any of you know anything like this?


I think this depends a great deal on the font used. That said, Smashing Magazine gives this "rule of thumb":

Heading to Body Font-Size Ratio

To better understand the relationship between heading and body font size, we divided each website’s heading font size by its body font size. We took the average of these ratios and derived a rule of thumb for you to work with:

Heading font size ÷ Body copy font size = 1.96

The overall value, then, is 1.96. This means that when you have chosen a font size for your body copy, you may want to multiply it by 2 to get your heading font size. This, of course, depends on your style; the rule of thumb won’t necessarily give you the optimal size for your particular design. Another option is to use a traditional scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) or the Fibonacci sequence (e.g. 16 – 24 – 40 – 64 – 104) to get natural typographic results.

http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/

0

精彩评论

暂无评论...
验证码 换一张
取 消