如果您希望您的
网页设计能被阅读和引流,请将字体设计为正确的大小!但是什么是正确的字体大小,您如何将其应用到您的网页设计中?这篇文章为您提供了一些针对响应式网页设计中正文的实际示例。准备好了——然后让我们调整大小,如何调整您的字体大小!
从正文开始并将其设置为默认大小1em,在大多数浏览器中计算为 16 像素。使用相对单位,然后按比例放大字体大小和理想情况下的布局,并在更大的视口上放大,因为我们可以假设观众离得更远。
字体的好坏取决于它的设置。您可以为您的网页或应用程序设计选择最好的字体,并且在将字体设置得如此之小或以其他不合适的方式进行设置时,仍然可以大放异彩(双关语)。在设置文本时,排版的三位一体是:字体大小,行高(或前导),和线长(或测量)。这三个参数彼此密切相关,如果您的文本最容易阅读,就会产生影响。所以在调整字体大小时,其他参数也可能会随之调整。我总是从选择合适的字体开始,然后设置合适的字体大小,然后注意行长和行高。
与选择合适的字体一样,问问自己,您的文本的主要用途是什么?它是一种长阅读格式吗,比如博客?然后正文是您节目的明星。它是一个投资组合还是一个更具营销意义的炫耀网站?然后显示文本开始发挥作用。它是具有非常短的精确信息的应用程序或 UI,那么功能性文本是您的主要角色。以下是我在项目中使用的值。将它们用作有用的指南。显示文本,如标题或拉引号,设置得更大。理想情况下,正文应该围绕浏览器默认设置。功能性文本可以稍微小一些。
文章主体默认值:16px或1em,在移动设备上:使用默认值,有时会缩小 10%,在桌面上:向上直到24px或1.5em。我看到很多网站将正文设置得太小。在视频中,我展示了一个酒店网站的可怕示例,其中正文文本在桌面上仅设置为 11 像素,这很荒谬。即使是移动设备,它也太小了。
显示文本(标题 1)默认值:40px或2.5em对于<h1>,移动设备:32px或2em更小,因为它占用了太多空间,在桌面上:向上直到64px或4em。
我将其用作字体大小的最大值。对于其他标题,您可以选择介于两者之间的一些值,这些值仍将创建视觉层次结构。在大多数情况下,您只需要将您的样式设置<h1>为<h4>. 将<h4>可能在一个更大胆的重量或不同的字体大小相同的正文,而是集,所以它仍然站出来作为标题。
功能性文本(标题、导航)默认值:12pxto14px或0.75emto0.875em,在移动设备上:不要低于默认值,它已经很小,在桌面上:上升到16px或1em。此文本可以小于正文文本。这是因为否则您将很难将其融入您的设计中。不过,它应该仍然可读。这里的一个提示是使用稍强的重量(如中等)并增加跟踪(1% 或 0.01em)。