【转】网页设计中的字体相关
本文来自微信公众账号 设计君 ，在此只做记录。
网页设计常用字号 最好用偶数字号
1、Header导航文字12号或14号；
2、Menu导航文字14—18号；
3、Sidebar文字12号或14号，
4、一级菜单使用14号、二级菜单使用12号
或一级菜单使用12号加粗、二级菜单使用12号
5、Footer 文字12号或14号
6、正文：大标题文字24—32号；标题文字16或18号；正文文字12号或14号
7、标题文字字号，18px，20px，24px，28px，32px， 尽可能使用双数
8、按钮文字：比如登录、注册页面按钮或其他按钮，文字14—16号，可根据实际情况调整大小或加粗。
9、同一层级的字号搭配应该保持一致。比如，同一层级的版块中标题文字和内容文字大小的一致性
在苹果官网中，产品展示文字以64号和32号搭配，文字内容简短有力，可读性强，同时非常具有视觉冲击力，突出显示了品牌特征。
字体排版规范
一、最佳易读性规范
1.行宽
传统图书排版每行最佳字符数是55—75，实际在网页上每行字符75—85更流行。中文在14号字体时，建议35—45个文字
2.行高
网页设计中，文字间距一般根据字体大小选1—1.5倍作为行间距，1.5—2倍作为段间距
比如12号字体，行间距是12px—18px，段落间距则是18px—24px。
另外，行高/段落之间的空白=0.754。行间距正好是段落间距的75%是非常常见的。
3.行对齐
通常情况下，建议在页面上只使用一种文本对齐，尽量避免两端对齐
4.文字留白
在排版文字时，在版面需要留出空余空间，留白面积从小到大应该遵循的顺序是：字间距、行间距、段间距。此外，在排版内容区之前，需要根据页面实际情况给页面四周留出余白。
5、CRAP原则（carp）
对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密性（Proximity）
字体选择
字体：中文：宋体，微软雅黑，方正系列（无状态）
字号：网页中正文／导航字号在12px－18px之间
英文可以偏小一些 10px－16px
再小识别性就不是特别好了
中规中矩，经典通用
中易宋体
Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑
大段的微软雅黑字体排列略显厚重，如果是在网页上长时间浏览，会让人的眼睛产生不适。相比而言，衬线字体装饰性强，具有易读性，所以宋体更适合知乎网站这种大段文字网站
微软雅黑给人的感受包括平和、干净、简单、平静、专业
华文细黑
Mac下的默认中文。
英文
Helvetica:
被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial:
Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常
Lucida Family:
Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
Verdana:
专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
Tahoma:
也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
Verdana：
是一套无衬线字体，由于它在小字上仍有结构清晰端整、阅读辨识容易等高品质的表现，因而在1996年推出后即迅速成为许多领域所爱用的标准字型之一。
Georgia:
基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
有些偏艺术类的网站的大字会使用lobster。更艺术的网站就搜索free font，或者font freebie吧
Trebuchet、Georgia、Times New Roman、Arial、Lucida等字体在26px或更大像素时效果是比较好的，非常适合作为正文的标题。
网页banner字体
网页banner的字体选用方法是要根据banner的主题，去挑选字体，因为字体本身也是有性格的
第一类，稳定型（协调，齐全，稳定，高质）
微软雅黑、冬青黑体、宋体、华文细黑、方正正中黑、方正兰亭系列
第二类，刚硬，锐利，清晰，强烈
造字工坊力黑体、造字工坊版黑体、造字工坊劲黑体、锐字逼格锐线体简、张海山锐线体、华康俪金黑、蒙纳超刚黑体
（更适用大气，热烈，权威，声明等主题）
第三类，轻松，手写，可爱，童趣，亲切
方正经黑、华康海报、汉仪小麦、方正稚艺、新蒂下午茶、汉仪歪歪体、新蒂小丸子
（适用于，游戏娱乐活动海报，h5广告页面，儿童／女性主题）
第四类，灵动，清新，秀雅，精致，古韵
方正清刻本悦宋简体、方正宋刻本秀楷体、方正宋刻本、秀楷体、汉仪全唐诗、简康熙字典体、祥南行书体、造字工房、刻宋
（适用于复古，典雅，传统，品质，灵动等主题）
~
网页字体设计设置有哪些技巧
答：下面时间财富威客网就对网页字体设计的元素做主要介绍。1、字体的大小设置 网页中字体大小不要乱设置，最好以系统默认为宜，一般是12PT，现在网络上最流行的小中文字体大小为9pt。CSS2规范根据长度、水平和垂直尺寸来定义字体。这个长度为一个数值，前面可能带一个可选的加( )或减(-)标记符。另外，...
网页设计常用哪些字体
答：GE美国使用字体 Arial,Sans-Serif; 大小11px; IBM美国使用字体 Arial,Helvetica,sans-serif; 大小0.74em; 可以看到,根据设计的不同,各个网站都不一样,就字体上来说,上面的知名网站都是使用常用字体,选用其中的就可以了。大小上来说,就要根据设计和用户可访问性来考虑了。 网页设计就业方向 各行各业的公司,都...
网页上常见的字体是什么字体
答：这个字体主要体现在苹果官网上，可以看下美国的官网。8、Georgia 说到英文的称线字，肯定首选是Georgia。这套字体笔划粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还不错。此种字体风格优雅又精致，可用于电影海报、游戏、时尚类网页设计中。林肯的官网，Georgia是官网的第二优先选择显示的字体...
UI设计网页设计字体规范应该要注意什么
答：可以参考常规字体的使用规范：1、在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。2、不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。3、字体与背景的层次要分明,确保字体...
网页设计中最常用的字体有哪些
答：常用的是黑体或宋体印品黑体印品清版宋
电商网站美工设计基础的字体赏析
答：2、复古风格的字体设计 网站美工设计基础中讲到化妆品品牌Benefit诞生于美国上世纪70年代这个自由奔放的时代，而创始人之一的姐姐JeanFord刚好主修艺术，她十分懂得如何包装她们的品牌。Benefit的包装和字体颇具复古风，比如留声机造型的包装盒。衬线字体的`logo具有较强的装饰性，字母的转角处线条柔和，更具...
网页设计中的大事件 – 彩色字体
答：小编：今天@Ethan为大家带来一篇关于网页设计中彩色字体的文章，主要介绍了什么是彩色字体以及注意事项和如何创作。感兴趣的小伙伴可以试着自己创作一下，完成后别忘记晒出来呦。那么什么是彩色字体？这是一个不断弹出并开始获得认可的术语，尽管在大型设计项目中的使用的很少。像Adobe Typekit这样的供应商...
最佳网页设计中的简约主义和字体排版
答：标题之间的关系每个标题都应该反映自己独特的风格，同时也需要同页面上的其他风格互补。华丽或者辉煌的标题会非常容易吸引人，但是无论是那种标题样式，留白都非常重要。Square就采用了一个传统的启动界面，包含了大量的图像和文本块。标题设计是一个非常有趣的部分，因为标题可大可小字体多样。然而，相比于...
网页设计中css样式中的font属性与font
答：字体设置使用 CSS font 属性 定义和用法 font 简写属性在一个声明中设置所有字体属性。注释：此属性也有第六个值："line-height"，可设置行间距。说明 这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果...
网页制作如何改变字体网页制作如何改变字体颜色
答：如何让浏览器中网页的字体放大或缩小？【问题描述】：网页字体小【原因分析】：网页字体小是由于误操作导致“网页缩放”，可以按照以下两种方法尝试解决。【解决方案】：方案一：调整网页缩放1.以360极速浏览器为例。点击右下角的【放大镜】图标，调整到【100%默认】即可解决。其他浏览器类似。2.IE浏览器...
