网页设计中关于中英文正文字体比较
来源：互联网
核心提示： 下面的内容，是源于前几天我和 Snl 在 MSN 上提及 Web2.0风格
中的 文字运用的一个细节讨论。因为Snl的论述发表在经典的内容
下面的内容，是源于前几天我和 Snl 在 MSN 上提及 Web2.0风格 中的 文字运用的一个细节讨论。
因为Snl的论述发表在经典的内容系统中也引起了较高的关注，所以我整理了一下和snl的讨论，发在下面，我想这也许会给关注这个话题的朋友思考的空间和延伸。
有兴趣的朋友应该先看一下Snl 有关文字应用的论述：
什么是最好的正文字体 ？
微软雅黑 VS Windows宋体
关于中英文正文字体比较的两点补充说明及讨论
其实对于中文来讲，如果硬要把英文的版式套成中文，会遇到2个问题：
这其一，是中文的表述方式问题：
同样的语句，英文所使用的字符数量比中文要多得多，因为英文是以 单词 为视觉单位的，中间有 空格，而中文在 字词
之间，没有空格。这一点，即使是用英文大写，也和中文不同。
YOU MUST KNOW!
你必须知道！
比较一下因此，英文的“视觉暂歇”能力要强一些。但是，现在英文的版式中的标题也有 去除空格 的风格，是为了更紧凑：
YOU MUST KNOW!
YouMustKnow!
现在有些标题开始使用这样的风格，这是将暂停空格转换为“节奏符号”，用大写字母来造成视觉波动。这样比纯粹的大写字母“易读”。
其实，对于模拟相应视觉感知的中文，我觉得是这样一种方式：
在 关键字 的前后位置上添加 一个 半角空格。
在关键字的前后位置上添加一个半角空格。
上面一句是不是比较好读？而且，这样的风格，在将来 添加链接 时，也显得 格外 容易。这样的好处，我觉得比加强
分段的数目，要好一些。
而且，关键字明确，易于被 搜索引擎 捕捉。还原成“打印文字”时，也比较简单，只是去除
不必要的空格就好了，当然，这是针对中文来讲。对于 印刷 的文字来讲，处理中文的办法要多一些。
下面我要说的第二点问题：
印刷上对于中文字符，广义的说是“双字节”字符，包括韩文和日文，都有这个 行气 的问题。日文对于
视觉调整的探索要早一些。它们用了两个办法来增强 易读 功能。一个是调整“字怀”变大，一个是将字高变成字宽的
81%。这两个，雅黑都用了。为什么是81%而不是其他，我还没有找到说明的资料。但是，对于网络来讲，压扁字体，是目前不太可能做到的。正文部分
9px 字来讲，正文使用什么字体的意义都不大（视觉差异）。所以，还是应该把目前的重点放在 行距调节 上。
网页中字体的设计与应用
其实字体的设计无论是在网页中还是在平面设计乃至艺术设计中都是非常重要的，不过显然网页上会用到的多一些。最近也看到了很多关于字体的设计文章，今天我就个人学习过程总结一下来和大家交流交流。
1.字体大小&font-size&
网页中字体大小应该是被讨论得最多的因素之一。一般来说门户信息型网站字体大小是14px。字体大小适中，再加上合理的配色浏览者不易产生视觉疲劳。所以采用14px大小字体的网页适合于长时间浏览网页的人。另一方面，还有一些喜欢个性并独立的网页设计者会偏爱12px大小的字体。原因很简单，12px的字体由于笔画几乎都是由1px像素点”打上去”的，所以它看起来比14px以上大小的字体清晰得多。而且还有一点很重要，因为12px是显示器能显示清楚的最小字体大小，所以在网页设计中可以和其它的一些网页元素形成对比。要知道对比在设计中是非常重要的。不过貌似随着”用户体验”的流行许多人也转向了14px的阵营。我要提示大家的一点是：
Robin告诉我们只要你的设计合理，读者会愿意去看那些小字体的！
如何取舍得看你自己了。
2.字体类别&font-family&
一个合理的字体样式设计会给你的设计增彩许多，它会让你的网页看起来更加生动，有趣。这里暂且不说关于字体替换的相关技术，就现实中我们用到的进行说明。
首先你得明白英文字体是没办法显示中文的，这也就是为什么CSS中有font-family这个属性的原因。在你指定首选字体的时候还必须加上备用字体，比如：
font-family: Verdana, Geneva, sans-
这行代码就指定了网页优先采用”Verdana”字体，其次是”Geneva”，依此类推。需要注意的一点是这些字体最好是用”安全字体”，也就是说用一些操作系统中常用的一些字体。
细心的话你可以发现上面的代码并没说明一种中文字体，是不是就显示不了中文了呢。呵呵！不用但心这就是下面要说的了^!^
当你没有指定一种中文字体时网页中的字体会按你浏览器的默认设置进行渲染。而这些默认字体一般会是宋体。因为其它字体在视觉效果上总给人一种不习惯的感觉。不过要是设计合理的话其它的字体也是可以使用的，我在这儿给大家个建议，仅供参考：
中文字体我还是习惯用宋体(虽然现在微软雅黑很流行)，但是英文字体最好不要用宋体，因为它看起来很刺眼，有很多”距齿”。英文字体我比较喜欢”Verdana”。不但清晰看起来给人感觉很舒服。”Geneva”会比较古典，艺术。”Comic
Sans MS”会比较有趣等等。你可以运用一些花哨一点的字体比如”Brush Script
Std”这一类的Script字体来点缀你的作品。但是切记一定不能用得太多。
所以如何取舍又得看你了，其实设计和生活一样处处得要你做选择。
3.字体样式&font-style,font-weight&
我大概总结了一下比较常用的字体修饰属性就是加粗和斜体。在xhtml里面也可以对应em和strong标记。虽然看起来这两个效果只是装饰做用，其实它们在用户体验和seo方面也用很大的作用。
斜体通常用来修饰被引用的话和一些比较有”意境”的语言。比如：
某某人说过：失败乃成功之母
Only you“`能拌我取西经……
粗体自然不必多说，表示强调。并且能引起视觉上的重视。当你看到上面的斜体引用后你的视觉会转到这一行加粗的字体上。这一点是非常重要的，你不去引导读者的话没有几个人会很细心得看你的作品的。如何使用你说了算^!^
以上也可以总结出我的网页设计观：All depend on yourself…
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。再也不纠结字体选择了！超全面的英文字体小结
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
再也不纠结字体选择了！超全面的英文字体小结
编者按：字体于设计，如同气质于人。是温厚尔雅，谦谦有礼，还是活泼大胆，烧透一片，都是通过字体的结构来塑造的。只有了解每个字体的气质，才能将它安放到合适的地方，今天这篇好文，跟同学们普及一点英文字体的知识。
最近（考试之前）在看“字体故事”，顺便浅浅的研究了英文字体学。深感这是一门快速提升（哔–）格的学问，英语课pre和论文就写的这个，大受老师“敬佩”。最近又写了好多英文论文（主要是细胞），我在每篇论文里面实验不同的字体，打印出来测试效果。期末复习的时候也会多多留意老师使用了什么字体和论文用的都是什么字体。有趣的发现包括：Cell是唯一用无衬线字体（Helvetica）做正文的，Science用了古风的Minion，魏老师的PPT竟然用的是质朴的Univers等等。
于是呢，看了这么多，逼格提升了这么多，来这里普及一下实用得的小知识~
再继续往下看之前，请先自行了解一下“衬线”与“无衬线”的概念。
西方国家字母体系分为两类：Serif 以及Sans serif。
Serif 是有衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。相反的，Sans serif就没有这些额外的装饰，而且笔画的粗细差不多。
Serif 字体容易识别，它强调了每个字母笔画的开始和结束，因此易读性比较高，Sans serif 则比较醒目。在走文阅读的情况下，适合适用 Serif 字体进行排版，易于换行阅读的识别性，避免发生行间的阅读错误。
Sans serif 强调每一个字母，Serif 更强调于一个单词。
中文字体中的宋体就是一种最标准的Serif 字体，衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一。不过由于强调横竖笔画的对比，在远处观看的时候横线就被弱化，导致识别性的下降。
本片只讨论在文件中使用的情况，尽管绝大多数字体也会在展示（PPT）中使用，但是必须注意的是字母在以小号（8-16px）和大号（32px以上）呈现的重点是完全不一样的，所以这一点是要注意一下的。
标题字体的选用：
如今已经很少见到还有用衬线字体做标题的出版物了（除了历史原因，纽约时报还用哥特体呢），所以为你的文章做一个无衬线字体的标题还是非常明智的。加粗也是一个不错的想法；如果你想显得很有科技感，那么你可以走另一个极端用Ultralight（极细体），比如苹果的宣传就经常使用超细 Helvetica。
使用典型的瑞士字体（包括但不限于Helvetica，Arial，Akzidenz-Grotesk，Univers，Frutiger）是一个非常保险的方法，这些字体在非专业师的眼中区别很小（所以具体区别就不在这里讨论了），尤其是在加了粗之后，都会打造出出一种严谨端庄的标题，中性又不失醒目，几乎是标题设计“永远不会错的”字体。
当然你如果想要更多的风格，可以尝试 Futura 这种极简风格的德国字体，会有一种很工业很前卫的感觉。当然你也可以使用Gill Sans，这种典型的英国字体，能够体现出一种半古风的感觉，更加温和，利于拉近你和读者之间的距离。Century Gothic 和Optima 也是不错的选择，前者是艺术向的极简风格，后者因其拱形的笔画末端和多变的笔画粗细有一种华丽的感觉。当然也可以是Gothem这样展现力量与决心的字体，通常用在口号上面。
正文字体的选择：
正文字体的选择是一个很分裂的选择。衬线字体和无衬线字体会传达完全不同的感觉。
首先来说传统的衬线字体：其实在正文使用衬线字体并不是一件很难选择的事情，因为大部分衬线字体在小字号的情况下都是差不多的。我曾经试验把一篇文章的不同部分改换成不同字体（大约13px），打印出来。不幸的是用的打印纸有一点儿洇，字符的笔画有着很明显不规则的变粗。在这种情况下，即使在一张纸上不同字体的部分从观感上开来基本没有什么区别。由此可以看出，其实衬线字体在印刷质量/小字号的情况下，其实区别并不大。
当然，考虑到现在都是激光打印，一些选择还是有必要的，那么：放弃Times New Roman 吧少年！
Times 的确是一款设计优良的字体，但其流行程只度如此之广是因为早期Windows内嵌了这款字体并作为默认字体。过度广泛的使用是这个字体已经有了一种公文式的疲倦感了。放弃Times的另个原因是他是一个“报纸用”字体，其最早设计的初衷是给英国的Times做字体。报纸字体最大的特点是自宽比较窄，从而在报纸上可以放下更多内容。于是在正文中就造成了一种版面局促假象。
Palatino，Garamond和Minion：典型的古典的威尼斯风格字体，属于最古老的的罗马字体风格（在之前只有哥特风格）。其特点在于j的尾部较小的弧度，比较高的上部，比较小的字怀和字碗。由于那个时候的印刷术实在不高，所以许多设计都是为了再差的印刷质量下能过提高可读性，比如笔画粗细变化不大（粗的正常粗，细的不敢做太细有可能印不上）。因此如果预期的印刷质量很差，那么就可以试一试这些字体。传达的感觉很像文艺复兴时期的书籍，或者17-18世纪的公文的风格。给人一种古板的，每一个字都是雕刻的感觉。古老而正式。目前Science正文就是Minion。另一个提示是，“独立宣言”用的就是Garamond，想象一下那个感觉？
Baskerville：最经典字体之一。其特点是华丽而古典。作为一款在17世纪诞生的“过渡”字体（Times也属于过渡字体），巴斯克维尔体拥有相比古典衬线字体更显著的粗细对比，在细节处理上也更加华丽（比如g的尾部和Q的尾部）。使用巴斯克维尔体，让正文可以有一种典型的浪漫主义风格，好像翻开17-18世纪的爱情小说一样。
Didone（迪东）体（注意没有一种叫做Didone的字体），主要是Bodoni和 Didot。典型的法国字体，现代而性感。非常强烈的笔画粗细对比和平的细衬线。一些比较成功的设计案例比如说在香水瓶上面。当然这种性感的属性在小字号的情况十分不明显，因此不用担心。使用迪东体反而能够给读者很现代的感觉。比如一些时尚杂志是比较好的应用。不过要注意的一点是，如果印刷质量不敢恭维的话，最好不要用这种字体，因为过于强烈笔画对比，细的衬线可能会比较容易印不出来。
如果你实在喜欢Times，不妨试一试Georgia。微软现代化设计过的Times。加入了一些现代的元素（比如平衬线）。但说实话，并不是很招笔者喜欢。给人一种公文化的感觉。
如上所说的各种字体，虽然有着各种风格，但因为他们衬线字体的本质，都是适用于正式的文件的。（不要因为迪东体性感就不敢用，那只是说他放大的时候）
说一说无衬线字体：
无衬线最广泛的应用是在电子世界。无衬线和衬线字体相比，就好像铅笔字vs钢笔字。铅笔字的最大特征是非常没有特征，极端的平淡。这也是无衬线的一个理念：即透明容器理念。说的是字体本身不应该传达任何复加的意义，而只传达文本本身的意义，就好像一个透明的容器只展示其中的内含物而不展示容器的属性一样。
Calibri，Segeo，Droid Fonts：这是指新一代的系统默认字体。完美的贯彻了透明容器和易读性的理念。他们的风格就是完全没有风格，既没有古典衬线字体的正式，古典的感觉，也没有20世纪无衬线字体极强的未来感或设计感。是的，他们几乎什么都不传达！极强的现代化大企业的公文感，甚至都不能用冷冰冰形容，因为他根本不传达任何感觉，只能说是一种“冷漠”的感觉。虽然让人读起来有可能会很无聊，但是永远也不会用错！
Gill Sans：非常好的人文体，很强烈的字宽对比，更多贴近手写的细节。有一些人手书写的感觉，温暖的无衬线。很好的避免了无衬线的冷漠的感觉。唯一要注意的是貌似比普通无衬线要粗一些，混用的时候可能有强调的感觉。
瑞士字体（包括但不限于Helvetica，Arial，Akzidenz-Grotesk，Univers，Frutiger）：最早也最经典的无衬线字体，字体设计史上的里程碑。很好的设计感，虽然大面积使用有时也会有Calibri等的无聊感，但是不是那么强烈。很像设计精良的广告传单的正文，精致，优美而严谨。
Optima: 比较接近衬线字体感觉的无衬线，笔画的粗细变化比较有趣，是两段比较粗中间比较细。在大字号作为标题的时候，其笔画末端的拱形设计显得十分华丽与人性化。用在小字号的时候会给人一种亲近和华丽的感觉，可读性也不错。
Verdana：微软的另一款经典字体，有一些借鉴几何无衬线，但是可读性相当好，也是第一批web-safe字体，应用非常广泛。特点是很大的字怀与字宽，很有现代商业宣传品的感觉。宜家用于所有标签，想想一下宜家的感觉，商业-设计-平民化的感觉。很亲切也很友好。注意使用的时候把字号调小一点儿。
几何无衬线（如Futura和Century Gothic）：不要用在正文！很好的标题字体，但是因为易读性太差，不适合作为小字号的正文。
Trebuchet：也不是很建议用。微软早期设计的很奇怪的一款字体，有一点像等宽的粗衬线（Slab Serif）字体的设计（虽然不是），可能是为了在早期多种低分辨率上正常显示，故意在无衬线上面搞了一些类似粗衬线的东西。除非你想让你的文件像程序员的官方参考文档。很Geek有一点儿呆的感觉。
最后说一说古老的智慧（old wisdom），古老的智慧说：“正文用衬线字体，标题用无衬线，图注无衬线。”这在大多数正式的出版物和文件中，至今仍然是非常常见的，或者说已经形成了金科玉律式的规范。比如我随手拿起一部Lehninger（真的是随手啊，完全没有花时间仔细鉴别其中的字体，所以鉴别错了不要喷……），其中标题用的是一种粗窄体无衬线（抱歉暂时对窄体没有研究就不鉴别了），图注用的貌似是无衬线的Optima，正文用的是一种类似Georgia的衬线字体。
然而这种智慧有着过时的趋势，其中趋势之一就是，Cell已经全盘Helvetica（无衬线字体中最著名的一种）化了。而无衬线的发展主要有三点原因：一是印刷品质量越来越好：在完美印刷的情况下，无衬线字体可以通过许多方法（如增加x高）来弥补相对衬线字体劣势的小字辨识度；二是在数字时代刚刚开始的时候，由于屏幕的分辨率问题，衬线字体有可能在某些分辨率条件下变形显得丑陋无比，故无衬线在IT领域十分常见（随便打开个大网站都是无衬线的）；第三点，难以说是原因还是结果的原因，是二战之后“少即是多”（包豪斯主义算一个）的设计理念大为流行，无衬线字体刚好非常顺应这种思潮。
虽然现在在很多地方（除了比较保守的地方，如学术界）使用无衬线做正文也无可厚非，但是因为无衬线有时会给人非常枯燥的感觉，虽然理论上无衬线通过加高“x高”的方法，使得易读性完全不输衬线体，但是个人觉着读无衬线的长篇文章更容易疲劳。
无衬线用于小篇幅的宣传品，图注，摘要或者其他一些地方是比较好的；长篇大论或者文学化的东西还是使用衬线比较好。因为与衬线相对应的联想是长篇大论或者小说，而与无衬线相关联的联想是比较图形化的联想（或者说无衬线更好的能与图片相适应）。因此凡是图文并茂的文件都应该考虑部分或者全部使用无衬线，而纯文本要优先考虑衬线。另个原因是无衬线比较容易无聊，多一些图片可以调剂一下。
至于说标题，大胆的来无衬线吧！在醒目程度与设计感上面，无衬线的高度是衬线远远无法达到的。
因为许多设计感非常强的宣传标语都使用Ultralight或者Semilight字体，这里想说一下这个问题。细体用于正文真的不是很好，因为小字号的时候细体实在是太细了，很不利于阅读，眼睛很累。正文的要义是一切以易读性为先，所以不建议使用细体。笔者有时在参考文献中使用细体，这是因为参考文献是没有人会细看的（大部分是复制粘贴搜原文），而小字号的细体会有一种弱化的感觉，很符合参考文献的定位。
说到字体，这三篇文章小编恨不得亲手送上啊：
看完小结，再补充一点英文字体分类的知识吧：
如果你觉得传统几大字体无法传递出你内心独特气质，试试这个吧；
偶然看到高大上的字体却不知道叫啥怎么办？戳下文：
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量74万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注国外网页设计常用英文字体列表
这是一份国外网页设计常用英文字体(安全字体)列表，供参考：
font-family: Arial, Helvetica, sans-
font-family: &Arial Black&, Gadget, sans-
font-family: &Bookman Old Style&,
font-family: &Comic Sans MS&,
font-family: Courier,
font-family: &Courier New&, Courier,
font-family: Garamond,
font-family: Georgia,
font-family: Impact, Charcoal, sans-
font-family: &Lucida Console&, Monaco,
font-family: &Lucida Sans Unicode&, &Lucida Grande&, sans-
font-family: &MS Sans Serif&, Geneva, sans-
font-family: &MS Serif&, &New York&, sans-
font-family: &Palatino Linotype&, &Book Antiqua&, Palatino,
font-family: Symbol, sans-
font-family: Tahoma, Geneva, sans-
font-family: &Times New Roman&, Times,
font-family: &Trebuchet MS&, Helvetica, sans-
font-family: Verdana, Geneva, sans-
font-family: Webdings, sans-
font-family: Wingdings, &Zapf Dingbats&, sans-
如果您喜欢本文请分享给您的好友，谢谢！如想浏览更多更好的内容，请登录：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）界面设计必备！全方位科普常用的字体规范（附神器）
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
界面设计必备！全方位科普常用的字体规范（附神器）
编者按：90后UI设计师的最新干货！应广大群众要求，今天 同学不说高大上的教程，来点即学即用的干货，从界面中文字的使用规则到字体颜色的选择，都有具体细致的说明，非常适合基础不扎实的同学。想一次性搞定字体这个关键点，马上学起来 &&&
小哥的教程合集：
好长时间没发帖，净想过年了，过年哈，倒腾工作总结和年货是大事。
这几天有人问我说：“最近看了好多教程，都老高大上了，但是老弟我做不到呀，想学点直接能拿来用的，这个要求过分吗……”
这个，好吧，那就直接说说能用的知识：字体字号。
也许你会说：字体字号？也太Low了吧，这个谁不知道重要呀。
对于这个问题，我想说：会和熟练，是两回事。一个App，不同部分的字体字号你能准确地说出来吗？
很多刚做APP界面的设计师，经常会因为字号，字体颜色，间距而困扰。
拿到设计需求后，开始进行设计，不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐，导致与预期不符等。
这小节我将和大家理一理界面中常用的字体，字号，字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。
一、成也字，败也字
在设计师的职业生涯中，至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。
我们常常会听到，这也太LOW了吧！！你能统一一下字体吗？
不明确而繁琐的字体搭配会导致整个画面失调。可以这样说，字体可以成就设计也可以毁掉设计。
<img class="alignnone size-full wp-image-123175" alt="m_c58b54bcaa" src="/wp-content/uploads/2015/01/m_c58b54bcaa.jpg"
width="690"
问题的关键有：
字体样式太多，导致页面杂乱
使用的字体不易识别
字体样式和内容的气氛或规范不匹配
怎么避免这样的结果发生呢？
通过设计经验可以帮助你做出更好的版式，了解不同平台的常用规范。
在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。
不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。
字体与背景的层次要分明,确保字体样式与色调气氛相匹配
二、界面中文字使用的规则
在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体，在这我和大家分别介绍一下。
以下是在72像素/英寸下的规范
移动端常规字体
IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好。
英文字体：Roboto
中文字体：Noto
移动端常用的的字号有哪些呢？
导航主标题字号：40-42px
我一般设计就用40px，偏小的40px字号，显得精致些。
在内文展示中字号大小又是多大呢？
大的正文字号32px，副文是26px，小字20px。在内文的使用中，根据不同类型的App会有所区别。
像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性，正文字号36px，会选择性的加粗。
而列表形式、工具化的APP普遍是正文32px，不加粗。副文案26px,小字20px
26px的字号还会用于划分类别的提示文案，因为这样的文字希望用户阅读，但不要抢过主列表信息的引导。
36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次，同时加强按钮引导性，选用了稍大号的字体。
（见下图中的退出按钮)
大家注意了，在选用字体大小的时候一定要选择偶数的字号，因为在开发界面的时候，字号大小换算是要除以二的。这个详细缘由大家可以网上查询，我就不在这一一的介绍了。
常用字号的大小基本就这几个，根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。
常用的字号有哪些呢？
网页中文字字号一般都是宋体12px或14px(无状态)，大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px，一般使用双数字号，单数的字体在显示的时候会有毛边。
常用的字体：
1. 平平稳稳：微软雅黑/方正中黑
微软雅黑系列：在网页设计中这款字体使用的非常平凡，这款只无论是放大还是缩小，形体都非常的规整舒服。在设计过程中建议多使用雅黑，大标题用加粗字体，正文用常规字体。
方正正中黑系列
中黑系列的字体笔画比较锐利而浑厚，一般运用在标题文字中。但这种字体不适用于正文中，因为边缘相对比较的复杂，文字一多会影响用户的阅读。
2. 与时俱进：方正兰亭系列
方正兰亭系列：个人最推荐的就是这个系类的字体，整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁，这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合，不仅能保证字体的统一感，还能很好的区分出文本的层次。
3. 刚劲有力，运动型：汉仪菱心简/造字工房力黑/造字工房劲黑
在这几个字体中，他们有着共同的特点，字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式，让文字显得更为活力。在这三种字体中，菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松，更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多，效果比较突出。
毛笔字生成器
通过自由的书法网站在线生成。在网址中输入文本，再进行选择书法字体样式。通过这种方法我们能很快的找到需要的书法字体。这招非常管用。
推荐大家几个毛笔字相关的网站：
和大家简单操作一下毛笔字的使用方法。
将下载下来的字体图片AI转路径，编辑文字。
首先使用在线生成器输入选择好你需要的文字字形，将文字图片拖至AI中。
选中拉入图片，点击［图像描摹］
然后继续点击［扩展］按钮
扩展完毕后，图片已经都变成了路径。
使用魔棒选择颜色就可以将文字的路径提选出来。
最后经过设计后的Banner效果，这就是我经常用的Banner风格，你们也试试吧。
重要提示，怎么找不认识的字体名称？
很多朋友会看到别人使用的字体非常好看，但又不知道是什么字体。在这我告诉你一个方法。可以通过网络上传字体图片进行搜索字体名称。相关神器地址：
三、常用字体颜色
字体颜色又有哪些常用的颜色呢？
在界面中的文字分为三个层级，主文、副文、提示文案等。
在白色的背景下，字体的颜色层次其实就是黑、深灰、灰色。
常用的色值是#333333；#666666；#999999
在界面中还经常会用到背景色#eeeeee。
分割线则采用#e5e5e5或#cccccc的颜色值，一个深一些，一个浅一些。这个会更具不同的软件风格采用不同的深浅，由设计自己把控。
在我们做设计的时候，字体和图库均是有版权的，请注意合法使用。
免费图库资源：
设计的时候我们还可以将字体进行变形来达到宣传的目的，这个需要设计师对有一定的了解。
总之，设计是要有规范，有体系的。使用规范化的设计对产品的延续性非常有帮助，并且保证了产品的独特性和一致性。所以，大家要在设计初期找到风格和规范，这样做出来的界面才会统一一致，在变化的需求中找到定量，调整起来也相对轻松很多。
【90后小哥的优质投稿合集】
他的成长经历，备好你的纸巾：
他的求职经验合集，备好你的简历：
他的图标教程，赶紧开Photoshop啦！
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量90万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
官方微信：想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗？添加优设哥微信号：youshege
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注
