广西快乐双彩中奖号:The last line-height you’ll ever need

January 8th, 2017. Tagged: CSS

One of the trouble areas with CSS (other than it's too hard to master) is that it's too easy to write a lot of it. (I'll just leave it here. Lately we've seen far too much anti-CSS talk, I'm sure most of it is not wrong, but maybe not too productive either.)

Therefore anything you can do to reduce the CSS code you produce is a good thing.

One way to reduce amount of code is to use one and only one line-height declaration.

Gimme

Somewhere in you reset/normalize/whatever just go:

html {
  line-height: 1.6;
}

Refresh, look, agree ("hm, I can read this"), move on.

If you forget the 1.6 value, just search for "golden ratio", copy and paste.

golden ratio

So yeah, technically, you can make it...

line-height: 1.61803398875;

That's actually better for maintenance. Because it looks like someone thought about it. So the next person touching the site will think twice before they overwrite the value.

Relative?

Did you know line-height can be relative to the font-size? In other words no unit of measure necessary (no px, pt, etc). Well, now you do. You're welcome! ??

So the beauty is you go with one line-height for the whole site. It will look as good with that 36px summary ("summary" means "tl;dr" for you kids) as with that 10px pill side-effects disclaimer.

Unless of course you or your designer have a good reason to deviate from this value in one context or another. Which brings me to your question...

Is this really the best?

Well, I don't know enough about design and typography to promise you it is. You can read about golden ratio on Wikipedia for yourself. You can read a more detailed article on typography. There's even a calculator. Because turns out the width of the text and characters per line also have a say.

But all I can say, empirically... It's good enough.

And often good enough is good enough, especially if you don't have a typography person around to consult with.

Proof?

Just check the sites that look like they know what they're doing. Not too scientific, I know, but... good enough.

1. Facebook notes

fb-notes

28 / 17 = 1.647058823529412

2. Medium

medium

33.1833 / 21 = 1.580157142857143

3. 24ways

24ways.org

30 / 20 = 1.5

4. Smashing Magazine

Smashing Magazine

27.9 / 18 = 1.55

5. A list apart

A list apart

30 / 18 = 1.66

Average, rounded, yadda, yadda (these are anecdotal biased picks anyway)...

(1.66 + 1.55 + 1.5 + 1.580157142857143 + 1.647058823529412) / 5 = 1.58744319328 ≈ 1.6

Mic. Drop. ??

Update: Wait, one more

"Reader View" in Desktop Safari. This is Apple, people, I mean didn't they, like, invent design or something? ??

1.61111111... Mind: blown.

Safari reader view

Tell your friends about this post: Facebook, Twitter, Google+

Sorry, comments disabled and hidden due to excessive spam.

Meanwhile, hit me up on twitter @stoyanstefanov


  • 运城市在长三角招商引资149.9亿元 2019-04-08
  • 济南五胞胎雪虎宝宝亮相 四雌一雄萌态十足 2019-04-08
  • 去产能迎年中考 煤炭、钢铁企业债务问题依然存在 2019-04-07
  • 最高检等四部门出台意见 指导依法办理恐怖活动和极端主义犯罪案件 2019-04-07
  • 广州市黄埔区人民法院公告专栏 2019-03-28
  • 这个“海之宁”是个死抱着相对论旧谬误不放,疯狂反对科学新真理的跳梁“小丑”,这个跳梁“小丑”根本就不懂得尊重客观事实及其规律,总是无视、脱离、歪曲客观... 2019-03-22
  • 如何理解孔子这句话?北大教授胡军动情论生死 2019-03-21
  • 海外舆论关注中国最新军备 称赞习近平主席强军号令 2019-03-19
  • 女性之声——全国妇联 2019-03-19
  • 美司法部科米在希拉里邮件门调查中存在过失 2019-03-17
  • “四新”彰显党的十九大思想灵魂和精髓要义 2018-08-17
  • 热身赛-U17女篮73-68立陶宛 杨舒宇19分刘禹彤13分 2018-08-16
  • 七月流火:一半是甜蜜 一半是仁慈 2018-08-15
  • “嫦娥”飞向月球背面,将会揭开哪些秘密? 2018-08-15
  • 一代枭雄身后事:“曹操墓”认定过程缘何一波三折? 2018-08-04
  • 487| 942| 35| 888| 698| 867| 756| 459| 995| 604|