11 种网页设计字体，让您的网站焕然一新

网页设计字体似乎只是您商业网站的一个小方面，但实际上，它们对转换有很大影响。

“超级”与普通的区别是什么？ 正如一个蓝色的大头电影角色惊呼，“演示！”

在设计网页时，外观在总体规划中起着重要作用。 假设您可能有一篇有趣的作品，您的听众可能会喜欢。 如果你的演讲很糟糕或非常糟糕，你可能会把观众推开。 很远很远。

幸运的是，网页设计和开发并不困难。 您需要使您的网页具有吸引力，并真正吸引您的观众。这就是您为用户创造美妙体验的方式。 特别是，您选择的字体会影响读者是停留还是离开您的网页。

随意将这些字体用于您的网页设计，并发挥您的最大潜力。 希望您可以大致了解选择哪些字体以及为什么它们对在线影响如此强大。

如何选择网页设计字体

您的网页具有明确而独特的外观。 如何在外观上显示文本是您成功的关键。 但是请记住，您可以根据以下六个因素提高成功率：

1. 易读性和可读性
2. 品牌一致性
3. 情绪和基调
4. 网页无障碍指南
5. 跨浏览器兼容性
6. 可扩展性

1.易读性和可读性

易读性是您的用户区分字符的难易程度。 如果您的读者无法确定字符是否为“5”的“S”，那么您可能需要选择不同的字体。 一些字体为相似的字符（如“1”、大写的“I”和小写的“l”）提供不同的形状，以便将它们彼此区分开来。

易读性可能会受到其他因素的影响，例如前景色和背景色的选择、字体大小和字体粗细。 例如，当您增大字体大小时，某些字母可能更清晰，但它是否可读？

在这方面，易读性不同于可读性。

可读性是读者阅读文本块的舒适程度。 这种舒适程度还受到文本易读性的影响。 如果一个词太小而无法将字母彼此区分开来，则该词可能不可读。 在一堆密集的法律“细则”中也是如此，人们可以阅读整个文本，但并不像他们希望的那样舒服。

2. 品牌一致性

您需要使演示文稿保持一致。 虽然您的品牌声音为您的网页提供了坚实的基础，但始终保持相同的身份可以确定您在推动您的观点方面的认真程度。 您的演示文稿旨在讲述一个特定的故事，并且您是在邀请客户认同并认可该故事。

寻找能够保持叙事的字体。 如果您正在寻找专业的语气，请使用具有专业外观的字体。 对于引人入胜且友好的内容，请使用看起来舒服的字体。 如果您足够仔细地寻找，您可以找到一个刚好符合要求的产品。

3. 语气和语气

字体心理学研究字体如何影响观众对内容的看法。 有些字体传统上用于特定目的，人们已经习惯了。 其他字体只是简单地唤起了读者的某些想法和情感。 无论如何，您可能希望使用一种字体来帮助您的读者进入您想要建立的情绪。

您可以尝试使用字体来营造那种氛围。 例如，某些字体对于标题比作为正文更有效。 混合和匹配字体甚至可以为您的内容营造更生动的感觉，并带来更强烈的情感。

4. Web 无障碍指南

您的网站必须包容所有访问者。 它确保那些遇到困难或限制的人仍然以与其他人相同的方式欢迎您的网站。 它不仅是一种为您的企业带来更多流量的工具，而且还鼓励您在所有消费者之间建立一个社区。

为此，设计人员经常使用指南来改进网站的 Web 可访问性。 这些规则和准则使内容对所有访问者而言更加人性化和易于理解。 虽然此时不需要，但提高网络可访问性是与您的消费者群建立融洽关系的好方法，并向他们表明您关心并希望他们成为您正在构建的内容的一部分。 四个主要标准是：

• 可感知的。 简而言之，您的消费者必须了解您的内容。 它也不仅限于“看到”内容。 请记住，盲人或视力不佳的用户使用替代屏幕阅读器软件来帮助他们浏览 Internet。 在设置网页时考虑这些用户。
• 可操作。 这意味着所有用户都可以访问和操作您网页的所有部分（文本、链接、音频、视频、其他媒体）。 通常，大多数可操作的网站都很简单，因此易于浏览。
• 可以理解。 您的用户必须能够消化您所说的所有信息。 您可以使用通用语言，或提供替代语言。 同样，您网站的导航必须直观自然地组织，以帮助用户了解您和您的产品。
• 强壮的。 您网站上的内容应该很容易被屏幕阅读器等辅助程序分解和解析。 这样，有困难的人仍然会成为您网站提供的体验的一部分。

