V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lijinma
V2EX  ›  分享发现

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

  •  
  •   lijinma · 2014-06-01 21:08:35 +08:00 · 5538 次点击
    这是一个创建于 3619 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近在研究“斐波那契数列”,又研究到黄金分割,觉得黄金分割真的很奇妙;

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

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

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

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

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




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


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

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

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

    多谢各位的回复,学习啦。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2929 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:42 · PVG 22:42 · LAX 07:42 · JFK 10:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.