常规or创意？别让网页中的文字禁锢了你

常规or创意？别让网页中的文字禁锢了你

下面分享两个相关网页的中文字体设计现状。

状态1:

上周看到我写的《好字体成就你的网站》后，我的前端技术朋友主动和我聊起了网站文字排版设计的各种经验。他提到一个很意外的情况:除了设计师、前端技术、方案策划、排版、设计、包装、印刷等岗位的工作人员。，对文字比较敏感的人，其实大部分用户对文字的字体样式和字号都没有定义。

他所说的未定义是指，虽然用户对自己访问过的网页有一个大致的印象，但他们可以谈谈自己对网站的可视化体验，比如网站看起来怎么样，设计风格是否吸引人。但是，他们并不太在意这个网页使用的字体，甚至不知道视觉疲劳的罪魁祸首很可能是选在了一个“小”字号。

情景二:

经常听到设计师抱怨网页设计方案中能列出的中文字体样式太少，设计方案出来了创意字体样式也完成不了，或者完成成本很高，大大限制了自己创意的发挥。也可以看到很多设计教程建议设计师在中文字体风格上不要太有创意。

这种情况也是AnyForWeb上一篇文章中设计师的难题:为什么海外网站的字体风格那么好看，我们在设计方案页面时却总觉得达不到那种实用的效果？

从视觉效果来看，很明显英文是线框结构，中文是方形结构。从构图设计的角度来看，英文字母比中文更多的标注了几何图形，图案会更加丰富。从字体上看，英语中使用的拉丁字母包含了52个英文大小写字母，字体都很简单。标记的总数很少对识别有帮助，字体的简洁有助于设计方案，而汉字的很多笔画过度簇集，不利于文字的设计。

那么我们可以掌握以下客观事实:

用户的计算机 *** 作系统中内置的字体样式是有限的。如果应用创意字体风格，打开网页前必须免费下载。一般英文单词只有几百KB，因为它只需要包含数据、标点符号和英文字母。而中文标识符文档庞大，有多个MB，甚至十几个MB，下载时间一般较长，通常会导致网站打开缓慢。很有可能是还没看到特殊字体，用户已经关闭了网页。

从上面的具体情况，我们可以把握到，其实不用担心网站的文字设计不能充分发挥创意。因为用户关心的不仅仅是文字设计的创意，还有网站的整体体验，AnyForWeb认为设计师可以根据其他方向充分发挥文字的创意，以你的网页设计方案打动用户。比如保证网页整体字体设计的规范性，促进装饰性文字段落的创造性，灵活运用少量特殊字体等。

1。如何保证网页整体字体设计的规范性？

>；网页设计标准:字体样式选择

在字体样式的选择上，AnyForWeb建议设计者尽可能选择系统默认或通用的字体样式，以确保计算机浏览器能够正确识别和显示所有正常文本。

以宋体和微软雅黑为例:

1。宋体

宋体是最常见的中文字体。在没有特定字体样式的情况下，计算机浏览器通常选择它来进行3D渲染。但是很多人觉得这个字体不好看。

NoNoNo不是这样的！比如下面这个AnyForWeb网站的例子，右边客户数据分析的叙述性文字是选用的宋体12px，加上18px的微软优雅黑标题。层次分明，一目了然。除此之外，所呈现出的美丽与大方也不弱。

2。微软雅黑

微软雅荷可以作为网站首选字体风格，美观大方，画质不错。

在游都假日旅游网站，网站首页采用Metro设计风格，整个网站源代码使用微软优雅黑色字体。不同的版块灵活运用不同的字体大小，文字层次非常清晰。下图中的文字与卡片设计理念相结合，让整个网站看起来很整洁，很有感染力。

这里有个小技巧:微软优雅的黑色字体可以用font-family写在网页上，但是把微软优雅的黑色字体放在网页照片上会构成侵权，设计师必须注意。

下面说说宋体和微软优雅黑的一些区别。

宋体是衬线字体，微软雅荷是无衬线字体，宋体在视觉效果上更纤细。与宋体相比，微软的雅黑字体不是方方正正的，而是略扁略宽，字符间距很小，会让默认行距更清晰，微软的雅黑字体看起来更圆润。所以在同样的字号下，雅黑一个字的总面积看起来更高，更容易识别。

用微软优雅黑作为标题比较合适，文章正文可以根据设计理念和要求方便地选取。但是在移动端查询的时候，大家明显感觉微软优雅的黑色字体更清爽。

除了宋体和微软优雅黑体，设计师还可以根据具体需求选择其他经典的通用字体样式，比如Windows内置的中文字体样式，比如黑体、仿宋体、楷体，以及它的英文字符Arial和Vardana。

>；网页设计标准:字体大小选择

Em和px是CSS中描述文本大小的主要企业。其中em在解决混合开发机器设备的字体样式方面有很大的优势。在基本的网页设计方案中，px一般作为企业广泛使用。

以px为例。一般在网页设计方案中，14px作为标准字体样式，16px作为中级字体样式，18px作为大字体样式，12px作为小字体样式。自然，这里说的只是一个大概的规格。其实如何选择字体大小，必须由设计师根据网页的整体布局来明确。

在网页响应式机器上，比如手机上，分辨率比PC上低，这个因素也是设计师必须考虑的。

>；网页设计标准:字体设计标准化

大家要记住一点:虽然你看到很多网站的页面都是共享的，但是这些页面都属于不同的网站，用户关注的是一个网站的整体。所以就设计者而言，在设计方案页面时，要考虑所有网页的标准和一致性。

初中设计师更容易犯一些关键错误，比如同一级别不同网页的字体风格不同，字号不同，字符间距不同。

如果你想成为一名技术专业的设计师，这些问题都必须按照标准的设计方案来预防。

第二，如果我们想让文字的一部分看起来有创意，怎么办？

>；应用不同色调的文本来突出主题

>；段落加装饰艺术设计风格

>；关键文本内容的字体为粗体

>；产生与背景颜色的高对比度

设计师还可以根据推广其他创意元素的方法，突出文字的内容，赋予设计方案一个亮点。

三。如果必须应用特殊字体...

当遇到必须应用特殊字体的情况时，许多设计师常常通过将所需的文本制作成照片来实现。但这种方式有几个明显的缺点:不太可能大规模应用字体样式，照片内容的文字不容易改变，对网站的SEO也非常不利。所以我们不建议这么做。

这并不意味着每个人都必须遵循文中的基本路径。AnyForWeb在网站中应用了特殊字体，增强了网站的特色和亮点。这不是我们选择的拍照方式。让我们试着抄写这篇课文！

自然，如何将特殊字符的设计方案还原到网页上，是基于技术方案的前端开发，有兴趣的设计师也可以自己做科研。

根据技术性，你可以很容易地应用一些特殊的字体，使网页设计更有创意。