网页设计如何设计字体

增加行高，可以增加文本行之间的垂直空白空间，通常提高可读性以换取屏幕空间，作为一个规则，行高应该是字符高度的30%，以提高可读性。下面介绍网页设计如何设计字体，希望可以帮助到各位。

1、减少不同类型字体的使用

使用超过3种不同的字体让网站看起来没有结构且不专业。记住，太多的尺寸类型和风格也可能破坏任何布局。为了防止这种情况，尝试将字体数量限制在最小限度，一般来说，将字体数量限制在最小限度(两个很充足，通常一个就足够了)，并粘贴相同的字体到整个网站。如果使用多个字体，请确保字体系基于字符宽度互相补充。

2、限制行的长度

每行拥有适当的字符数量是让文本具有可读性的关键。它不是你的设计，决定你的文本的宽度，它应该是一个可读性的问题。如果你想有一个好的阅读体验，应该每行约60个字符。每行拥有适当的字符数量是让你的文本具有可读性的关键。如果行太短，视线必须经常返回，这就会打破读者的节奏。如果一行文字太长，用户的视线将很难专注于文本。对于移动设备，应该每行30-40个字符。以下是在移动设备上查看的两个网站的示例。第一个是使用每行50-75个字符(打印和桌面的每行最佳字符数)，而第二个使是用最佳的30-40个字符。

3、选择一个能在各种尺寸中工作的字体

用户会从具有不同屏幕尺寸和分辨率的设备访问你的网站。大多数用户界面需要各种大小的文本元素(按钮复制，字段标签，章节标题等)。选择一个能够在多种尺寸和重量上运行良好的字体以保持每个尺寸的可读性和可用性是非常重要。

4、避免所有文本的大写

所有大写字母：意思是文本中的所有大写字母，在不涉及阅读的上下文中很好(如首字母缩略词或标识)，但是当你的信息涉及阅读时，不要强制用户阅读所有大写文字。

5、在排版中行间距的重要性是很大的，用于两行文本之间的间距(或行高)。

通过增加行高，可以增加文本行之间的垂直空白空间，通常提高可读性以换取屏幕空间。作为一个规则，行高应该是字符高度的30%，以提高可读性。

6、确保你有足够的颜色对比度

不要在文本和背景中使用相同或相似的颜色。文本越明显，用户就能更快地阅读它。一旦你选择了颜色，必须要在大多数设备上与真实用户进行测试。如果测试显示阅读副本有问题，那就可以确定你的用户具有完全相同的问题。

7、避免使用闪烁的文字

闪烁的内容可能会引发敏感个体的癫痫发作。它不仅可以引起癫痫发作，而且对于一般用户来说，这是令人讨厌且使人分心。

字体的设计和排版对于整个网页设计而言是非常重要的，好的排版和字体可以让访客在浏览时很舒服，让网站看上去很“优雅”，不会有很凌乱的感觉，提高了网站的用户体验。

字体和字号这两个元素必须捏在一起说。

字体分为衬线体(serif)与非衬线体(sans serif)。简单的说，衬线体(serif)就是带有衬线的字体，笔画粗细不同并带有额外的装饰，开始和结尾有明显的笔触(如下图)。常用的英文衬线体有Times New Roman和Georgia，中文即是我们在windows下最常见的中易宋体。

与衬线体相反，无衬线装饰，笔画粗细无明显查差异的字体就是非衬线体(sans serif)。Arial、Helvetica、Verdanad都是我们熟悉的英文非衬线体，中文有微软雅黑和mac下默认的中文-华文细黑。

在过去，普遍认为有笔触装饰的衬线体，可提高辨识度和阅读效率，更适合做为阅读的字体。多用于报纸、书籍等印刷品的正文。非衬线体饱满醒目，常用做标题或者用于较短的段落。

