字体设计基础.pdf

qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwe rtyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyu iopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopa sdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfg hjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjkl zxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcv bnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbn mqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmq wertyuiopasdfghjklzxcvbnmrtyuiopasdfghjklzxcvbnmqwertyui opasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfg hjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjkl zxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcv bnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbn mqwertyuiopasdfghjklzxcvbnmrtyuiopasdfghjklzxcvbnmqwert yuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuio pasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasd Type Design Basics 英文字体设计基础 目目 录录 前言 4 字体设计基础 01 视觉均衡 5 字体设计基础 02 术语 7 字体设计基础 03 流线型 9 字体设计基础 04 书法原型 11 字体设计基础 05 字符间距 13 字体设计基础 06 黑与白 16 字体设计基础 07 意大利体 vs 草写体 18 字体设计基础 08 风格的统一 21 字体设计基础 09 可读性 23 字体设计基础 10 比例 25 字体设计基础 11 小型大写 27 字体设计基础 12 花式大写 29 字体设计基础 13 x 高度 31 字体设计基础 14 粗体 33 字体设计基础 15 线稿的数字化 35 字体设计基础 16 复制粘贴 37 字体设计基础 17 形态的平衡 40 字体设计基础 18 字距调整 42 字体设计基础 19 连字 44 字体设计基础 Type Basics by Translatedby Typography and Typeface design research 前言 前言 用 petit 的话来说 这是一份来自 的资料 简明扼要的描 述了西文字体设计的一些基本概念 不管你是不是平面设计师或者是字体设计师 又或者只是路人甲乙丙丁 这些资料都可以让你进入字体所蕴含的数学之美 而 且有许多方法也可以被引用到汉字设计中去 用我的话来说 中文有 5000 年的书法艺术的历史 但是对于现代印刷术的研究 还是要虚心向西方学习 虽然印刷术最早发明于中国 之后才流传到欧洲发扬光 大 现今英文印刷术研究体系已经被发展到一个非常精密和发达的水平 特别是在现 在的全数字化的桌面印刷时代 现在的英文字体的数量已经不知道有几万种 但 中文字体数量可能还不到一千 如果去除重复的 可能还不到 100 我之所以花这么多时间去研究英文字体 是由于我越来越感觉到 中文和英文就 好像阴阳的关系 或者说是一个事物的两面 对英文字体设计的技术了解得越多 你对中文字体设计的理解也越深刻 因为其中包含的道理是一以贯通的 翻译都保留了英汉对照的形式 方便大家学习英文 D 其实和字体设计相关的 英语术语不是很多的 大家跟着教程的节奏学完这个系列 以后遇到类似的字体 英文文章 应该就能基本看懂了 本系列教程首发于 yeeyan 如需转载 请征询译者许可 字体设计基础 字体设计基础 01 视觉均衡 视觉均衡 100 practical Sketches have been made to explain some basic issues in type design during the workshops They get used to point out some problems which raise while creating a new typeface Only some foundations are shown no deep sophisticated details 写在前面 100 实用 这一系列关于字体设计的讨论文章来自 每篇文 章都配有手绘的插图 以阐明字体设计的一些基本事项 指出设计新字体时可能 会遇到的一些问题 这里只讲述一些最基础的东西 未涉及复杂的技术细节 Same size for all To optically align all characters on a line they cannot not have exactly the same mathematical height For example the triangle on this drawing has to be higher than the rectangle If this is not the case the triangle will for sure look smaller than the rectangle While creating a typeface you want all the letters to have the same height 为了让所有字符在视觉上对齐 它们就不能采用同样的物理尺寸 比如说 下图 中的三角形的高度就必须大于矩形 否则 三角形看起来就要比矩形小很多 而 我们在设计字体的时候 往往想给它们定义同样的高度 Also round forms have to exceed the baseline to be optically the same If the circle would have exactly the same mathematical height as the rectangle it would look smaller than the square This doesn t only count for basic forms like triangles circles and squares It s essential in type design because they apply to every single character in a typeface Then it even doesn t matter if you re designing a latin cyrillic or greek font It s a basic principle for any kind of shape 同样的 为了使圆形看起来和矩形同样大小 圆形就必须超出基线 如果圆形和 矩形物理尺寸一样 圆形看上去就会比矩形小 这一规则不仅仅适用于三角形 圆形 方形这样的基本形状 这是字体设计的基本原则 整个字体中的所有字符 都适用这一原则 不管你设计的是拉丁字体 还是斯拉夫或者希腊文字体 这是 所有形体都必须遵循的基本准则 字体设计基础 字体设计基础 02 术语 术语 Type terminology Communication during the design process is much easier when using basic terminology of type Here are a couple important ones which will help to bring the conversation a bit further than yeah that there that little black thing The counter of the e can also be called an eye but there are many more terms If you want to know them all go to the library or browse the web 使用字体的基本术语 会让设计过程中的交流变得非常容易 这里是一些基本的 术语 让你的交流能够更深入 而不是 嗯 那里 那个 那个黑色的小玩意 小写 e 的 字怀 字谷 有时候也被称为是字 眼 如果你还想更全面的了 解其他术语 可以去图书馆 或者是参考下面的网络资源 译注 很遗憾 原 文中链接的一些资源已经无法访问了 但我们可以用 google 找到其他的资源 这些术语很重要 如果你希望阅读西方的第一手的字体设计研究资料 这是必须 跨越的一关 但目前在国内的设计界似乎还没有一个统一的翻译 不少书籍的翻 译都是各行其是 让读者也无所适从 有时间我会找一篇比较完整的来翻译 Google Search typography anatomy Adobe A glossary of typographic terms Typo L Typeface Anatomy by Roy Preston 为了方便大家查看 图片上的文字翻译直接做到图片上了 字体设计基础 字体设计基础 03 流线型 流线型 Fluent shapes Designing type is like driving a car If you drive a car you always take the curve in a natural way If you draw a curve of a character on paper this is exactly the same The curve starts smoothly never out of a sudden While driving a car you don t start turning the wheel when you are already in the beginning of the curve A while before you arrive in the curve you anticipate by leading your car gently in the right direction Think about driving a car when you are sketching type on a paper 流线型 设计字体就好比开车 你在开车的时候 总是会以自然的曲线过弯 当 你在纸面上绘制一条曲线 或一个字符 的时候 也是同样的道理 曲线平缓地 开始 而不是陡然出现 开车时 你不会在到达了弯道口之后才开始打方向盘 而是在你预计即将进入弯道的时候 就开始慢慢的将车引入正确的方向 当你在 纸上画草图的时候 多想想你是怎样开车的 下面有图片 图片上的文字 图片上的文字 标题 动态的曲线 左 怎样才能最快的驶过这条弯道 右 1 几何曲线 右 2 自然曲线 右下 平滑的开始转向 更自然 更快速 字体设计基础 字体设计基础 04 书法原型 书法原型 Calligraphic origin The characters on the top line have a different construction than the characters on the bottom line They have a different calligraphic origin It doesn t matter if a typeface has serifs like Times New Roman or not like Arial It s about the original way they where constructed 图中上下两行字母有着不同的结构 它们来源于不同的书法原型 不管这种字体 是衬线字体 如 Times New Roman 还是无衬线字体 如 Arial 它们的架构都 源于它们的书法原型 The characters in the top line are constructed with a pointed pen calligraphic tool The contrast is caused by changing the pressure on the pen not because of the form of the pen Bodoni is one example of this but also sans serif faces like Helvetica have this origin The thickest part will be mostly totally vertical From this perspective there is no difference between Bodoni and Helvetica They both have the same construction Only the contrast varies 上面一行的字体的书法原型是一种尖头的书法钢笔 其笔画的粗细对比是通过改 变笔压来实现的 而与笔尖本身的形状无关 Bodoni 字体就是一个例子 但是 象 Helvetica 这样的无衬线体也是来源于此 笔画最粗的部分几乎都是垂直的 从这个角度来看 Bodoni 和 Helvetica 是同出一辙的 它们的架构是一致的 只 是笔画的粗细对比有区别 The characters in the bottom line have a origin which is derived from the broad nip The calligraphic pen itself has a thick and a thin part The contrast in the type is made because of the form of the pen not because of the pressure You slant the pen with an angle of 30 degrees on the paper In that way your thickest part of a character will not be on a vertical direction but will be on an angle Also the thinnest part will not be on the most horizontal parts Typefaces like Garamond and Minion have this kind of construction But also sans serif faces like Gill Sans have a construction which is originally derived from the broad nip 下面一行字体来源于一种笔尖扁平的钢笔 这种书法钢笔正面宽而侧面窄 字体 的笔画粗细是由于钢笔本身形状的差异造成的 而不是笔压 你书写的时候笔身 是倾斜的 和纸张形成 30 度的倾角 因此笔画最粗的部分就不是垂直方向的 而是有一定角度的倾斜 同样的 笔画最细的部分也不是位于水平方向上 Garamond 和 Minion 字体就是这种结构 但象 Gill Sans 这样的无衬线字体也 同样是起源于这种笔尖扁平的钢笔 字体设计基础 字体设计基础 05 字符间距 字符间距 注 这是字体设计基础系列文章的第 5 篇 先拣重要的翻译了 有时间再把全系 列的翻完 Spacing Some words about spacing type Much more important than the shapes of the characters is the rhythm of the type A typeface with beautiful characters which are badly spaced is extremely hard to read However if the shapes of the letters are not that good but when they are all perfectly spaced the type will be fairly easy to read Defining the rhythm is more important than defining the shapes 字符间距 这里要说一下字符间距 字符的间距要比它的外形重要得多 这关系到字体的节 奏 一种间距很糟糕的字体 不管外形如何优美 一样难于阅读 相反的 一款 外形稍欠的字体 如果有完美的间距调节 这种字体一样可以易于阅读 因此 定义字体的节奏 要比定义字体的外形更加重要 The white spaces inside and in between letters are defining the rhythm much more than the black shapes of the letters When you manage to create a good rhythm in your line of text your type gets more readable and gives a balanced end result While creating the black shapes you have to take the white spaces into consideration Because the white spaces are more important than the black shapes However white cannot exist without black Changing a white shape inevitable will have an influence on the black shape From that perspective one colour cannot be more important than the other 字体的节奏取决于字符内部和字符之间的白空间 而非字符的黑色形体 如果你 能够为你的文本建立一种很好的节奏 你的字体就更易于阅读 并获得均衡的整 体效果 从开始创建黑色形体的时候起 你就应该同时把白空间的设置考虑在内 当然 白空间和黑空间是相互依存的 白空间的改变也必然的会影响黑空间的形 态 从这个角度来看 我们不能说黑与白哪个更重要 For example there has to be a relation between the space inside an n and the space between the i and the n see drawing In the top row you can see the space inside the n is much much bigger than the space in between the n and the i In the bottom row they are much more equal and in this way you ll get a much better rhythm and more harmony in your line of text 例如 字母 n 内部的白空间 以及 i 与 n 之间的白空间 两者之间必然会存在着 某种关联 见图示 在上面一行中 字母 n 内部的白空间要远大于 i 与 n 之间 的白空间 在下面一行中 两者则要均衡得多 你也因而获得了更好的节奏 整 个文本也更和谐 The same goes for the inner form of the a and the e for example There is a big relation between these two forms If they have optically the same amount of white inside the character counter your type will have a better rhythm as well 同样的 小写 a 和 e 之间的内部空间也存在着这种关联 两个形状之间的关系非 常紧密 这两个字符的内部白空间 counter 中文术语翻译为字怀 字谷 字币 在视觉上应当是等量大小的 这样你的字体才会有更好的节奏 图片文字说明 文字间距基础 上 太紧 下 a 和 e 的内部空间应该是相等的 平衡字符的内空间和外空间 字体设计基础 字体设计基础 06 黑与白 黑与白 注 这是字体设计基础系列文章的第 6 篇 先拣重要的翻译了 有时间再把全系 列的翻完 Black vs white Designing type is nothing more and nothing less than harmonizing black and white shapes Black can t exist without white and white can t exist without black Black the shape of a letter White the space in or in between letters The amount of white inside a character defines the amount of white in between two characters 黑与白 字体的设计 莫过于调整黑白空间的和谐 黑不能离开白而独立存在 白也是一 样 黑 是字符的形体 白 是字符内部和字符之间的白色空间 两个字符之间 白空间的大小 取决于字符内部白空间的大小 As it is impossible to create a very black character with a big white counter form a black typeface will always have smaller counters than a light typeface Hence it follows that there is less space in between the characters see drawing A light typeface has much bigger counters The space in between two letters has to be in proportion As a consequence there is more white space in between light letters than in between black letters 你永远不可能设计出一种笔画极其粗重而同时字怀 counter 字符内部包围的白 空间 又很大的的粗黑体 一个粗黑体 其字怀永远要小于一个细线体 因而粗 黑体的字符间距也一定要小于细线体 如图 细线体的字怀很大 其字符间距 也必须相应的大 所以细线体的字符之间就需要比粗黑体更大的白空间 图片上的文字 注意字符内部和外部的白空间 字体设计基础 字体设计基础 07 意大利体 意大利体 vs 草写体草写体 Italic vs cursive A roman font can be slanted having an angle and a cursive font can be upright totally vertical like a roman Urgh 一个罗马体 roman 通常也被译作 正体 可以是倾斜的 有一定的倾角 而一个草写体可以是竖直的 就好像是一个正体一样 呃 The angle doesn t decide if a character is a roman character or an cursive character This depends on the construction To make it a bit more clear take a look at the four big n s As you would expect the first letter is a roman character But the second one as well Although it s not totally vertical it still has the same construction as the first n This is called a slanted roman The third n looks like an cursive but also this one is not a real cursive Basicly there is no difference between the second and third n only some parts of the serifs have been cut off 倾角并不能决定一个字母是一个 罗马体 还是一个 草写体 关键在于其结 构 要理解这一点 看看下面四个大 n 你想的没错 第一个是一个罗马体 但 第二个同样也是 虽然它并不是完全的竖直 它和第一个 n 拥有同样的结构 这 种情形我们叫做倾斜的罗马体 第三个 n 看起来很象草写体了 但它实际上还不 是一个真正的草写体 总的来说第三个 n 和第二个并没有多大区别 只是衬线的 个别部分被切掉了而已 Compare the first three letters with the last n That s a real cursive The big difference with the previous three is the construction The first three are constructed from separate pen strokes The last n is constructed out of one pen stroke This is the basic difference between roman and cursive fonts Not the angle but the construction 与前面三个 n 相比 最后一个 n 才是真正的草写体 它们之间最大的区别在于结 构 前三个 n 的各个笔画之间都是独立的 最后一个 n 完全是一笔写成的 这就 是罗马体和草写体之间最根本的区别 不在于倾角 而在于结构 Many different explanations can be given for the difference between a cursive and italic from a historical point of view However we consider this as the big difference italic is concerning the function cursive is concerning the construction Almost anything can work as an italic it doesn t even necessarily needs an angle When making a font family with a roman and an italic font the italic font can be constructed in many different ways The third n in the example could probably function perfectly as an italic inside your family But don t forget it s not always a real cursive when it s called italic 如果要从历史的视角来探讨草写体和 意大利体 之间的区别 那就说来话长了 但我们可以从这个角度来考虑 意大利体 关乎功能 而 草写体 关乎结构 几乎任何字体都可以当成一个 意大利体 来使用 甚至根本不需要有什么倾角 当你制作一个包含 罗马体 和 意大利体 的字体家族时 这个 意大利体 可以用各种不同的方式来构建 图例中的第三个 n 也许就是你字体家族中一个完 美的 意大利体 但不要忘了 一个叫做 意大利体 的字体不一定是一个草 写体 译注 这篇翻的比较别扭 roman 一般译作 正体 italic 译作 斜体 严格 来讲都不是准确的翻译 但却已经是约定俗成的翻译了 正确的翻译应该是 罗 马体 和 意大利体 在 Windows 上 对 99 的用户来说 italic 就是斜体的 意思 word 里面甚至为所有字体都提供了一个 斜体 的功能 但实际上 意 大利体 指的是一类字体的统称 并且也并非所有的 意大利体 都是倾斜的 西方拉丁文字系统最早在古罗马帝国形成完整的体系 代表作品就是古罗马的石 刻文字 非常庄严而典雅 而后来意大利人从手写体中发展出了意大利体 随着 印刷术的发展 意大利体一般用来作为正文字体的一种特殊强调样式 用于注释 引文之类的场合 与正文字体相区别 因此许多比较完备的字体家族都提供了一 个叫做 意大利体 的变体 和其正体 罗马体 相比 有些字体中的 意大利 体 的字形完全是经过重新设计的 而不仅仅是倾斜那么简单 要了解更多有关意大利体的信息 可以参看下面这篇文章 字体设计基础 字体设计基础 08 风格的统一 风格的统一 One for all What defines if one character can fit to another character Once you made a decision how to apply this to all the other characters in a font 是什么决定一个字符能否匹配另一个字符 当你确定了一种风格 如何将之推广 应用于字库中的全部字符 Starting point e in the center of the drawing Imagine you sketched this e you like it a lot and now you want to design more characters fitting to this e Where to start Should it be a serif or a sans serif for example 先从这里开始 图中有一个 e 想象你刚画好这个 e 的草图 你很喜欢它 然后你想要设计更多的其他字符来匹配这个 e 该如何开始呢 比如说 它应 该是一个衬线字体还是一个无衬线字体呢 First try i on the left Sans serif The black part is as thick as the black parts of the e Same x height So this should work you think 第一个尝试 左边的 i 无衬线体 它最粗的部分和 e 最粗部分的笔画宽 度相同 同样的 x 高度 它应该能表达你的想法了 Second try i on the right Same thickness the character has the same x height but now it has serifs 第二个尝试 右边的 i 同样的宽度 同样的 x 高度 但这次它有了衬线 The bowl of the e is not only having a certain thickness but the e also has contrast The i on the left has no contrast at all Therefore these two characters don t belong to each other The i on the right however has the same kind of contrast as the e just because it has serifs Just those tiny serifs make sure there are thick and thin parts like the e has This means that the starting point the e already defined that the rest of the font cannot be a sans serif typeface e 的字碗不仅仅有着一定的宽度 同时还有着粗细的对比 左边的 i 完全 没有笔画粗细的对比 因此这两个字符不是完美的一对 而右边的 i 有着和 e 同样的粗细对比 是因为它有了衬线 这细细的衬线让它象 e 那样拥有 了粗细的区别 这就是起点 这个 e 已经决定了这个字体中的其余字符不应 该是一个无衬线字体 Of course every so called rule is there to be broken Mentioning this doesn t mean you can t make a font which has an e combined with an i like the one on the left Everything is possible of course But now you realize better what you are doing also when you don t do it Still get it 当然了 每一条所谓的规则到最后都会有例外 从这个意义来说 你完全可以把 中间的 e 和左边的 i 配一对做一个字体 没有什么是不可能的 但现在你 已经能够更深刻的意识到你为什么这样做 抑或是你为什么不那样做 还能理解 吗 衬线还是无衬线 看上图 你自己决定 字体设计基础 字体设计基础 09 可读性 可读性 Readability The only important aspect of a text typeface is the readability Many decisions can influence the readability Which contrast you create the length of the ascenders and descenders the rhythm the blackness of a type the strength of the curves and the bowls etc 可读性是正文字体的唯一考量指标 你对字体所做的许多决定都会影响可读性 例如采用怎样的粗细对比 上伸部和下伸部的长度 字体的节奏 黑度 曲线和 字碗的力度 等等 Most of those decision apply to all the characters inside a font These have to be defined first For example the contrast The characters on the top line see drawing have a much bigger contrast than the characters on the bottom line The type on the top line will be more suitable for display use the type the bottom the bottom line more for text use Not only because of the difference in contrast but also because the characters on the top line are much more condensed This makes them less legible in small sizes but more eye catching and flexible for headlines Defining the contrast and the width are decisions which count for every single character in a font 大部分的决定会影响到字体中的全部字符 下面这些是应该首先考虑的 比如说 粗细对比 图例中上面一行的字符笔画粗细对比明显要比下面一行的要大得多 上一行的字体更适合做特排字体 而下一行更适合做正文字体 不仅仅是因为它 们粗细对比的差异 还由于上一行的字符的字宽更小 因而在小尺寸下更难以识 别 但是却更能吸引眼球 在制作标题的时候也更具灵活性 所以在定义字体 的粗细对比和宽度的时候 要考虑到字体中的全部字符 But also while designing every single glyph you can create details which improve the readability of a font For example the ear of a g can make sure the reader s eye will follow the horizontal reading direction more fluently The g on the bottom line will work much better in a text typeface for small sizes see drawing 不过 在设计每一个具体字符的时候 你可以通过增加一些细节来提升该字体的 可读性 举例来说 小写字母 g 右上角的字耳会有助于阅读者的视线更平滑的水 平移动 如果用作正文字体 图中下面一行中的 g 在小尺寸下的表现会相当不 错 字体设计基础 字体设计基础 10 比例 比例 Proportions Which x height to define Which descender depth Defining these proportions are essential and very strongly connected to the purpose of the type The proportions within a certain typeface are influencing the way your type will work you can add more space for a certain combination or you can reduce the space A kerning pair can technically be implemented in a digital font file 字距配对 kerning pair 是一种因视觉需要而做的技术处理 简单说 在两个特 定的字符连排的时候 你可以为它们单独指定与众不同的字符间距 这个间距可 以不同于标准间