网站设计:英文网站字体排版的10个基本规则

建站问题
2024-10-07 10:45:52
文章摘要

排版在这个过程中起着至关重要的作用:网络上的信息95%以上的是在书面语言的形式存在。

排版在这个过程中起着至关重要的作用:网络上的信息95%以上的是在书面语言的形式存在。良好的文字排版使阅读的行为轻松,而体验不好的文字排版导致用户关闭网页。“网页设计是95%排版设计”:


优化排版是优化界面可读性,可访问性,可用性,使整体平衡的关键。


换句话说:优化网站文字排版也是优化用户界面的一种方式。 在下面的文章中,我将提供一组帮助你提高文本内容的可读性和易读性的规则。


1.尽量使用少的字体


使用超过 3 种不同的字体会使网站看起来缺乏结构化和不专业。 注意,较多的字体样式使用一次都可能破坏所有布局。


般来说,将字体数量限制在最小限度(两个算多的,一个是正好的)。 如果你使用一个以上的字体,确保字体具有系列感,且基于其字符宽度是相得益彰。 采取下面的字体组合的例子。 Georgia和Verdana(左)的结合,共同创建一个和谐的配对相似的价值观。 与此相比,Baskerville和Impact( 右),极大地掩盖了衬线相对应的不匹配度,形成较好的视觉体验。


2.尝试使用标准字体


字体嵌入服务(如Google Web字体或Typekit)有许多有趣的字体,可以为您的设计提供创新、新鲜的和意想不到的效果,它们使用起来也非常方便。以Google为例:


选择任何字体,如Open Sans。


生成代码并粘贴到HTML文档中。


完成!


这个情况下不会出错么?


其实这种做法有两个问题


不是每个人开启浏览器都可以访问到同一种字体,这意味因为您选择的用户体验较好的字体将无法展示在所有用户面前。


用户更熟悉标准字体,因此可以更快地读取它们想要的信息。


除非您的网站有足够吸引人的自定义字体(如品牌宣传或创建身临其境的体验),否则最好使用系统字体。更为安全的做法是使用的系统字体是:Arial,Calibri,Trebuchet等。请记住,良好的文字排版会将读者吸引到内容,而不是文字本身。


3.限制文本线长度


每行放置适当的字符数量是文本可读性的关键,它不仅是你的设计,决定你的文本的宽度,它也应该是一个可读性的问题。从Baymard研究所考虑有关可读性和文本线长度的建议:


“如果你想要一个很好的阅读体验,你应该限制每行大概 60 个字符。每行拥有适当的字符数量是文本可读性的关键。”


如果一行文本太短,眼睛必须经常转回,打破读者的节奏。 如果一行文本太长,用户的眼睛也难长期专注于单行文本。


对于移动设备,基本保持每行30- 40 个字符。以下是在移动设备上查看的两个网站的示例。 第一个使用每行(每行字符印刷和桌面的最佳数量)50- 75 个字符,而第二个使用最佳30- 40 字符。


在网页设计中,您可以通过使用像素限制文本块的宽度来实现每行最佳数量的字符。


4.选择各种尺寸的文本元素


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


确保您选择的字体在较小的屏幕上清晰可辨!尝试避免使用草写脚本的字体,如Vivaldi(在下面的示例中):虽然它们很漂亮,但它们很难阅读。


5.使用可区分字母的字体


许多字体使得很容易混淆类似的字母形式,特别是与“i”和“L”(如下图所示)以及差的字母间距,例如当“r”和“n”看起来像“M”。所以当选择你的类型时,请务必在不同的上下文中检查你的类型,以确保不会为你的用户造成问题。


6.避免所有字母大写


所有大写字母 – 意思是所有字母大小写的文本 – 在不涉及阅读的上下文中(例如首字母缩略词或标识)看起来都很美观整体,但是当您的消息涉及阅读时,请勿强制全部使用大写字母。正如Miles Tinker所说,在他的具有里程碑意义的作品“可读性”中,全部大写增大了扫描和阅读的速度,与小写类型相比。


7.不要尽量减少线间距


在排版中,我们有一个特殊术语,用于两行文本之间的间距(或行高)。通过增加行高,可以增加文本行之间的垂直空白空间,通常提高可读性以换取屏幕空间。有一个基本规则,标题空间应该是字符高度的30%,以提高可读性。


正如Dmitry Fadeyev所指出的那样,正确地使用段落之间的空白已被证明可以将提高20%理解度。使用空白的技能可以为用户提供可转化知识的内容,然后剥离无关的细节。


8.确保您有足够的颜色对比度