很长一段时间里，在互联网上我们会注意这样的一个现象，国外网站大部分以非衬线体为主，而中文网站基本就是宋体。其实不难理解，衬线字体笔画有粗细之分，很小字的情况下细笔画就被弱化，受限于电脑的分辨率，10-12px的衬线字体在显示器上是相当难辨认的(见下图);同字号的非衬线体笔画简洁而饱满，更适于做网页字体。windows下，中文宋体小字点阵的特性，12px、14px的字号显示仍然相当清晰美观，便于阅读。这也就是为什么大多网页设计制作人员容易机械性的选用特定字号或英文或中文的字体。

如今随着显示器越来越大，分辨率越来越高，经常会觉得看12px的文字有点吃力，做为设计师也会不自觉的开始大量使用14px的字体，而且越来越多的网站开始使用15、16px甚至18px以上的字号做正文文字。大字号的使用，对英文字体来讲，衬线体的高辨识度和流畅阅读的优势就体现出来了。微软雅黑就是微软在这个字体显示问题上的解决方案。

行长

我们随手拿起一本书或者一份报纸，数一数每行的文字，一般情况下都不会超过40个汉字。这是因为如果每行文字过长，读者会不停的转动脖子，感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首，也很容易串行，影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的，我们更要注意划分阅读区域。

文本宽度控制在450-700px为宜，此范围内参照字号大小;

英文每行80-100个字母(空格算一个字母)为宜;

中文每行30-40个汉字为宜。

间距

通过设置间距，我们就可以控制文字的密度。如果每行间距太小，与文字过长一样，读者浏览文章时也容易串行;如果行距过宽，阅读时就会感觉文章不够连贯。

间距没有固定的值，通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示，不管是中文网站还是英文网站，大家多喜欢用1.5em-1.8em的行距。以1.6em的行距为例，字号16px的字，行距就是25.6px。

关于段距，我们要考虑一下具体实际情况。比如文章篇幅较短，就不需要很宽的段距;二文章篇幅很长，特别是那些偏学术的比较枯燥的文章，就要多利用段距把握文章的节奏，给阅读者喘息和思考的机会，且使文章更有层次和可读性。

背景

白色是全频光，全放射光对人眼睛的最有刺激，所以很多印刷品读物的纸张都选用乳白色或者淡黄色的纸张。由于显示器本身就发光，所以同是纯白色背景的文字，在电脑上比在纸上阅读会使眼睛更容易疲乏，另有研究表明：在电脑上阅读只有在纸上阅读速度的78%，阅读效率大大减低。因此，为了提高页面浏览的舒适度和效率，越来越多的页面采用浅灰色和淡黄色做为页面背景。

另外，印刷品以文字为主的出版物往往会采用低光泽度的纸张，也是因为光泽度高的纸张反射度高，导致阅读质量下降，容易使人视觉疲劳。页面背景仿造低光泽度的纸张(纸张纹理)也能否提高阅读的舒适度呢?

我曾做过这样一个小调研，同样一段文字放在不同颜色的背景上(仅考虑自然光源)，其中有两个背景加了纸张纹理的效果。结果75%的人认为带有纸张纹理的背景长时间阅读舒适度最高。

小字体的网站设计是老派概念。正文字体尺寸使用12pt的想法几乎可以追溯到互联网和数字出版的第一天，当时文字处理器的默认大小是12pt。

那时屏幕也小的多，而12pt的文本在距你眼睛几英尺的地方也可以很好的阅读。

1.阅读更容易

可读性是一件大事。你为什么设计一个用户难以阅读的网站?

第一点是在Web上放弃对正文字体的纯数值度量。无论你的字体是12pt还是16pt或22pt，如果无法读取，这些都不重要了。(字体大小不是通用的，随着字体的不同而不同。)正文应该与屏幕上的其他内容相称，便于用户可以从远处看到。

一段时间的标准是，单列中的每行45到60个字符(包括标点符号和空格)是大多数读者的理想长度。因此，你需要考虑最常见浏览器的尺寸、所使用的列的宽度以及适合该范围的文字大小。记得调整相应的断点。

