网页中“字体大小”和“行高”的最佳比例

2014-06-01 21:08:35 +08:00
 lijinma
最近在研究“斐波那契数列”,又研究到黄金分割,觉得黄金分割真的很奇妙;

后来思考,在设计网页的时候,黄金分割会有什么的应用?

比如最常见的排版问题,“字体大小”和“行高”成什么样的比例最舒服?

我试了试发现,如果“字体大小”和“行高”的比例为黄金分割的时候,阅读的时候最舒服!

后来,我看了一下简书网站中正文的字体是 18px,行高是 30px,18 / 30 = 0.6,已经很接近黄金分割了,但是如果行高设置29px, 18 / 29 = 0.62,这样子可能更接近黄金分割,可能阅读体验最好,不知道大家同意不?

当然可能 Serif 和 Sans-Serif 感觉不同,同样的字体,Sans-Serif更大一些;




个人觉得设置为29px更舒服,虽然差别不大;


同志们,你们在网页设计或者icon设计中,有使用黄金分割吗?
5543 次点击
所在节点    分享发现
9 条回复
ffffwh
2014-06-01 23:04:10 +08:00
阅读内容的话,默认+可自定义的更好?
lijinma
2014-06-01 23:29:09 +08:00
@ffffwh 自定义选项太多不太好吧?

一般阅读选项有两到三个:

1. 字体大小;
2. Serif - Sans Serif
3. 关灯 开灯;
Marcos
2014-06-01 23:41:55 +08:00
这个还要看字间距以及自重等因素吧,不同字体的字面,字怀,中宫不等,还需要综合考虑,不是所有字体大小,行高配合黄金比例都能出效果的。
lijinma
2014-06-01 23:44:22 +08:00
@Marcos 恩,有道理
paloalto
2014-06-02 07:14:13 +08:00
个人习惯 line-height: 1.78 或者 1.7
不过也不是一概而论,具体情况具体分析。
hzlzh
2014-06-02 10:53:38 +08:00
我做重构稿的时候遇到尺寸不清楚的地方,就 0.618 推倒,比如这占位符站:
http://temp.im/
botao1
2014-06-02 14:00:53 +08:00
我通常会设1.5,然后凭直觉感观修改1、2像素这样
skpoo
2014-06-02 15:54:06 +08:00
http://img.hah.nu/di/HBQB/[2014-06-02]_15-43.png

font: 21px/35px

字体大一点好看
lijinma
2014-06-06 16:00:06 +08:00
@paloalto
@hzlzh
@botao1
@skpoo

多谢各位的回复,学习啦。。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/115321

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX