您的位置:首页 >商院 >

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

时间:2022-04-19 19:04:08 来源:

字体和文本大小是许多网站上被忽略的功能。像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个百分点的值理想。看看下面的图表,它说明了线条高度对可读性的影响。

奖励提示:

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


郑重声明:文章仅代表原作者观点,不代表本站立场;如有侵权、违规,可直接反馈本站,我们将会作修改或删除处理。