On Web Typography 读书笔记

  1. Higher-contrast typefaces tend to be useful in small bursts or headlines, because the extreme variation in stroke width is burdensome in long text. 高对比度文字不适合长文,更适合标题什么的。高对比度指笔画粗细不一,字母间距和字母内部空白不一致。

  2. 多数用作长文阅读的字体拥有 medium 或者 low 对比度。提供了一种稳定的视觉效果。

  3. 太低的对比度也不好。字母可能不容易辨认。降低了可读性。比如 Helvetica。

  4. low x-height 提高了大小写字母之间的对比度。

  5. 当用作文本的时候,high x-height 更加适合。more space for the letterform means more information to help the reader。

  6. x-height 太高也不好。某些字母可能难以辨认。比如 a 和 d,n 和 h。

  7. 大写数字可能太引人瞩目。在文本中,小写数字更加 fit in。

  8. Curly quotes 是正确的用法。Dumb quotes 是不专业的,丑的。

  9. Helvetica 的特点:笔画粗细对比度低,基本上一样粗。较高的 x-height。字母由基本几何图形组成。The aperture, or openings inside of the letters, are nearly closed。笔画末尾是直角。

  10. Helvetica 的适用度:Helvetica 非常的 clear 和 geometric,但是不是在任何情况下都易读的。由于字母的 variation 很小,很容易混淆。不适合小字号或者长文。

  11. Georgia 的特点:笔画粗细对比度适中。It has a generous x-height, counters, and spacing across letters; It has some sharp and pointy angles; It has beefy, almost slab-like serifs.

  12. Georgia 的适用度:间距不紧凑,x-height 高,笔画粗细对比度低,适合长文阅读。

  13. 字体选择分为两大类:type for a moment and type to live with。前者可以夸张,醒目,用作标题什么的,一时的。后者是适用于长文阅读的,要让人忘记字体的存在,可以舒适的阅读。

  14. Futura 用作标题很好,用作小字号的正文就可能不容易辨认。a 和 o 很像,间距太紧,x-height 太小。

  15. 长文阅读的字体不能要有太多的个性。

  16. 长文阅读的字体要求:足够的 x-height;低或者中度对比度;字母要看得清,可区分。

  17. Gill Sans 的1,l,和 大写 i 傻傻分不清。(1lI)

  18. 选择字体前先问问自己,这个网站要表达什么情绪。

  19. 当心免费字体。免费字体常常字库不全。

  20. 写一份自己的常用字体 list

  21. 字体搭配最简单办法就是一个 serif 和一个 sans serif。

  22. 搭配的原则:distinction 和 harmony

  23. 可以尝试用同一款字体的 serif 和 sans serif。

  24. 可以尝试用同一个设计师创造的两种不同字体。有区别又有相似性。

  25. 一行文字比较长的话,行间距要稍微大一些来提高可读性。

  26. line-height 很重要,对于 responsive website 来说。屏幕尺寸改变,行长度改变,行间距也要适当调整。

  27. 比较合适的行间距是 1.2 - 1.8。

  28. 段落之间如果用空白行来区分,空白行大小应该和字体一样或者稍微小一点。

  29. 用作标题的字体为了避免换行,可以选择间距紧凑的字体。比如用sans serif 是个很好的方法。

  30. 对于大字号标题,可以用插件实现在不同尺寸屏幕上的合适换行。

  31. sans serif 很适合做 UI。放到 button 上面。Because they can be set smaller and a little tighter than serifs.

  32. 字体颜色(灰度)比较浅的需要 tighter line-height。

  33. 好的 typography 在于留白。

  34. At least around 1.5 - 2 ems of margin.

  35. 黄金比例来进行网页布局。斐波那契数列。1,1,2,3,5,8,13,21,34,55,89,144,233,377,610,987。。。。。type is 13 px, headings at 34 px. 987 as layout width, with a main column of 610 px and a side bar of 377 px.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,012评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,589评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,819评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,652评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,954评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,381评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,687评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,404评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,082评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,355评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,880评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,249评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,864评论 3 232
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,007评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,760评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,394评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,281评论 2 259

推荐阅读更多精彩内容