响应式网站字体大小指南

来源:Eidea编辑:xiemengdan浏览量:1014

移动网络排版指南


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


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




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


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



桌面网络排版指南


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


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


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


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


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


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

现在,对于交互量很大的页面,较小的文本大小是完全可以接受的。实际上,根据您的用户一次性使用的数据量,即使是18px的文本也会非常大。查看您的(网络)收件箱,查看Twitter,查看任何需要扫描阅读的应用程序,查看显示数据的应用程序 – 您将很难找到18px文本的持续段落。相反,14px-16px是常态。但是不会只有一种字体大小。对于不太重要的东西,可能会有更小的尺寸,对于更重要的东西(标题和副标题以及子字幕等),可能会有更大的尺寸,并且它们将在一个巨大的大杂烩中混合在一起。当您设计交互式桌面网站时,请记住这一点。您需要根据具体情况修改文本样式。一致性很棒,但是当字体大小只有一个px太小时, 当他们无法轻易找到他们正在寻找的东西时,他们的体验会很糟糕。

响应式案例欣赏

西安国际社区时尚小镇

地产运营

百宝仓

响应式企业官网设计

八爪鱼教育

响应式企业官网制作