推荐阅读：优先考虑以客户为中心的网页设计概念

5.跨浏览器兼容性

您必须考虑到一些用户只是直接不想使用流行的网络浏览器，如 Chrome 或 Mozilla（出于某种原因）。 在某些情况下，这些替代浏览器使用替代字体（如 Arial 或 Times New Roman）来显示您的文本。 使用大多数（如果不是全部）浏览器都能正确显示的字体。

网站支持的四种字体格式是：

• 嵌入式开放式 (EOT)。 仅受 Microsoft 浏览器（Internet Explorer 和 Microsoft Edge）支持
• True Type 字体/Open Type 字体 (TTF/OTF)。 这些格式由 Apple 和 Microsoft 在 1980 年代创立，所有主要浏览器均支持这些格式，即 Chrome、Firefox、Opera、Microsoft Edge 和 Internet Explorer
• Web 开放字体格式 (WOFF)。 由 Mozilla 于 2009 年创立，这种格式是 TTF/OTF 的压缩版本，加载速度更快
• Web 开放字体格式 (WOFF2)。 对早期 WOFF 的修订，其主要参与者包括 Chrome、Firefox 和 Opera； 它旨在取代 WOFF 并且最终会这样做

请注意，目前最常用的格式是 TTF/OTF 和 WOFF。 使用这些格式的字体可以在所有支持的浏览器中正确显示。

6.可扩展性

你有没有注意到有些字体看起来比其他字体更好更流畅？ 这些类型的字体称为可缩放字体。 无论文本大小如何，它们都被编程为看起来相同。 有些字体的编程方式不同，生成的文本看起来更便宜，质量也更差。

为什么可扩展性很重要？ 这很简单。 有些人，主要是年长的用户，就是无法阅读较小的文本。 他们必须非常努力地放大才能阅读您想让他们阅读的内容。 选择可缩放字体可以丰富他们在您的网页上的体验，也可以让他们感觉自己是您的受众群体的一部分。

流行的网页设计字体

现在您已经了解了为您的网页选择最佳字体的基础知识，下面是设计师推荐的一些流行字体。

1.打开无

Open Sans 是一种“简洁”的字体。 它直截了当，切中要害，不会混淆您的信息。 Open Sans 的用途也非常广泛。 它看起来很正式，但它的设计师也赋予了它“中性但友好的外观”。

它是可扩展的，这意味着您可以用小字体和大字体阅读它。 它还针对打印、Web 和移动界面进行了优化。

你可以看到为什么 Open Sans 在网上很受欢迎。 事实上，超过 8400 万个网站以这种或那种方式使用它。 其中一些网站包括：

• 工作
• 瓦娜
• 环礁数码
• Ssense 杂志

2.机器人

Roboto 是设计师推荐的另一种流行字体。 它是一种刚性和几何形状的字体，同时具有“友好和开放的曲线”。 字母看起来彼此更紧密，使阅读更有节奏感。

Roboto 的字体系列包括 Roboto Condensed 和 Roboto Slab，使整个 Roboto 系列变得灵活。 它是一种几乎可以用于任何东西的字体，从标题到标题，再到普通的旧正文。 无论如何，它看起来足够专业和友好，可以放在您的网页上。

难怪超过 6.3 亿个网站（包括 Google 和 YouTube）虔诚地使用 Roboto。

3.拉托

Lato 最初是为企业网站设计的专业字体。 由于客户转向了不同的方向，因此该字体已发布供公众使用。 字母看起来时尚而优雅，有点像乡村主题的手写字母。

它在视觉上也很容易，使 Lato 成为正文的有力竞争者。 它在较大尺寸时也非常好，随着文本变大仍保持其独特的特性。

熟悉和温暖也是字体的重要主题。 Lato（波兰语中的夏天）在设计时也考虑到了夏天的感觉。 它很僵硬，但又不过分，散发出一种严肃但令人欣慰的语气。

在企业风险投资网站 Bundl 中可以找到 Lato 使用的一个很好的例子。

4.黑体字

这个是经典。 你可能听说过这个，根据你问的地方，它收到了很多褒贬不一的评价。 无论如何，Helvetica 仍然是网页的可靠字体。 它是一个非常灵活的字体系列，您可以将其设置为粗体、压缩字体，或者只为您的网页使用普通字体。

