为网站选择合适的字体 - 指南

已发表: 2022-05-06

你永远不会有第二次机会给人留下第一印象。

这是我们听到人们重申并应用到我们生活的几乎每一个方面的事情。 它也包括我们的网站。

无论您是 SaaS 还是电子商务品牌,但当访问者第一次访问您的网站时,他首先注意到的就是布局和字体。 因此,在设计网站时击中靶心对您来说至关重要。

设计是一项紧张而繁琐的任务,因为它包含一系列相互配合的方面。

有些人可能更喜欢谷歌字体,而其他人可能会选择排版或草书。 但它是否有效取决于设计过程中涉及的其他因素。 你有导航、字体、布局、颜色模式、易读性等等。

至于字体,它们在网页上无处不在。 您会在标题、正文和其他任何地方找到它们。 因此,选择正确的字体可以利用您的整体网站前景。

今天,我们将讨论如何为网站选择字体。

为网站选择最佳字体的重要性

你的字体是你的品牌大使

您只有 0.5 秒的时间来确保您的访问者对您的网站和字体选择有积极的看法。 其中大部分,94% 取决于设计元素。

必须了解每种字体都有一组独特的特征。 因此,如果您想说服访问者相信您的专业知识,则必须通过网站的设计语言和字体选择来做到这一点。

它有助于增强整体用户体验

为什么我们要花时间和资源来建立网站? 因为我们希望我们的访客在使用它时感到舒适。

打造无可挑剔的用户体验需要您对细节有敏锐的洞察力。 这也意味着站在访问者的立场上,衡量一个特定的设计选择是否适合他们。

为网页设计选择好的字体是其中不可或缺的一部分。 它可以帮助您产生更多的访问者、更高的转化率并提高整体满意度。

网页字体分类

网页字体分类
Pexels 上的 Brett Jordan 拍摄的照片

我们已经提到,每种字体样式都有自己的故事和特征,这意味着您可以将它们分为几组。 此外,还有大量付费和免费字体供您选择并添加到您的网页中。

我们可以将网站字体分为以下几类——

衬线

示例 – Times New Roman、Garamond、MS Serif、Merriweather、Abril Fatface、Playfair Display、Georgia

Serif 字体是人类已知的最古老的字体类型之一。 文艺复兴时期的字体在过去以高可读性而闻名。

现代的 Serif 字体具有相同的传统,尽管也是数字化的。 您可以通过注意横向或对角线末端来识别它们。 它为设计语言增添了优雅,使其成为书籍和正式网站的绝佳选择。

大多数设计师将这些字体用于其他内容元素或在其网页上弹出的内容。 因此,您更有可能将它们作为标题、字幕、徽标和类似文本找到。

无衬线字体

示例 – Arial、Alegreya、Open Sans、Montserrat、Comic Sans、Verdana、Oswald、Roboto、Lato、Helvetica

Sans-serif 字体是 Serif 的现代迭代。 顾名思义,这些没有衬线,提升了极简主义的感觉。 在最初的日子里,计算机显示器还不够先进,无法以原始形式呈现衬线。 因此,设计师发现了更便于数字阅读的字体。

无衬线字体也不会让读者感到厌烦,并通过迎合更广泛的受众为设计师提供灵活性。 这些字体的最常见用户迎合年轻一代,并希望在他们的方法中被视为现代和专业。

Segoe UI 是 Windows 操作系统的默认字体,是一种无衬线字体样式。 Base 9 & 12 是您可能会遇到的最流行的 Adob​​e 字体类型之一,它属于 Sans-serif 类别。 SF Pro 是 Apple 平台上最受欢迎的字体之一,也属于这一类。

平板衬线

示例 - Sentinel、Clarendon、Adelle、Arvo

Serif字体的一种,也称为Slab Serif作为埃及人的字体。 这些是块状且外观坚固的字体样式,其对比度比传统的 Serif 低。

根据您选择的字体样式,这些字体的范围可以从老式复古到更现代的外观。 通常,您会发现 Slab Serif 作为显示文本的一部分,但这些也可用于设置正文文本。

脚本

示例——Arizonia、Tangerine、Great Vibes

顾名思义,脚本字体是最接近人类笔迹的字体。 它们很华丽,您经常会发现它们装饰网站的标题、徽标和类似的短语。

此外,这些可以被认为是非正式的。 关于 Script 字体最令人兴奋的事实是它们的高度情绪化。 这些可以引起反应(在大多数情况下是特定的)并引起访问者的大量关注。

鉴于它们的复杂性,它们的用途有限。 但是,大多数精心设计的网站都使用它们来增强整体感觉。

装饰性的

装饰性的

示例 – Helios、Casandra、Cherie Bomb、Countryside

装饰性字体也称为显示字体,是指不一定具有共同特征的多种字体。 识别它们的唯一共同方法是注意它们精致的形状和高度的装饰。

这些在 19 世纪开始流行,并且一直用于网页设计和广告目的。

与其他可以在不同情况下同化的字体类型不同,装饰性字体有其局限性,即它们中的每一种都散发出特定的情绪(快乐、恐怖或任何其他)。 这些是具有高度表现力且易于识别的原始字体。

这些是您只能在标题中使用的粗体字体,我们建议您不要将它们用于您网站的正文。 以简约的方式吸收它们进行网页设计将使网站脱颖而出并给访问者留下持久的印象。

字体和字体之间的区别

