Better Web Type - Lesson 1 Introduction to typography

设计师和开发都需要了解知识之《版面设计简介》。原文出自: Better Web Type

前言

Perfect typography is more science than an art —– Jan Tschichold(1927出版的《The New Typography》在当时排版界具有革命性影响)
Typography is more art than engineering—though engineering is certainly a part of it —– Robert Bringhurst(排版界”圣经”《The Elements of Typographic Style》作者)

乍一看你可能会觉得奇怪,为什么这么有影响的两个人对排版的定义相矛盾.Tschichold觉得排版更科学,而Bringhurst觉得排版更像是艺术.
这里写图片描述

Tschichold是20世纪20年代初期平面设计革命的一部分.在工业化时代,工程师被当做救世主.工程是任何产品的中心,走在最前端.所有在工业化的那个时代,无论设计师使用什么工具,他们都需要掌握工程机能.所以那个时代对排版的定义就更切合Tschichold的观点.
Bringhurst已经见证了数字化设计的魔力,而这个过程不再需要物理组装.信息化时代的到来,使这个过程不再以小时计算,而是分钟.设计师只需要合适的软件和合适的打印设备即可.而这些软件和设备也不需要这些设计师开发制作.也不再需要工程学了.所有Bringhurst更侧重排版是一门艺术.

Web开发者也需要排版技巧

这里写图片描述

Web typography包括交互设计,UX,动画.. 以下简称灰色香蕉部分~

我相信,当提到web时,大家都会觉得中间排版是正确的.这就是为什么我认为学习排版基础知识对设计和开发同样重要.设计师需要掌握这些技能,他们需要知道如何使用字体,如何设计段落和如何缩放.如何使用网格来排版.截止到目前为止,我和很多设计师都打过交道,他们大多是自学成才,而且从来意识到排版的重要性,或者他们只是学过平面设计,把其当做他们不得不做的类型.所有开发者们,不要指望你的设计师精通排版!

所有的设计都需要转换成代码,因为没有魔法按钮会让我们直接把设计转化成代码.很少有人会同时把设计和coding做的都很棒,因为这需要大量的时间来真正掌握着两套技能.这就意味着再NB的设计师也不一定有能力把他们的设计转换成代码!所有灰色香蕉部分这个重担就落到了开发身上.而开发这方面的技巧也没有,所有尽管他们尽力把设计转换成代码,还是会忽略一些细节.所以此时我们就要意识到灰色香蕉部分的重要性了.
所以设计不仅仅是设计师的设计过程(这句话有点绕口吼~),其他人也应该参与.所以不要设计师画什么开发就写什么,要理解为什么这么设计,不合理的地方是什么.和设计师一起工作,排版, AS A TEAM!
这就是这系列课程的主旨,帮助设计师和开发者在艺术(design)和工程(development)直接找到平衡点.共同来覆盖灰色香蕉部分,开发一个队读者友好的网站.

重要性

Jan Tschichold和Robert Bringhurst对排版的定义可能不同,但是他们对其使用的目的固然是一致的.他们只是用了不同的方法对其进行描述.但其主旨都是: 清晰!
Bringhurst说: 排版必须能让读者切入主题,揭露文章主旨,阐明结构和顺序.

Most people think typography is about fonts. Most designers think typography is about fonts.

Typography is more than that, it’s expressing language through type. Placement, composition, type choice.

—Mark Boulton

排版不仅仅是字体,不止是大小,margin,space,scale.colour.排版是如何将这些信息进行组织,传达给读者.大小,颜色字体这些只是帮助我们更好显式的工具而已.正如我们所见,这些工具必须作为一个整体协同作用,没有什么的独立存在的.所以设计师和开发者都必须做下让步.

Font 还是 Typeface?

在排版公司说Font是会被鄙视的,还会被扣上新手的帽子.font就类似于MP3,比如说我在听《Always On My Mind》这首歌, 我可以说我好喜欢这首歌,但是说我好喜欢这个MP3就有点怪了~
我比较倾向于两个都用,单纯取决于对谁说.对排版不太了解的对Typeface可能也不会太清楚,这个时候我比较倾向于使用font.但是在这个课程中我会安装font本身的意思使用,font就意味着”helvetica.ttf”,typeface就是Helvetica(不同粗细,样式的一窝字体)

扩展阅读

  1. Web design is 95% typography
  2. Font vs Typeface
  3. Jan Tschichold
  4. The Elements of Typographic Style by Robert Bringhurst

原文

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

文章目录
  1. 1. 前言
  2. 2. Web开发者也需要排版技巧
  3. 3. 重要性
  4. 4. Font 还是 Typeface?
  5. 5. 扩展阅读
  6. 6. 原文