Helvetica 最初设计于 1957 年，是一种中性字体，几乎可以在任何地方使用。 它充分发挥了这一作用，迅速成为 Internet 上最流行的字体之一。 该字体使文字在远处更容易阅读，也非常适合标题。 无论文本的字体大小如何，它都保持清晰易读。

Helvetica也因其灵活性而不断与时俱进。 不同行业的品牌以不同的方式使用 Helvetica，即：宝马、摩托罗拉、雀巢、微软和苹果。 美国国家航空航天局和欧盟等政府机构也采用 Helvetica。

5.比邻星新星

Facebook 的前设计主管 Cameron Moll 发表了一篇关于 Proxima Nova 历史的文章。 他将这种字体描述为“数字界面的通用性令人难以置信，在许多不同大小下表现得像主力，并且在视网膜显示器上看起来非常出色。”

Proxima Nova 是一种字体，旨在捕捉 Futura 等字体的圆度和 Helvetica 等字体的几何形状。 然而，它在这方面并不是独一无二的，因为其他字体也试图做同样的事情。 在 2000 年代初期，Gotham 比 Proxima Nova 更受欢迎。 Moll 认为，Proxima Nova 在网络上的早期可用性提升了其作为标志性字体的地位。

从那时起，它就成为网上最流行的商业字体。

6. 蒙特塞拉特

Montserrat 字体的灵感来自同名的巴西社区。 它试图捕捉布宜诺斯艾利斯旧版式的氛围，并将其带入现代媒体。 正因为如此，蒙特塞拉特驱使观众怀旧和熟悉。 它为各种宣传材料定下了严肃而友好的基调。

它的流行归功于它的可扩展性和可读性。 因此，它的使用不仅限于在线媒体，还包括小册子和书籍等印刷媒体。 墨西哥政府的图形手册也将字体设置为官方媒体的标准字体。

7. 铁路

Raleway 是一种时尚的开源字体。 这意味着，它可以免费使用，并且可以在任何网页设计中真正站稳脚跟，尤其是其独特的“W”。

设计师喜欢使用 Raleway，因为它易于访问，也因为它与其他字体结合得很好。 字体本身是可读的，并为读者提供了一种欢迎的吸引力。 您可以将 Raleway 用于任何适合广大受众的项目。

8. Source Sans Pro

Source Sans Pro 是 Adob​​e 的第一个开源字体系列。 它旨在与用户界面配合得特别好。 它的圆形形状使字母在眼睛上看起来很舒服，同时最大限度地增加了每个字符之间的空间。

Source Sans Pro 最显着的品质是其易读性，您可以通过一些风格设计选择轻松区分相似的字符。 Source Sans Pro 的核心是可访问性。 它易于阅读且语气专业。 斯坦福大学和 Adob​​e 在其网站上使用该字体。

9. 欢乐满人间

如果您正在为您的网页寻找一种坚实而严肃的基调，Poppins 可能正适合您。 这些字母看起来很强壮且呈线性，并且与字体一样简单明了。

因此，您不必担心文本的可缩放性。 它也非常时尚和简单。 它是任何网页的可靠选择。

动画工作室 Wonderlust 是使用该字体的 810 万个网站之一。

10.格鲁吉亚

由 Microsoft 设计，Georgia 是一种旨在以数字格式可读的字体。 即使在低分辨率屏幕上，它也显得优雅而清晰。

它的优雅很大程度上归功于其罗马风格的设计。 但是，这根本不会阻止字符清晰可辨。 因此，数字和纸质阅读体验都感觉平衡。

Microsoft 会定期更新字体，使其外观更现代、更灵活。 可以购买更新版本 Georgia Pro。 不过，微软用户可以在微软商店免费获得该字体。

11. Playfair 展示

Playfair Display 读起来像 18 世纪的新闻纸，但这并不是一件坏事。 这种字体看起来很花哨，为您的网页营造了一种非常专业的基调。 它还有助于复杂的阅读，并且非常灵活。 您可以将它与其他字体搭配使用，营造出优雅的感觉。

如何有效地使用网页设计字体

您已获得要使用的字体列表，以及如何根据需要识别字体。 有效地使用它们是一个完全不同的过程。 以下是使用字体时需要注意的一些事项。

1.字体配对组合。

设计师混合搭配字体以达到更好效果的情况并不少见。 把它想象成穿过你的衣橱，让一件普通的白色 T 恤在你的一套衣服中脱颖而出。 或者将人们的目光吸引到您脚下的那些新踢腿上。

同样，您可以将读者引导至您网页中的某些点，即使他们本身并不引人注目。 你只需要围绕它构建其他一切，以确保人们真正关注那个特定的地方。