常见的概念是字体和字体具有相同的含义,但它们不是同义词。 前者是指具有共同特征和特征的字体家族,而后者是指单个字体。

例如, Arial 是一种字体,而 16pt Arial Bold 是一种字体。

为网站选择默认字体时要记住的事项

我们都知道,世界上有大量无可挑剔的付费和免费字体。 但是在设计网站时,还有很多东西在起作用,你不能选择一个你喜欢的东西。 为网站选择最好的字体是一件整体的事情,需要对其他因素进行深入研究和理解。

以下是在为网站选择最佳字体时需要考虑的事项 -

正确掌握基础知识

在为网站寻找好的字体之前,您必须对所涉及的其他内容进行排序。 这些包括;

  • 了解您的目标受众
  • 网站的目的
  • 您的品牌存在的原因
  • 它承载的个性

像亚马逊这样的品牌不会使用恐怖字体(除非在特定场合,如万圣节)。 您使用的字体类型主要取决于您的目标受众和您想要产生的情绪。

例如 -无衬线字体表示极简主义和简单性。 它们还使您倾向于传统价值观和灵活性。 衬线字体具有代表正式表示的装饰笔触。

确保您的选择与您的设计目的同步

一切背后都有一个目的,您的网站设计也有一个目的。 您的选择最终将取决于您的目标受众以及您希望通过您的网站唤起的整体情绪。 此外,几个设计元素在网页的整体呈现中起着至关重要的作用。

所以这里有一些你必须记住的元素——

字距调整、领先和跟踪

这三个术语指的是网站中的间距元素。 字距表示两个相邻字母之间的间距。 行距定义文本行之间的间距,字母组之间的间距称为跟踪。 您选择的间距使您能够确定字体的外观。

对比

对于网站,对比度是指文本的呈现方式。 网站设计师使用许多微妙的技术来使某些元素脱颖而出。 这些包括颜色、形式、尺寸、结构和重量,以增加关键区域。

对比
摄影者 苏西黑兹尔伍德 像素

结盟

对齐是指您将文本放置在网站上的方式。 它可以是左、右或中心。 完全合理的文本提供了一种更正式的方法,而粗糙的方法适合打算更加非正式和友好的网站。

通常,左对齐的文本是最易读的。 要记住的另一个方面是文本块两侧之间的距离。 您可以通过将平均字符数设置为最多 80 个字符(包括空格)来设置最佳行长。

如果您正在寻找更正式的外观,则可以选择完全合理的文本。 它使字体在两侧均匀排列,消除了迷失方向的感觉。

明智地使用字体

鉴于提供的字体和字体众多,您在做出设计选择时很有可能会迷失方向。 因此,您必须退后一步,了解您想要创建的最终产品。

下一步是相应地设置字体样式。 这些设计选择反映了您所迎合的受众,并对您的品牌方法有基本的了解。

明智地使用字体
Pexels 上的 Brett Jordan 拍摄的照片

因此,当您最终确定设计元素时,请问自己以下问题 -

  • 你的品牌的本质是什么?
  • 你想更加强调实用性,还是想脱颖而出?
  • 您的网站将包含什么样的图形? 如果它是图形繁重的,你可以把前面的部分调低,让其余的部分来说话。 如果相反,请确保您的字体选择能唤起您想要的情感。
  • 是基于项目的吗? 如果是,它是什么类型的任务,涉及的要求是什么?

不要忘记考虑加载时间

慢站点等于低流量。 没有多少人拥有等待您的网站加载一个又一个元素的带宽。 设计元素错误或设计选择过度可能会使您的网站变得迟缓并影响您的参与度。

如果您的加载时间过长,您应该查看您采用的字体和样式的数量。 确保只选择那些必要的。

选择网络安全字体

网站字体的选择通常代表了您如何描绘您的品牌。 例如,亚马逊、微软和迪士尼等全球品牌使用不同的字体,这些字体已成为它们的代名词。

即使您不能为自己做同样的事情,您也必须确保您的选择被认为是网络安全的。 该术语代表一组可以适应不同环境的动态字体。 简单来说,这些字体可以显示在阅读器的屏幕上,即使它们没有安装在他们的设备上。

如果您不使用其中之一,浏览器将恢复为作为备份保存的通用字体并在其中显示您的 Web 内容。 它可能会导致功能和设计问题,导致消息传递不完整并困扰您的品牌。

几年前,要找到足够的网络安全字体是一项挑战,但今天有大量的付费和免费字体供您选择和吸收。

例如,Times New Roman 和 Arial 是 Web 安全字体,分别属于 Serif 和 Sans-serif 类别。 如果您正在寻找一些装饰性的东西,Script MT 和 Luminari 分别是属于 Cursive 和 Fantasy 类别的自适应字体。

是时候使用混合字体以获得最佳效果了

为网站选择最好的网络字体是关于计算混合和匹配的。 每种字体都有其特点,我们建议您选择最多三种不同的字体(主要、次要和三次),以最终散发出阶级和存在的意义。

再加上字距调整和前导等因素,你就有很大的腿部空间来做对了。 同样重要的是要了解某些字体成对使用效果很好,而其他字体则不行。 所以不乏选择,但您必须确保它与您的品牌愿景保持同步。

此外,鉴于当今互联网用户的动态使用模式,必须使用网络安全字体来动态调整屏幕尺寸。 它确保最终用户按预期查看网页,即使他们没有安装特定字体。

最终,字体选择取决于许多因素,您必须取得适当的平衡才能获得最佳效果。