大家天天设计都在与字体交际。但大家一直没认真在乎他们的存在。大家没非常不错地用过他们,甚至滥用他们。这所有是由于大家不知道他们。字体作为排版的要紧元素之一;在设计里也是最深奥的一门学问之一。本文中,就与大伙来一块探讨一下这门深奥的知识。
字体的种类
英文字体(Typeface),分为几种大类,这是在用英文字体的时候须知的入门知识:
1、衬线体(Serif)
衬线(serif)就是笔画边缘的装饰部分。下图中红色标注的地方就是衬线。
衬线设计的初衷是为了更了解地标明笔触的末端,提升辨识率,提升阅读速度。另外,用衬线字领会叫人感觉愈加的正统。所以大家容易见到的英文书本,尤其是论文、小说,不少都是用衬线体来完成正文的。
网站制作中常见的衬线体有Times New Roman和Georgia。下图左侧是12px的Times New Roman字体,右侧是12px的Georgia。
在中文里,大家用的宋体就是对应的衬线字体。
2、非衬线体/无衬线体(Sans-serif)
字体假如不带衬线的话,那样就称为非衬线体或者无衬线体。下图就是非衬线体。
网站制作中常见的非衬线体相对就比较多了。有Arial、Verdana、Tahoma、Helivetica、Calibri等。下图从左到右依次是Arial、Verdana、Tahoma:
值得注意的是,虽然在书本中,衬线字体被广泛地应用,但在网络上,衬线字体极少被用。因为电脑屏幕分辨率与书本不具可比性,所以正文10~12px的 衬线字体在电脑屏幕上是非常难辨认的。下图是没Cleartype时,10px的Verdana和10px的Times New Roman的对比。大伙可以发现,左边的Verdana可以被非常不错的辨识。右边的Times New Roman辨认相当困难。
3、等宽字体(Monospace)
等宽字体事实上只针对西文字体。由于英文字母的宽度各不相同。比如i就要比m窄不少。编程时显示代码,假如字母不等宽那样排版将非常难看。大家在DOS命令行中,可以看到用的是等宽字体。
编程需要的等宽字体有如下需要:
1、所有字符等宽;
2、简洁、明确、规范的字符形体;
3、支持ASCII码为128以上的扩展字符集;
4、空白字符(ASCII: 0×20)与其他字符等宽;
5、“1”、“l”和“i”等三个字符易于区别;
6、“0”、“o”和“O”等三个字符易于区别;
7、双引号、单引号的前后部分易于区别,最好是镜像对称的;
8、明确的标点符号外形,特别是大括符、圆括符和方括符。
容易见到的等宽字体有Courier,Courier New
4、手写体(Calligraphy)
顾名思义,手写体就是手写风格的字体。有时大家也叫它书法字体。中文的书法字体大多都比较生硬。个人更推荐用日文的书法字体。日文书法字体跟加柔美,更人性。但时用日文书法字体缺点就是大都都是繁体,另外不少汉字会缺少。
5、符号体(Symbol)
Windows里最著名的符号体就是Webdings(记得以前还在Windows 95的时候蛮爱用的……)。下面是Webdings字体的几个:字体的样式
容易见到的字体的样式分为:正常Normal、粗体Bold、斜体Italic。
简单来讲,粗体就是字领会愈加黑,愈加“粗”。斜体就是将字轴微微倾斜。他们都是用于在篇幅内强调某段文字上。
在说到粗体的时候,大家比较容易联想到CSS里的font-weight(字重)属性。大家了解font-weight(字重)属性值除去大家平时用的 normal,bold外,还有bolder,lighter,100~900等属性。那样这个100~900的值是什么呢?事实上,100~900并没 有单位。出色的字领会对不一样的字重提供不一样的设计。假如字体事先内置了不同等级的粗细程度的设计,那样这几个数值将分别对应每一个等级。比如Zurich字 体,就包括了Zurich Light、Zurich Regular、Zurich Medium、Zurich Bold、Zurich Black、Zurich UltraBlack六个字体。如此一来,Zurich Light对应的就是100、200、300三个数值,Zurich Regular对应的就是400也就是“正常 normal”,Zurich Medium对应的是500,Zurich Bold也就是“粗体 bold”对应的是600、700,Zurich Black对应800,最后,Zurich UltraBlack对应的是900。
对于中文斜体,一般在互联网上是不用的。由于中文笔画繁多,用了斜体将很难辨认。
单位
大家的Web设计中会用到一些单位:
1、点(pt、point)
72 points = 1 inch,1英寸是72点。另外,1皮卡(pica)=12 points
2、像素(pixel、px)
像素就是电脑屏幕上的一个最小的图像单元,通俗地说就是屏幕上最小的一个点。
3、DPI、PPI
DPI 全名是Dots Per Inch,点每英寸,PPI全名是Pixel Per Inch。他们是分析度(Resolution)的单位。也就是说,1inch的长度上能安排多少个点(像素)。举例,普通的,大家的显示器大概是 72ppi,也就是1英寸的长度上,有72个点(像素)。dpi/ppi越高,分析度就越高,也就是说,颗粒越小,图像越细腻。通常来讲,照片的分析度在 240dpi~300dpi之间,所以为何照片看着,要比屏幕上看着要细致得多。杂志印刷用133或150dpi,高质量书本使用350-400dpi,由于大部分印刷精美的书本印刷时用175到200dpi。所以为何同样物理大小的文字,在书上看,要比在屏幕上看要明确得多。也就是大家前面提到的,英文书本印刷,为何可以大胆得用Sans-serif字体。
dpi和ppi之间实质上没差别。实在要找出差别,那样唯一的差别或许在于dpi常常用于描述扫描仪和打印机,而ppi常常描述屏幕的分辨率。
4、ex、x-height
常在CSS中用。1ex = 小写字母x的高度。
5、em
常在CSS中用。当然,em可不是表示小写字母m的高度(事实上,小写字母m一般和小写字母x的高度是一样的)。1em = 字体的大小的100%。是一个倍数单位。
间距
1、行距(Line-height、Leading)
说到行距(行间距、Line-height、Leading),大家需要先要学习一个术语叫做基线(ba
seline)。还记得大家刚学习英语的时候写字母用 的那个线格簿子吗?那根最粗的横线就是大家说的基线。基线就是大多数字母所“坐”在的,字体的降低部之上的直线。大多数字体,大写字母一直紧贴基线,并在 基线之上。中文的字体和英文的大写字母状况一样。下图红色的线就是基线。
那样,行距就是指两个相邻的行之间,基线的距离。行间距的单位常常用em,也就是依据字体大小来概念行距。在浏览器中,默认的行距并没一个准则。更具 W3C提供的建议,它觉得默认的行距应该在1.0em到1.2em之间。事实上,在设定行距的时候,排版上有个原则,就是行与行之间的空隙必须要大于单词与单词之间的空隙, 不然的话,阅读者在阅读的时候容易“串行”,导致阅读困难。充足的行距可以隔开每行文字,使得双眼容易区别上一行或下一行。近几年Web上对于正文的排 版,大多喜欢1.5em的行距,特别是中文网站。也就是假如用了12px的字体大小,那样设计师常常喜欢18px的行距。1.5em确实是一个非常不错的经 验值。事实上,中文的论文的规范也是用1.5em的行距。
2、字间距(Letter-spacing、Tracking)
字间距是指一组字母之间相互间隔的距离。字间距影响了一行或者一个段落的文字的密度。
3、字距调整(Kerning)
字距调整是一种因视觉需要而做的技术处置。简单说,在两个特定的字符连排的时候,你可以为它们单独指定独一无二的字间距。譬如当一个大写A后面跟随一个小写 v的时候,两个字符间就会出现视觉上的更大的间距(事实上字间距是一样的),这是普通的字符间距所没办法解决的。假如降低它们的间距,那样其他的字母就会连 成一团。这个时候就需要字距调整来处置了。下图就是一个应用了字距调整的例子:
段落
1、行长(Measure)
行长是指一段文字的宽度。如下图:
有两个易读性问题与行长有关:
行长越长,需要的越大的行距。行距太小,读者阅读换行时容易串行。行距太大,读者阅读行时会感觉到文字不连续。
正文中,每行40~70个字母为宜。
2、对齐(Alignment)
段落的对齐基本有四种:左对齐(flush left)、右对齐(flush right)、居中对齐(centered)和两端对齐(justified)。
左对齐是指设置文本内容,调整文字的水平间距,使段落或者文章中的文字沿水平方向向左对齐的一种对齐方法。左对齐使文章左边文字具备整齐的边缘。同时文字的右侧就会不整齐。所以英文对左对齐也叫做ragged right,意指外形参差不齐的右侧。右对齐也类同。
居中对齐是指设置文本内容,调整文字的水平间距,使段落或者文章中的文字沿水平方向向中间集中对齐的一种对齐方法。居中对齐使文章两侧文字整齐地向中间集中,使整个段落或整篇文章都整齐的
两端对齐是指设置文本内容两端,调整文字/单词的水平间距,使其均匀分布在左右页边距之间。两端对齐使两侧文字具备整齐的边缘。
用两端对齐之后,两侧的对齐线会非常明晰,文本块的“快”的感觉也会非常明显。但,在英文排版中,当行长非常短的时候,用两端对齐或许会照成某些行词间距过长,某些行词间距过短,如此参差不齐的词间距会感觉十分凌乱,就像一件到处都是补丁的衣服。
3、易读性
易读性描述的是排印文本阅读时的轻松和舒适程度。事实上,平时的设计的最根本的目的也在于此。除上文中叙述的一些原则外,我另外搜罗了一些小小的易读性原则,与大伙推荐:
一份设计上至多用三种字体的大小。
一份设计上至多用三种字体。
要保证肯定的对比度,但又不可有过度的对比。阳文(白底黑字)比阴文(黑底白字)要更容易阅读。在#fff的背景上,用#333的文字要比#000的文字看着舒服。
应该注意文字所在的背景。背景要单一。防止背景噪声。
“少即是多” 用最少的元素去传达最多的信息。
叫你的链接看着像是一个链接。
本文由深圳网站建设公司博久网络发布,转载请注意文章出处!