10条能够让你拥有完美字体设计的规则
作者:深圳Clh来源:部落窝教育发布时间:2017-11-20 10:03:23点击:2405
版权说明: 网络作品,转载请注明原作者和出处。
编按:
一个完美的设计需要一个完美的排版,而排版最难的应该是如何用好字体了。本教程详细解析了设计师需要注意到的问题,包括字体形状,字体大小,文字间距还有对齐方式等。
1.为项目设定目标
一个好的排版首先需要你对你的项目在实际中的作用或目标有一个坚实的了解。在你开始浏览谷歌字体或Typekit字体库之前,先记下几个几个问题的答案:
· 你想通过这个项目与谁建立联系?
· 用户在实际使用过程中应该如何处理这个设计?
· 转换点是什么?
· 项目建立的气氛是怎样的?
· 你是否需要与其他设计或品牌进行匹配或协调?
这些问题的答案将帮助你开始构思你要找什么样类型的版式。
2.寻找类似的形状
如何在你的设计中匹配多个字体在视觉上不会给人一种混乱感?其实这就像选择字体的形状一样简单,同时,这对字体组合的产生或打破也是很重要的一个技巧。
那么如何确保你做到了呢?
寻找具有相似形状的字体。想想每一种字体是圆形的还是椭圆形的,厚的还是薄的,有一个短的或高的x高度,或者是倾斜更适合还是不需要任何倾斜。
选择一个你喜欢的主要的或作为整体基础的字体,然后匹配具有相似形状的补充字体,你可以通过以下几点来判断适合的补充字体:
· 看看每个字体类型家族的小写“o”。里面的“碗”是圆的还是椭圆的?匹配“o”类型相同或相似的字体。
· 字体厚或薄的搭配都是可行的。最好是搭配厚或薄的常规字体。
· 寻找在x高度上类似的字体(也就是在垂直高度上的x)。
· 不要害怕混合搭配不同类型的风格。尝试一个serif和sans serif组合,只要确保在复杂字体的旁边搭配一个简单的字体即可。使用最广泛的简单类型,如正文。
· 注意倾斜和斜体(你可以把“o”的中心看作一个测试的标准),不要使用超过一种倾斜的字体,避免字体的反方向“冲突”,它们对用户来说可能是难以接受的。
3.设置字体的比例和大小
字体的大小可以决定一个项目的成败。如果文本太大,它会导致不自然的阅读模式,产生太多的停顿。如果文本太小,它会使眼睛紧张,导致用户最终放弃而选择离开。
当文本的样式正确时,用户可以更容易和自由地阅读和了解文字的内容。
大小适中的文本在项目中也有不同大小的比例。主体文本是一个大小,标题是另一个大小,而子标题则是另一个大小。所有的尺寸和使用在整个设计过程中都应该是一致的。
在这个技巧上,它对用户的作用是让一切都更容易阅读。
· 文本大小按重要性排列信息。更大的类型更重要,更有可能被大多数用户浏览。
· 比例增加了文本的可扫描性,这样用户就可以快速地查看它。
· 相关项目外观相同。
· 更大的文本元素,如子标题,有助于分解长文本块,使其更易于阅读。
4.注意间距
这个问题就不再是字体本身,而是在类型间距的问题了。
字距调整,引导,跟踪和填充可以使你的字体类型更漂亮,但是,也可能把它变成得混乱。
关于保持正确的间隔,这是一个创建“艺术”的过程。很多都取决于实际的字母组合使用,大小和字体。没有任何已经限定或规范的字距调整规则,而且对于文本和其他元素没有完美的填充量。
你得盯着它看。
在这方面,更多的是依靠你的感觉。如果设计以一种你不能精确定位的方式感到“压抑”的话,很大原因归咎于间距问题。它需要不断的练习才能把它做好。
5.左对齐
在英语和其他语言中,用户的阅读习惯是从左到右的,这也是在文本块中优化可读性的理想对齐方式。
小文本(如菜单栏的文本元素或Banner图的主标题)不需要对齐到左边,因为他们很快就可以阅读。对于有大量字符的文本(不仅仅是一个句子),应该采取的最适合的对齐方式就是左对齐的(理由目前还有争议,尽管如果你不小心的话,它可能会引起一些间隔问题)。
6.选择两种字体类型的家族
这个规则很可能已经深深的植根于你的意识中了:只需要两种字体就可以完成一个项目。
这里再次提一下这个观点,因为很少有设计师真正关注这个规则。浏览网站设计或一个作品集网站时,你会很经常看到很多“暴走的字体”的项目。
如果你打算打破这个规则,再想想吧。你想要通过添加另一个类型的字体来获得什么?相反,看看你选择的字体,尝试另一种风格——粗体或薄或斜体——可能是更好的解决方案。
7.不改变字体
永远不要通过伸展、扭曲或倾斜一种字体来获得“另一种”字体。如果你需要不同于你所拥有的东西,选择一个不同的字体选择。
字体设计师花了大量的时间来创作出的字体不是通过一些改动就可以完事的。改变字母的形式会伤害可读性,并会导致字体在使用大于原始尺寸时会以像素化的方式“崩溃”。
8.大量运用对比
让设计师陷入麻烦的情况之一是直接把字体类型放在图像或背景元素上。只有当你在元素之间有足够的对比以创建分离和确保可读性时,它才会起作用。
如果必要的话,你可以通过添加投影到字母已创建对比和分离,如果文字层和背景层确实没有足够的对比的话。
光线在黑暗或深色背景中可以确保可读性。这也有助于使用一个更规则或更宽的字体。
但事实并非总是如此。一张照片可能包括明亮和暗的空间,或者可能包括粗细的笔画。
优化的选择可以包括在“盒子”中展示文本、选择较重的字体或在图像上添加颜色叠加。所有这些技术可以帮助创建更多的对比,使文本更具可读性(此外,当文本和图像移动时,它们往往会被使用在多个响应式断点中)。
9.记得为移动端调整字体
说到排版,移动端的可读性应该是一个首要考虑的问题。像在字母上添加图案或纹理等有趣的技巧可以在打印和一些桌面屏幕上工作,但在较小的设备上却会不会有什么的效果的。
你需要考虑字体如何在所有使用终端中的呈现形式(回到你的排字标尺,记住要在大屏幕和小屏幕上添加类型的规格)。
移动端的排版通常比较大,而且比台式机上的字体间距要大一些。如果段落更短,这样你就不会有大量的文本来读取,这也会对用户造成困扰。
10.坚持一种风格分标准
一旦你针对网页设计项目有了一个明确的想法,创建一个风格指南或者将你的使用规则规范化。
复印并把它放在一个你更容易获得或看到的地方,当你对设计做出改变时,使用它。
一致性是完美字体设计的关键组成部分。
总结:
大多数用户可能对比如像坏的排版设计这样的较专业的问题并不了解,他们只知道设计在整体的感觉上不太对。
在创造完美字体的时候,关键在于可读性。字体类型必须易于阅读和理解。它应该与文本所表现的情绪相匹配,用户几乎看不到它,但你需要做到他们不需要任何思考就可以轻松阅读了。
原文:10条能够让你每次都拥有完美字体设计的规则
译者:深圳Clh
图文来自:design shack
出处:http://www.clhweb.com/news/tech/20171110/rules_for_perfect_type_design.html
英文链接:https://designshack.net/articles/typography/rules-for-perfect-type-design/
一个完美的设计需要一个完美的排版,而排版最难的应该是如何用好字体了。本教程详细解析了设计师需要注意到的问题,包括字体形状,字体大小,文字间距还有对齐方式等。
1.为项目设定目标
一个好的排版首先需要你对你的项目在实际中的作用或目标有一个坚实的了解。在你开始浏览谷歌字体或Typekit字体库之前,先记下几个几个问题的答案:
· 你想通过这个项目与谁建立联系?
· 用户在实际使用过程中应该如何处理这个设计?
· 转换点是什么?
· 项目建立的气氛是怎样的?
· 你是否需要与其他设计或品牌进行匹配或协调?
这些问题的答案将帮助你开始构思你要找什么样类型的版式。
2.寻找类似的形状
如何在你的设计中匹配多个字体在视觉上不会给人一种混乱感?其实这就像选择字体的形状一样简单,同时,这对字体组合的产生或打破也是很重要的一个技巧。
那么如何确保你做到了呢?
寻找具有相似形状的字体。想想每一种字体是圆形的还是椭圆形的,厚的还是薄的,有一个短的或高的x高度,或者是倾斜更适合还是不需要任何倾斜。
选择一个你喜欢的主要的或作为整体基础的字体,然后匹配具有相似形状的补充字体,你可以通过以下几点来判断适合的补充字体:
· 看看每个字体类型家族的小写“o”。里面的“碗”是圆的还是椭圆的?匹配“o”类型相同或相似的字体。
· 字体厚或薄的搭配都是可行的。最好是搭配厚或薄的常规字体。
· 寻找在x高度上类似的字体(也就是在垂直高度上的x)。
· 不要害怕混合搭配不同类型的风格。尝试一个serif和sans serif组合,只要确保在复杂字体的旁边搭配一个简单的字体即可。使用最广泛的简单类型,如正文。
· 注意倾斜和斜体(你可以把“o”的中心看作一个测试的标准),不要使用超过一种倾斜的字体,避免字体的反方向“冲突”,它们对用户来说可能是难以接受的。
3.设置字体的比例和大小
字体的大小可以决定一个项目的成败。如果文本太大,它会导致不自然的阅读模式,产生太多的停顿。如果文本太小,它会使眼睛紧张,导致用户最终放弃而选择离开。
当文本的样式正确时,用户可以更容易和自由地阅读和了解文字的内容。
大小适中的文本在项目中也有不同大小的比例。主体文本是一个大小,标题是另一个大小,而子标题则是另一个大小。所有的尺寸和使用在整个设计过程中都应该是一致的。
在这个技巧上,它对用户的作用是让一切都更容易阅读。
· 文本大小按重要性排列信息。更大的类型更重要,更有可能被大多数用户浏览。
· 比例增加了文本的可扫描性,这样用户就可以快速地查看它。
· 相关项目外观相同。
· 更大的文本元素,如子标题,有助于分解长文本块,使其更易于阅读。
4.注意间距
这个问题就不再是字体本身,而是在类型间距的问题了。
字距调整,引导,跟踪和填充可以使你的字体类型更漂亮,但是,也可能把它变成得混乱。
关于保持正确的间隔,这是一个创建“艺术”的过程。很多都取决于实际的字母组合使用,大小和字体。没有任何已经限定或规范的字距调整规则,而且对于文本和其他元素没有完美的填充量。
你得盯着它看。
在这方面,更多的是依靠你的感觉。如果设计以一种你不能精确定位的方式感到“压抑”的话,很大原因归咎于间距问题。它需要不断的练习才能把它做好。
5.左对齐
在英语和其他语言中,用户的阅读习惯是从左到右的,这也是在文本块中优化可读性的理想对齐方式。
小文本(如菜单栏的文本元素或Banner图的主标题)不需要对齐到左边,因为他们很快就可以阅读。对于有大量字符的文本(不仅仅是一个句子),应该采取的最适合的对齐方式就是左对齐的(理由目前还有争议,尽管如果你不小心的话,它可能会引起一些间隔问题)。
6.选择两种字体类型的家族
这个规则很可能已经深深的植根于你的意识中了:只需要两种字体就可以完成一个项目。
这里再次提一下这个观点,因为很少有设计师真正关注这个规则。浏览网站设计或一个作品集网站时,你会很经常看到很多“暴走的字体”的项目。
如果你打算打破这个规则,再想想吧。你想要通过添加另一个类型的字体来获得什么?相反,看看你选择的字体,尝试另一种风格——粗体或薄或斜体——可能是更好的解决方案。
7.不改变字体
永远不要通过伸展、扭曲或倾斜一种字体来获得“另一种”字体。如果你需要不同于你所拥有的东西,选择一个不同的字体选择。
字体设计师花了大量的时间来创作出的字体不是通过一些改动就可以完事的。改变字母的形式会伤害可读性,并会导致字体在使用大于原始尺寸时会以像素化的方式“崩溃”。
8.大量运用对比
让设计师陷入麻烦的情况之一是直接把字体类型放在图像或背景元素上。只有当你在元素之间有足够的对比以创建分离和确保可读性时,它才会起作用。
如果必要的话,你可以通过添加投影到字母已创建对比和分离,如果文字层和背景层确实没有足够的对比的话。
光线在黑暗或深色背景中可以确保可读性。这也有助于使用一个更规则或更宽的字体。
但事实并非总是如此。一张照片可能包括明亮和暗的空间,或者可能包括粗细的笔画。
优化的选择可以包括在“盒子”中展示文本、选择较重的字体或在图像上添加颜色叠加。所有这些技术可以帮助创建更多的对比,使文本更具可读性(此外,当文本和图像移动时,它们往往会被使用在多个响应式断点中)。
9.记得为移动端调整字体
说到排版,移动端的可读性应该是一个首要考虑的问题。像在字母上添加图案或纹理等有趣的技巧可以在打印和一些桌面屏幕上工作,但在较小的设备上却会不会有什么的效果的。
你需要考虑字体如何在所有使用终端中的呈现形式(回到你的排字标尺,记住要在大屏幕和小屏幕上添加类型的规格)。
移动端的排版通常比较大,而且比台式机上的字体间距要大一些。如果段落更短,这样你就不会有大量的文本来读取,这也会对用户造成困扰。
10.坚持一种风格分标准
一旦你针对网页设计项目有了一个明确的想法,创建一个风格指南或者将你的使用规则规范化。
复印并把它放在一个你更容易获得或看到的地方,当你对设计做出改变时,使用它。
一致性是完美字体设计的关键组成部分。
总结:
大多数用户可能对比如像坏的排版设计这样的较专业的问题并不了解,他们只知道设计在整体的感觉上不太对。
在创造完美字体的时候,关键在于可读性。字体类型必须易于阅读和理解。它应该与文本所表现的情绪相匹配,用户几乎看不到它,但你需要做到他们不需要任何思考就可以轻松阅读了。
原文:10条能够让你每次都拥有完美字体设计的规则
译者:深圳Clh
图文来自:design shack
出处:http://www.clhweb.com/news/tech/20171110/rules_for_perfect_type_design.html
英文链接:https://designshack.net/articles/typography/rules-for-perfect-type-design/