文本和背景不应该使用相同或相似的颜色。文本越明显,用户能够更快地扫描和阅读它。 W3C建议对身体文字和图像文字的对比度如下:


小文本的背景对比度应至少为4.5:1。


大文本(14pt/ 18pt常规和以上)应该具有至少3: 1 的对比度与其背景。


一旦您选择了颜色,绝对有必要在大多数设备上与真正的用户进行测试。如果任何测试显示阅读文字有问题,那么您可以确保您的用户具有完全相同的问题,再来统一进行解决。


9.避免将文字着色为红色或绿色


色盲是一种常见的情况,特别是在男性中(8%的男性是彩色盲人),建议使用除颜色以外的其他线索来区分重要信息。另外,避免使用红色和绿色单独传达信息,因为红色和绿色色盲是最常见的色盲形式。

扫码关注我们
小程序二维码

查看演示

微信公众号二维码

关注微信公众号

你觉得这篇文章怎么样?

本文标签: 英文网站设计

关于小二CMS

高端定制网站领域著名服务商

我们立足合肥,业务覆盖安徽、全国及全球市场。我们凭借一支经验丰富、创意独特、协作无间的专业技术团队,专注于将最优技术通过高效简捷的途径呈现给客户,量身打造最佳解决方案。我们致力于通过持续努力,成为客户在信息化领域值得托付、共创价值的长期战略合作伙伴,协助客户在新经济时代敏锐捕捉商机,拓展发展空间,构筑强大竞争力。

小程序开发
公众号开发
高端网站开发
系统开发
商城开发
外贸网站建设
网站优化推广
安全运维

扫描二维码与小二CMS创始人沟通

7×24小时专业技术支持

高端网站定制
系统开发(OA、CRM)
商城开发
外贸网站建设
公众号/小程序
安全运维
创始人微信二维码

扫一扫添加微信

关于我们

超讯兴网络科技一家专注于高端网站建设、微信小程序开发、移动端应用研发及企业数字化转型服务的技术驱动型企业。我们致力于通过前沿技术研发实力与匠心独运的创意设计,为客户提供从策划、设计到开发、部署运维的一站式数字化解决方案。

自2013年成立以来,我们已成功交付3000+个精品项目,服务客户遍布金融、零售、制造、教育、医疗、互联网等多个行业领域。我们拥有资深的技术团队与丰富的实战经验,擅长复杂业务逻辑梳理与建模、高性能系统架构设计、跨平台应用开发、用户体验(UX/UI)深度优化及企业级系统安全保障。

我们相信,每一个成功的项目都源于对客户需求的深刻理解与极致追求。选择超讯兴网络科技,就是选择一个懂技术、懂设计、更懂您业务痛点的数字化成长伙伴,让我们携手将您的品牌愿景与市场机遇转化为可落地的数字现实,共同驱动业务增长与品牌价值升级。

致力于通过数字化技术赋能企业,帮助客户实现业务增长与品牌升级,成为您值得信赖的技术合作伙伴。

我们的优势
01

七年专注高端网站建设

02

服务上千企业积淀厚口碑

03

资深策划洞悉行业与用户

04

前沿技术栈紧跟时代发展

05

前端代码深度优化SEO友好

06

千家成功案例品质可信赖

07

精英团队高效协同创精品

08

多重防护保障数据安全

09

独家源码出售握牢自主权

10

完善售后体系全程护无忧

11

快速响应需求变更迭代

12

架构灵活支持二次开发

13

云服务器部署稳定可靠

14

免费提供一年技术支持

15

项目按期交付信誉保障

16

数据定期备份安全无忧

我们的不同

我们是一支年轻而充满激情的团队,痴迷代码,沉醉设计,坚信设计与编程不仅是工作,更是生活的信仰——"非设计,不生活;无兄弟,不编程!"

团队成员来自国内外顶尖设计公司与软件企业,精通网站设计与开发,已成功交付数百个项目,涵盖品牌官网、电商平台、小程序及移动端应用。

使命 以技术之力,助力改变命运
宗旨 客户第一,品质至上
信念 客户的成功,才是我们真正的成功

产品演示

产品演示二维码

请使用微信扫描二维码

查看产品演示

QQ客服

扫码添加好友,随时为您解答

QQ二维码

扫描二维码添加客服

QQ号:460623785
或保存二维码在QQ中识别

微信客服

扫码添加好友,随时为您解答

微信二维码

扫描二维码添加客服

微信号:
或保存二维码在微信中识别

微信咨询
QQ咨询
电话咨询
在线客服
回到顶部