对于较小的屏幕，范围更紧密，大多数人都认为较大的字体更好。(行数范围的一半。)

诀窍是创建一个适合阅读的刻度。你要处理的文字尺寸越多，这就越重要。在逐行阅读时，太宽的字体让人难以集中精力; 太拥挤导致阅读时眼睛移动太快，没有一个很好的节奏。

2.使设计更直观

字体的大小有助于网站设计的整体可用性。

如果所有字体按比例缩放，大字体可以帮助其他用户界面元素(如导航链接或按钮文本)尺寸的调整。它有助于整体流程。

大字体还可以帮助你更好地决定内容以及有选择性的进行编辑，这对用户来说是一件好事。这种精简有助于将最重要的元素呈现在设计之上。请记住，用户的关注时间很短， 那么他们需要了解的设计和如何与之交互的一切都必须一目了然。

设计中的一切都将受益于重新思考字体尺寸，因为它们共同拼成最终的产品。所有编辑和重新思考如何放置的部分可以提高可用性，因为你花时间来评估设计中的各个元素，而不是像往常那样按照相同的方式摆放所有的东西。

3.减少疲劳

用户疲劳是一个真实存在的问题。大多数人整天都在看屏幕，浏览手机、玩游戏、平板电脑、在电脑上工作或看电视。他们的眼睛已经很疲劳了。

大一些的字体可以帮助减少一些看屏幕的疲劳。

屏幕疲劳的另一个常见来源是移动设备，用户必须通过屏幕获取元素。大手机正在减少拇指容易触及的区域，但较大的元素和字体可以帮助解决这个难题。

变大字体和其他用户界面元素是很重要的一个原因是，因为它有助于调整视觉显示与物理显示相匹配，从而为用户提供更多的舒适感。

4.增加视觉冲击力

你希望你的网站设计可以让用户产生强烈的第一印象。较大的字体比较小的字体更具有强烈的视觉效果和冲击力。大字体更容易被阅读。

这些策略都有助于持续地吸引用户的注意力。

使用大一些的字体的意外后果是设计中的其他元素都可能变大。大字体有助于你在设计中创造更多的空间。更多的空间通常会创造出更舒适的用户体验，也增加了对比的元素，有助于将吸引用户到设计的部分。

大一些的字体和增加的间距是大多数用户不会看到或谈论的元素，但他们会意识到。这种体验是很容易实现的，希望可以让网站数据像网站驻留时间和访问者数量一样上升。

所以16px的正文字体太小了。我同意这一说法。尝试18,20甚至22pt大小的文字。即使起初看起来很尴尬，但你会发现它很容易阅读，很容易理解，它让内容感觉不那么强烈。使用户用起来更方便，他们会感谢你并在你的网站上花费更多时间。

1.使用有目的的阴影

不管你做什么，不要点击设计软件中的阴影按钮，只应用默认值。 最好的阴影是你甚至都看不到的阴影。投影技术最好作为一个元素进行部署，以帮助创建文本和背景图层之间的深度。

这种“隐形”阴影样式是将技术添加到文本时可能会看作设计师的东西，但它对普通用户来说应该是不可识别的。阴影通常以这种方式用作软元素来创建分隔或在文本和背景元素之间添加更多对比。

不管你做什么，不要点击设计软件中的阴影按钮，只应用默认值。这些设置很少适合，而且往往看起来业余。

其他常见的高度可用的投影技术包括可以看到的选项，例如硬边阴影或分层阴影。

的硬边缘阴影(上图)有一个明显的复古的感觉，增加文本后面的第二层。这适用于粗笔画或平板字体。 甲层状阴影创建几乎三层/三维效果。它也具有复古的感觉，并且在较厚的字体中效果最佳。

2.双重曝光时尚潮流