这包括在同一网页上为不同的目的使用不同的字体，或者像设置美观的配色方案这样简单的事情。 最大限度地利用色彩心理学甚至可以提高网页的转化率。

2.自定义字体创建。

如果您足够有创意，您甚至可以为自己的目的创建自己的字体！ 一些服务，如 Calligraphr，允许您将自己的笔迹转换为数字格式。 如果您正在寻找一种其他人可以使用的字体，请注意这通常是一个漫长的设计过程。

3. 许可和使用权。

大多数字体都是免费的，可用于多种用途，无论是个人用途还是商业用途。 然而，一些字体设计师对其作品的使用进行了限制。 例如，您必须向设计师付费才能将字体用于商业目的。

4.测试和优化。

任何网页的重要预发布阶段是测试和优化。 您必须仔细检查文本是否显示正确，字体是否正确，配色方案是否赏心悦目等。

推荐阅读：如何创建无缝的网页设计和开发工作流程

设置用于网站的字体

既然您已经了解哪些字体在网上常用，您就可以开始使用它们了。 开始的方法如下：

1. 下载并安装字体。

一些创意套件已经预装了可供使用的字体。 但是，如果您发现您喜欢的字体不在您的目录中，您可以简单地在线搜索它们。 您还可以选择要下载的格式（例如，是否使用 TTF/OTF、WOFF 或两者）。

许多开源字体都可以免费下载，但有些字体必须购买才能用于某些目的。 如果您计划将字体用于商业目的，请务必在使用之前阅读字体的许可条款。

找到字体后，只需将其下载到计算机上即可。 大多数字体将以 .ZIP 格式出现，因此您必须提取它们。 只需右键单击该文件，然后选择“Extract Here”即可。 您最终会得到一个可以安装的字体文件。

只需双击该文件，然后在弹出的预览屏幕上按“安装”。

2. 将字体嵌入您的网站。

如果您打算自己完成这项工作，您可以浏览不同的指南，例如本指南，了解如何使用不同的网络平台嵌入字体。

请记住，在向公众发布网页之前有一个网页设计清单。

3.确保跨浏览器兼容性。

更流行和常用的字体已经有 TTF/OTF 或 WOFF 版本，这意味着它们可以在所有主要浏览器中正确显示。 但是，您可能会遇到一种自定义字体，该字体看起来不太像预期的那样，因为它具有不同的格式。

如果你想坚持使用一种字体，你可以尝试一些在线指南并使你的文本跨浏览器兼容。 但是，建议您使用具有上述格式的字体，这样您的网页设计就不会受到损害。

网页字体优化技巧

您可能会遇到网页加载时间问题。 在这个时代，加载时间长是任何浏览网页的人的祸根。 您的用户和潜在客户也不例外。 以下是避免加载时间过长的方法：

1.不要使用太多的字体。

这个非常简单。 通常，您在网站上使用的自定义字体越多，意味着您的网络托管服务速度越慢。

字体使用的一般经验法则是坚持两种字体类别：一种用于页眉和标题，一种用于正文。 这样一来，您就可以避免托​​管服务超载，并且可以减轻您的设计团队的负担。 如果您频繁更改字体，您的查看器也可能会关闭。

2. 为每个浏览器使用优化的字体。

不幸的是，没有一种格式适用于所有浏览器。 创建网页时必须使用不同的格式。 借助 Google Analytics，您可以检查哪些浏览器和设备最受访问者欢迎。

如果您对使用替代字体的旧浏览器感到满意，则可以随时使用快捷方式。 但同样，不推荐这样做。

要点

现在尘埃落定，是时候发挥你的创造力了。 您可以自由使用此列表中的字体或浏览 Internet 以查找更适合您需要的自定义字体。 无论如何，以下是本文的三个主要内容：

• 使用与您的品牌声音一致的字体。 它改善了与您的受众的关系，并为新客户定下了基调。
• 让您的品牌以客户为中心。 网页设计的一个重要方面是您正在为用户创造一些东西来享受； 不仅仅是你。
• 不要害怕尝试。 这就是设计过程的目的。 你应该探索什么有效，什么无效。

今天就联系 Propelrr 了解更多关于网页设计概念的信息。 我们非常乐意为您提供帮助。 如果您需要更多帮助或更多信息，请通过 Facebook、Twitter 或 LinkedIn 与我们联系。

有关如何创建以用户为中心的网站和应用程序的更多技巧，请确保订阅 Propelrr 时事通讯以获得即时访问。