网页设计之字体设计规范

作者&投稿:乘支 (若有异议请与网页底部的电邮联系)
~

  网页设计常用字号 最好用偶数字号

  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广告页面,儿童/女性主题)

  第四类,灵动,清新,秀雅,精致,古韵

  方正清刻本悦宋简体、方正宋刻本秀楷体、方正宋刻本、秀楷体、汉仪全唐诗、简康熙字典体、祥南行书体、造字工房、刻宋(适用于复古,典雅,传统,品质,灵动等主题)

  特殊字体或艺术字体的设置。

  如果你需要用一种特殊的字体来体现你的风格,那么特殊字体或艺术字体最好以图片的方式置入网页。需要用这种字体的地方用图片代替,以保证所有人看到的页面是同一效果。



UI设计师必备技能:常用字体规范
答:1.字体样式太多,导致页面杂乱 2.使用的字体不易识别 3.字体样式和内容的气氛或规范不匹配 怎么避免这样的结果发生呢? 通过设计可以帮助你做出更好的版式,了解不同平台的常用字体设计规范. 在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文...

【转】网页设计中的字体相关
答:一、最佳易读性规范 1.行宽 传统图书排版每行最佳字符数是55—75,实际在网页上每行字符75—85更流行。中文在14号字体时,建议35—45个文字 2.行高 网页设计中,文字间距一般根据字体大小选1—1.5倍作为行间距,1.5—2倍作为段间距 比如12号字体,行间距是12px—18px,段落间距则是18px—24px...

网页设计字体设计规范
答:- 标题文字建议使用18px、20px、24px、28px或32px,尽可能选择双数大小;- 按钮文字大小为14至16号,根据实际情况可调整。字体排版规范:1. 为了最佳易读性,行宽通常在75至85个字符之间,中文建议在14号字体时行宽为35至45个字符;2. 行高通常为字体大小的1至1.5倍,段落间距为行高的1.5至2...

网页设计中的字体使用规范
答:字体大小不要过大在网页设计中,不要用太大的字体。过大的字体会让页面看起来很不协调,影响用户的阅读体验。不要使用闪烁的文字不要使用不停闪烁的文字。这样会让用户感到不适,影响用户的阅读体验。标题字号应比正文字号稍大在网页设计中,标题文字字号应当比正文字号稍大。这样可以使标题更加突出,吸引用...

UI设计网页设计字体规范应该要注意什么
答:字体在设计中的地位是至关重要的。简单说:1、如果作为文字去使用。公文,标语等,比较正式的内容,尽量实用印刷体,即黑体;宋体等等。有说服力,有可信度。标题要粗,正文要细。2、作为促销、活动以及内容活泼的主题,就要使用新鲜,特别或者少儿的字体。例如毡笔黑,琥珀体,少儿体,等等。3、古典...

网页字体设计设置有哪些技巧
答:1、字体的大小设置 网页中字体大小不要乱设置,最好以系统默认为宜,一般是12PT,现在网络上最流行的小中文字体大小为9pt。CSS2规范根据长度、水平和垂直尺寸来定义字体。这个长度为一个数值,前面可能带一个可选的加( )或减(-)标记符。另外,该数值后可能有一个可选的单位标识符。另外,CSS2规范...

设计网页字体有什么要求
答:一、练习汉字美术字的基本笔画笔画,掌握各笔画的规范写法。如点、横、竖、撇、捺,横折勾,等等,都是有固定的写法的。二、掌握复杂笔画的写法,不管何种字体,如果基本笔画的写法不对,那么,结构布局再美,写出来的字也不好看。三、掌握字的结构布局,整体布局恰到好处,写出来的字才会美观。如果不...

UI设计网页设计字体规范应该要注意什么
答:1、在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。2

网站设计中最常用的字体设计方法是什么
答:10、正统字体设计,多用于CI,通常是针对笔画统一改变字体,如都把横笔画变粗,如都把竖笔画的头部削尖,如都把点笔画改成圆形或心形。原则是要统一,改变部位不要超过两种类型。末了,小编还是想提醒各位企业网站设计师。作为一个合格的网站设计师,你必须具备很强的创造思维还有抽象思维,只有将这做好...

CSS网页设计时关于字体大小的设计
答:在开发网络应用时,没有比外观更重要的事情了。所以,如果发现设计人员十分关注字体及字体大小,我不会感到奇怪!字体大小CSS2规范根据长度——水平和垂直尺寸——来定义字体。这个长度为一个数值,前面可能带一个可选的加(+)或减(-)标记符。另外,该数值后可能有一个可选的单位标识符。另外,CSS2...