双重曝光图像是网络和印刷设计应用中流行和流行的选择。在字体中放置两个图像曝光的效果看起来很复杂和有趣。当使用谨慎或只有正确的图像时，它可以绝对令人惊叹。

想创造一个很酷的双重曝光?我们有20个Photoshop动作列表，使其变得轻而易举。或Envato Tuts +有一个很好的教程，如果你想自己做。

3.用笔画玩得开心

使用有趣的笔画或笔画效果来增加深度的拼块字体。深深的中风可以有复古的感觉，甚至可以效仿旧标志的刻字。上面的霓虹笔触效果是如何使用笔画为设计创造特定感觉的一个很好的例子。

4.使用颜色(或彩色字体)

彩色字体是包含多种颜色，阴影或渐变，纹理或透明度的字体。您可以使用颜色字体来获得这种时髦效果(我们有几个可以从这里选择)，或创建自己的。

当使用大量颜色作为文字效果时，它几乎需要超越顶部。明亮，大胆的颜色选择相当时髦，不会冒犯用户，因为人们习惯于看到它们。

只要确保以有意识的方式使用颜色。在Helvetica上弹出一些颜色与设计作为设计中主要视觉元素的文字效果不同。

5.添加一个动画的触摸

没有规定说文本元素必须是静态的。网站设计中的动画是增加视觉兴趣的有趣方式。

将这种视觉兴趣添加到文本元素中。在使用文字动画时，记住一些事情以确保字体保持可读性非常重要：

运动应该是故意的 信件不应该过快 滚动或自动播放文字应该包含一种停止动作的方法 无论屏幕大小如何，单词应该始终可读

6.模仿一些标志性的东西

无论什么时候，如Netflix系列“陌生的东西”等一些流行的东西，设计趋势都倾向于模仿原创。

该系列的霓虹灯，80年代风格的标志也不例外。它是模因，仿制项目的基础，也是设计师发挥新效果的有趣方式。

要知道，一个文本效果酷之间的界限，并做吸吮，可以用模拟技术迅速地改变。一种风格可以快速设计一个设计。不良的复制也可能看起来很俗气，可能不符合预期的项目。

7.合并形状

创建图层并混合“媒体”可能是一种有趣的方式，为文本添加一些额外的东西。通过允许形状或其他元素来代替一个或多个字母，该设计在元素合并时拉动眼睛。

这种技巧的诀窍是确保作为字母的元素适合文本。很明显，该对象正在替换特定的字母，以便设计不会变得难以阅读。

上面的Kasra Design在主视频标题和公司图标方面做得很好，它使用形状创造了一个有趣的“k”。

8.添加纹理

一些字体与复古，粗糙的风格来。其他人可以使用一些自定义增强功能来处理整体设计。

将纹理添加为字体内的图像或者将字体添加到上面的字体中，可以使设计感觉更有触觉。纹理可以使文本更加突出一些。

上面的例子包含两种纹理文本：

切割出来的字母使它们看起来更粗糙或复古 通过背景透明的字母

9.创建一个自定义字符

当谈到创造一个整洁的文字效果时，天生的合身就是品牌。品牌实际上可以改变或调整字体，以包括刻字的自定义字符，这是令人难忘的。

这不是一个应该轻易采取的技术。创建字母或改变角色必须小心谨慎。在大多数情况下，您需要与印刷工(最好是字体的创建者)合作，以获得最佳效果。

这种文字效果应该用在最省钱的情况下。

10.单独完全刻字

为了使影响最大化，您需要做的只是选择一种符合项目消息传递基调的字体。 有时最好的文字效果根本没有效果。在形状，大小和颜色上具有足够的对比度时，文本元素和背景会自然分离。

缺少使用文字效果可能比添加辅助可读性或增强对比度的技巧更困难。您必须精确地规划所有元素，以确保元素一起工作，粗体字体，深色字体或黑暗组合中的光线最具可读性。