响应式网站字体大小指南

如果您正在设计可在移动设备上的网站或应用,则只有一条硬性规则:使用至少16px大小的文本输入字体。

2019年4月15日

移动网络排版指南

如果您正在设计可在移动设备上的网站或应用,则只有一条硬性规则:使用至少16px大小的文本输入字体。 如果文本输入的字体大小小于此值,iOS浏览器将放大文本输入的左侧,通常会遮挡右侧并强制用户在使用文本框后手动缩小。

下图就是发生这种情况的例子:

移动网络里关于字体大小的所有内容基本上都遵循一个指导原则:

使用大约16px的正文字体大小。 当您希望手机上的正文与印刷良好的书中文本一样可读时,对于辅助文本,不重要的标签和标题,请使用较小的一些尺寸 – 例如13px或14px。 我不建议只使用一种字体大小,因为它太容易与普通文本混淆。 当文本不那么重要时,您需要对其进行样式设置,以便清楚地传达较不重要的内容。

黄金标准将在实际设备上查看您的设计。 我不能高度推荐这种做法,因为笔记本电脑屏幕上的移动应用程序设计的感觉与您手持它时的方式不同。 作为初始设计师,几乎每次我在移动设备上打开我在桌面上设计的页面时,我都感到震惊。 字体大小,间距……一切都没了。 因此,请使用Sketch Mirror或Figma Mirror或任何适合您的应用程序,并在设备上查看您的设计。

后,对于有关移动Web字体大小的任何其他问题,请参阅材料设计指南,该指南清晰,一致且巧妙(尽管不简洁)。 我作为设计师的年龄越大,我就越相信即使苹果公司拥有所有的设计信誉,谷歌正在走遍它们。

桌面网络排版指南

在为桌面网站或Web应用程序选择基本大小时,您可以将大多数设计分解为以下两种类型之一:1.文字很重要的页面。 文章,博客,新闻等。这些是用户在页面上的主要目的是阅读的页面。 互动方面很少 – 也许只需点击几个链接。2.Interaction-heavy pages。 涉及更多悬停,点击,搜索列表或表格中的项目,编辑,打字等的应用程序。页面上可能有大量文本,但这不是您直接阅读的书籍。需要一两个例子吗? 此页面是一个文本密集的页面。 您的Facebook Feed是一个交互密集的页面。 每个问题都略有不同,所以我会分别处理它们。 请记住,两者都可能有用。 疯狂的网络应用程序的“关于”页面仍然是文本繁重的。 香草博客上的“联系”页面仍然很重要。

简而言之,对于文本较多的页面,字体大小要更大。 如果人们长时间阅读,不要让他们产生紧张的情绪。 现在,每种字体都不同,即使尺寸相同。我们正在谈论以下几种字体大小:

16px – 文本较多页面的绝对最小值。

18px – 一个更好的字体大小的开始。 你不打印出单行间隔的Word文档; 你是为那些坐在离他们十年前的监视器几英尺远的人们写的。

20px – 起初可能会感觉很笨,但总是值得在您的设计应用中尝试。 网络上看起来最好看的文字较多的网站,Medium.com,默认文章大小为21px。

与我在移动网络部分中提到的类似,这里有一个很好的经验法则:您的网站文本读起来应该像一本精心制作的书一样。

现在,对于交互量很大的页面,较小的文本大小是完全可以接受的。 实际上,根据您的用户一次性使用的数据量,即使是18px的文本也会非常大。 查看您的(网络)收件箱,查看Twitter,查看任何需要扫描阅读的应用程序,查看显示数据的应用程序 – 您将很难找到18px文本的持续段落。 相反,14px-16px是常态。 但是不会只有一种字体大小。 对于不太重要的东西,可能会有更小的尺寸,对于更重要的东西(标题和副标题以及子字幕等),可能会有更大的尺寸,并且它们将在一个巨大的大杂烩中混合在一起。

现在这里是重要的部分:对于任何交互繁重的页面,字体大小由一些自上而下的法令(“类型比例”)而不是每个文本的特定需求和相互作用驱动它们。例如:事件名称为12px medium,这是Material Design准则中完全不存在的字体样式。 然而,鉴于它们需要在仅1440px宽的屏幕上放置7列,并且许多事件非常短,这是理想的字体大小选择。 任何较小和易读性都会受到影响。 任何更大的和事件名称将被过于频繁地切断。 设计是权衡,如果你不能说出你正在做出的权衡,你可能会把它放在错误的地方。

一天中的小时标签(“12pm”,“1pm”等)是font-size:10px。这是完全不符合Material Design准则的另一种风格。然而,横向空间非常宝贵。无论如何,每个事件都标有其开始时间。为什么不让左侧标签变小?·日期是48px。同样,在材料设计指南中找不到。现在,在这种情况下,我不知道为什么他们没有使用45px,这是官方的“显示2”尺寸,但我会说:如果是我设计,我可能会做出48px大小粗体,在这里,粗体将是一个问题。这会引起太多关注。所以无论如何我都会改变风格。当您设计交互式桌面网站时,请记住这一点。您需要根据具体情况修改文本样式。一致性很棒,但是当字体大小只有一个px太小时, 当他们无法轻易找到他们正在寻找的东西时,他们的体验会很糟糕。

 

原文链接

翻译:王扬

编辑:王扬

责编:王扬

发表评论

电子邮件地址不会被公开。 必填项已用*标注