网页设计之字体设计规范

网页设计需要将图片和文字相结合，达到融合的境界，当然文字的设计也是有一定的规范的，下面是关于网页设计字体设计规范，欢迎参考！

网页设计常用字号

最好用偶数字号

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学习基础知识

为了实现更有效的字体排版，第一步是要了解一些艺术。如果你不熟悉它的概念，你可能会认为字体排版一定是一个相当简单的学科。当然，如果你知道字母系统，那么你已经赢得了这场战役的一半了吧?剩下的就是改变它一点外观，那么你就有了属于你自己的字体!在现实中，字体是相当难懂和复杂的，因为它既是科学的也是艺术的。

一个字体的解剖涉及到非常具体详细的专业术语，严格的尺寸和通用标准都必须知道而且遵从。和许多形式的设计一样，需要声明地一点是，如果你了解规则，知道它好在哪里，那么你可以打破规则并且有意识地去做设计。

2注意你的字距

这篇文章不是为了研究字体设计，所以我不会去考上面细节中提到的每一个专业术语。然而，字距调整是许多设计师，无论是新的还是老的，都会忽略的事情。最近我和一个女性时尚网站的高级艺术总监在讨论字体这门学科。让她有种失落感的事情是她下面的设计师都缺乏对字距调整的认识。

字距是什么?字距调整就是在给出的一个字体调中去调整两个字母之间的间隔。注意这是一个独立问题，它需要同时调整所有字母的空间距离。你也许会认为这是一个高价昂贵的项目，就像Adobe Illustrator会自动为你解决所有字间距的问题，因此你也认为字距调整不是问题，不会出现在你的艺术作品中。

3注意字体的沟通交流

字体的选择从不是一个武断任意的过程。通过你自己的字体库找一个你喜欢的字体看上去很简单，但这样很少会得到一个有效的结果和答案。理由是，有些确定的类型字体与固有的心理学有关。

如果你是敏锐的，那么你会发现这些字体选集看上去是非常糟糕的。主要原因是，有视觉个性的字体选集和手写单词被分开了，脱节了。你也从不会在看到一个世界战斗冠军用一个一个漂亮的脚本字体来表达惊呼兴奋感。同样的道理，你可能永远都不会在你的婚礼请柬上使用Cooper Black字体。我们已经习惯于看到不同类型的用于特定用途的字体。

对齐是字体中一个极其重要的概念。出于某种原因，非设计师往往本能地用中心对齐来解决一切事情。在生活中，我们了解到，如果有些事情是对中的，然后让它保持平衡，因此这样会更好。在现实中，居中对齐阅读起来是最弱的，最难的，应该用非常有选择性的对齐方式。

5选择一个好的辅助字体

在你选择好一个主要的字型后，接下来就是选择另一种字体来强调它。这是一个和主字截然相反相冲突选择。

6尺寸问题

我成为一个设计师有六年了，在六年中我设计创造了大量的印刷广告。其中一件事就是在早期工作中你就知道宣传资料的标题应该立即抓住读者的眼球。在印刷的世界中，你只有一两秒钟的时间引起别人的注意。如果你错过了这个机会，那么你就失去了你的潜在客户。

7当作艺术使用字体排版

现在，停止思考作为简单的标题和正文排版的问题 ，开始考虑它作为一个设计元素该怎么设计。字体是精心设计的，因此具有一种高的审美对你设计库来讲是一个宝贵的资产。这当然远远超出用字母构建外貌。

8找好的灵感

要学会创建有效的和有吸引力的排版，最好的办法是找到并研究一些现有的例子。以下是网上寻找灵感一些好的文章，但不要就此止步。到处转一下，看看你身边其他人在做什么，为什么么这么做，或者为什么看上去没起到好的效果。

广告字体设计的基本原则

平面设计中占有重要的地位，一般说来，所有的广告都少不了文字，甚至有的广告全由文字组成。下面是我分享的广告字体设计的基本原则，一起来看一下吧。

(一)服务内容

