5个简单的字体和文本技巧来现代化你的网站

字体和文本大小是许多网站上被忽略的功能。像Wordpress和Wix这样的CMS平台上的默认设置是14像素 (px) 和单间距。一些高级主题具有自定义字体，尽管它们几乎总是太小。但是，通过修改网站的文本大小，间距和字体系列，您可以增加用户在网站上的时间，页面浏览量，和可读性-所有这些都会导致较低的跳出率和较高的搜索引擎排名。以下是通过更新内容外观来提高网站可读性和排名的五种方法。

1.文本大小

虽然没有神奇的字体大小，但如果你使用小于12px的字体大小，谷歌可能会贬低你的网站。Google越来越重视可用性和用户体验，如果您必须缩放网站才能阅读它，那绝不是用户友好。

12px的字体大小是可以接受的，并且是Word等电子邮件和文档软件的常见默认值。但是，网页受益于更大的字体大小，例如18px甚至20px。

在您或您的开发人员开始在您的实时网站上乱搞字体大小之前，重要的是要确保它看起来不错。在您的网站上测试字体大小的变化，没有比简单地按ctrl，在Windows pC或命令和Mac上放大更简单的方法了。要缩小，请按ctrl和-或命令和-。

你会发现你的网站的内容可能看起来不错，甚至可能更好，110%，甚至125%。如果是这样，请让开发人员将字体大小更改为原始字体的125。如果原始的是14px，则125的百分比将是17.5px，例如，其可以向下或向上舍入，并进行较小的更改。

文本大小示例:

下图说明了在有关Google的Wikipedia页面上使用浏览器缩放功能。

2.移动设备的文本大小

由于移动设备提供的屏幕空间要少得多，因此您的字体大小需要对移动设备友好。对于段落形式的常规内容，我为网站推荐的18px到20px的建议可以在从台式计算机到手机的任何设备上使用。但是对于True Blue网站上的标头，我们偶尔会变大-在某些情况下为40px到50px，甚至更大。如果你这样做，你需要缩小它的移动设备，否则你的可读性将受到影响。小字体也是如此。也许您的网站表单在字段上方显示一个小标签，字体大小为12px。在移动设备上，这可能太小而无法阅读，尤其是对于老年人。

移动友好的versusnot移动友好的网站示例:

3.文本/字体系列

可读性是必须的，但这并不意味着您只能使用Arial，Helvetica或Times New Roman等字体系列。虽然在你的网站上使用你个人最喜欢的字体可能不是最好的主意，比如Comic Sans (yikes!)，但有大量好看的、免费提供云服务的字体。

像Roboto或Open Sans这样的字体变得非常流行。使用不同的字体，如其中之一，有助于你的网站和你的品牌，在竞争中脱颖而出。并且，如果使用得当，非典型的字体可以增强您网站的整体美观性和可读性。这是一个有趣的事实: Roboto由Google创建，是Android设备的主要字体。虽然它在首次发布时受到了很多批评，但自那以后，该字体已被4000万多个网站使用。

4.文本颜色和对比度

为了可读，字体的颜色必须清晰并提供足够的对比度。许多网站都安全地使用它，并使用白色背景和黑色字体。但这并不理想。

许多人患有称为Irlen综合征的疾病，这会导致处理视觉信息 (包括对比敏感度) 的困难。当你有对比敏感度时，白色背景上的黑色文本看起来像这样:

蓝色背景上的红色文本可读性不高，是吗？找到中间立场很重要。在白色背景上，字体颜色的安全选择是深色的灰色，例如 # 30303a。此hexcode是我们在网站上使用的字体的特定颜色，True Blue Life Insurance。

5.文本间距

通过使用边距和划片，在整个网站的所有元素上应用适当的间距。例如，这些是标题下方的空白，或者标题中菜单项上方和下方的空白。

除了元素之间的间距外，line height (确定段落中每一行文本之间的空白量的CSS属性) 也同样重要。

行高示例:

与文本大小一样，没有线高的魔术数，但我发现1.5em或150个百分点的值理想。看看下面的图表，它说明了线条高度对可读性的影响。

奖励提示:

最好的内容是你可以阅读的内容。不是每个人都有完美的视力。让我们的客户无需斜视即可轻松阅读我们的内容。花时间测试您网站的字体系列、文本大小和间距。通过实施这些建议，您网站的用户统计和搜索引擎排名将飙升。