响应式网站字体大小指南

时间：2023-09-29 23:42:01 | 来源：网站运营

时间：2023-09-29 23:42:01 来源：网站运营

响应式网站字体大小指南：移动网络排版指南

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

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

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

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

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

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

桌面网络排版指南

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

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

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

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

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

总之在您设计交互式桌面网站时，请记住这一点。您需要根据具体情况修改文本样式。一致性很棒，但是当字体大小只有一个px太小时，当他们无法轻易找到他们正在寻找的东西时，他们的体验会很糟糕。

易点科技成立于2009年，一直专注于IT顾问咨询、信息平台系统开发、企业网络方案解决与运营。服务内容包含pc+手机响应网站建设、B2C购物商城定制开发、微信公众号定制开发、企业管理小型系统定制开发。拥有先进的网页设计制作理念、可靠的质量保障体系。十年专注！已服务过数百家知名品牌企业,积累了众多行业标杆级的经典案例。