设计字体，应与文字的内容相适应，并力求体现广告的特性，例如，粗壮有力的字体，适于宣传重工业产品，纤细优美的`字体适于宣传轻工业产品。柔软的字体适于宣传食品，秀丽的字体适于宣传化妆品，稚嫩的字体适于宣传儿童用品等。

(二)易于辨识

文字是用来传达思想的，如果字形难以辨识，就会失去其应有的功能，因此，设计字体时不但要考虑其艺术性，而且要便于大众的阅读，不能把字体设计的过于复杂，以致难以辨认，此外，在汉字的设计中，要使用规范的简化字，要防止出现错别字和不规范字。

同时，为了便于消费者对商品与企业的辨识，还可以对商品和企业的辨识。还可以对商品和企业的名称专门进行字体设计，这些专用字体经过注册，也具有法律效力，别人不得仿造，可以防止“鱼目混珠”。

(三)赋予其个性

根据广告主题的要求，极力突出文字设计的个性色彩，创造与众不同的独具特色的字体，给人以别开生面的视觉感受，将有利于企业和产品良好形象的建立。在设计时要避免与已有的一些设计作品的字体相同或相似，更不能有意摹仿或抄袭。在设计特定字体时，一定要从字的形态特征与组合编排上进行探求，不断修改，反复琢磨，这样才能创造富有个性的文字，使其外部形态和设计格调都能唤起人们的审美愉悦感受

(四)和谐美观

在字体的选择和设计上既要注意美观，又要注意整体的和谐。从而给大众带来美的感受，字体的变化不易过多，否则就会显得杂乱。字体的搭配要各得其所，有的要适当加强，使之突出。有的则要适当减弱，不要因只注重局部的花俏而破坏了整体的统一。

网页设计配色使用风格

不同的网站有着自己不同的风格，也有着自己不同的颜色。网站使用颜色大概分为几种类型：

1、 公司色

在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。

2、 风格色

许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多……这些都是在突出自己的风格。

3、 习惯色

这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。

网页设计的颜色搭配需要在实践中不断的摸索和不断的创新，认真学习别人的.先进方法和经验，可以快速的提高我们的制作水平。

可以说。网页颜色搭配得当，成功也就走了一半。

标准网页的宽度、字体、字号等的设计原则

标准字体字号：

中文网页一般文字正文都采用宋体12号（12px）字体，因为这个字体是系统对于浏览器特别优化过的字体。虽然12px-20px的宋体字都还能看，但是宋体12px是最漂亮的，是最普遍应用的。

黑体一般是14号，

因为一般很少用黑体做正文，

主要都是标题或者是关键字。

英文网页一般用11px字号，常用的字体是tahoma与verdana这两种！特别是verdana，是最经典，最好用的字体！

在这个显示器百花齐放的时代，网页设计师往往需要考虑不同客户端的浏览体验。

文字大小，是用户体验中的一个重要部分。不同的分辨率，不同的显示器尺寸，乃至不同的浏览器设置，都会对最终展现的文字大小带来影响。

虽然现在很多浏览器已经可以方便地缩放页面，但用户每次光临都要重新缩放，总归麻烦，何况还有许多用户不知道如何缩放页面。

最好还是根据用户的分辨率给用户一个比较体贴的默认字号。

（一）网页宽度及高度

建画布一般1920px*1080px(高度建议可自定)建议视觉中心网站宽度1000px以内，推荐尺寸960px，如果超出1000px，推荐尺寸1200px。（两边需留白，目的自适应）

建议网站高度控制在2-3屏内，大概高度控制在2000px以内为宜。一般一屏高度在710px以内,否则需要下滑，不下滑会看不到下方内容。

（二）字体字号

字体请使用系统自带字体。例：微软雅黑、黑体、宋体、Tahoma、Arial、Verdana。

安卓中文常用微软雅黑，英文常用HelveticalNeue

中文备选字体：方正兰亭黑

英文备选字体Helvetica、Arial、DIN

IOS常用字体：苹方

字号大小：

中文：最低12px起步，12、14……偶数递增

H1标题字36px,行间距60px,  H2副标题字24px,行间距40px,  正文14px,行间距24px,修饰提示性文字12px,行间距20px.

行间距=行高-字号（行高一般为20px）

2、英文：最低10px起步，10、12……偶数递增

字体颜色：

常规颜色：#666666（常用大面积范围文本子，在列表中标题字呈现加粗）

重要文字：#333333（常用于标题和关键性文字）

警示文字：#ff0000(常用于提示性文字，警示文字)

次级文字：#999999（常用于帮助信息，不需太在意的文字）

（三）页面布局

1.整体视觉

2.网页栅格页面宽度：980px栏目间距：10px

3.产品栅格产品宽度：160px产品间距：40px/30px

4.表单

5.Bar

6.留白

7.Button

合适的按钮尺寸

1.导航（文本字号一般14px）站酷导航按钮80*60px,东方头条导航按钮60*50px,宽度控制在50-100px左右,按钮内部左右留白一般20px左右,高度控制在30-50px左右,一般行高200-400%

2.注册、登录

注册、登录按钮一般宽度与上方输入表单宽度保持一致,一般表单文本对话框宽度300-400px左右

高度控制在30-50px左右（行高200-400%左右）,由于单独存在，尺寸大、字号大，一般字号14-18px

3.搜索框

由于搜索框一般位于顶部单独存在,搜索框文本域尺寸较大，故按钮亦大,一般宽度控制80-100px左右,高度控制在30-50px左右（行高200-400%左右）

icon搜索按钮，一般宽度缩小，尺寸50px左右

4.购买、关注

一般购买按钮在150-200px左右,高度控制在30-50px左右（行高200-400%左右）,由于单独存在，尺寸大、字号大，一般字号14-18px,关注等按钮相对购买宽度略小

(四)icon

制作规格：统一的视角、倒角、材质、尺寸，颜色数量尽量不要超过三种

制作要求：图标必须会意直观，这是它区别于文字的价值

icon尺寸正方形常见一般尺寸30*30  32px*32px 50*50 100*100px视大小自定

（五）命名

（六）图片输出

可以参考常规字体的使用规范：

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

2、不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。

3、字体与背景的层次要分明,确保字体样式与色调气氛相匹配，等。

扩展资料：

网页设计

1、需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，从而建立起营销模型。

2、以业务目标为中心进行功能策划，制作出栏目结构关系图。

3、以满足用户体验设计为目标，使用axure rp或同类软件进行页面策划，制作出交互用例。

4、以页面精美化设计为目标，使用PS、AI等软件，调整，使用更合理的颜色、字体、图片、样式进行页面设计美化。

5、根据用户反馈，进行页面设计调整，以达到最优效果。

参考资料来源：百度百科-UI设计

参考资料来源：百度百科-网页设计 （网站技术）

信息传播是文字设计的一大功能，也是最基本的功能。文字设计重要的一点在于要服从表述主题的要求，要与其内容吻合一致，不能相互脱离，更不能相互冲突，破坏了文字的诉求效果。尤其在商品广告的文字设计上，更应该注意任何一条标题，一个字体标志，一个商品品牌都是有其自身内涵的，将它正确无误地传达给消费者，是文字设计的目的，否则将失去了它的功能。抽象的笔画通过设计后所形成的文字形式，往往具有明确的倾向，这一文字的形式感应与传达内容是一致的。如生产女性用品的企业，其广告的文字必须具有柔美秀丽的风采，手工艺品广告文字则多采用不同感觉的手写文字、书法等，以体现手工艺品的艺术风格和情趣……

根据文字字体的特性和使用类型，文字的设计风格大约可以分为下列几种：

1． 秀丽柔美。字体优美清新，线条流畅，给人以华丽柔美之感，此种类型的字体，适用于女用化妆品、饰品、日常生活用品、服务业等主题。

2． 稳重挺拔。字体造型规整，富于力度，给人以简洁爽朗的现代感，有较强的视觉冲击力，这种个性的字体，适合于机械科技等主题。

3． 活泼有趣。字体造型生动活泼，有鲜明的节奏韵律感，色彩丰富明快，给人以生机盎然的感受。这种个性的字体适用于儿童用品、运动休闲、时尚产品等主题。

4． 苍劲古朴。字体朴素无华，饱含古时之风韵，能带给人们一种怀旧感觉，这种个性的字体适用于传统产品，民间艺术品等主题。

文字的可识性 文字的主要功能是在视觉传达中向消费大众传达信息，而要达到此目的必须考虑文字的整体诉求效果，给人以清晰的视觉印象。无论字形多么地富于美感，如果失去了文字的可识性，这一设计无疑是失败的。试问一个使人费解、无法辨认的文字设计，能够起到传达信息作用吗?回答是否定的。文字至今约定俗成，形成共识，是因为它形态的固化，因此在设计时要避免繁杂零乱，减去不必要的装饰变化，使人易认、易懂，不能忘记了文字设计的根本目的是为了更好、更有效地传达信息，表达内容和构想意念。字体的字形和结构也必须清晰，不能随意变动字形结构、增减笔画使人难以辨认。如果在设计中不去遵守这一准则，单纯追求视觉效果，必定失去文字的基本功能。所以在进行文字设计时，不管如何发挥，都应以易于识别为宗旨，这也是对字形做较大的变化常常应用于少字数的原因。