跳到主要内容

如何为小屏幕选择合适的字体

有吸引力且有效的排版是成功网站设计的关键组成部分。在移动环境中尤其如此,其中误差幅度与用于查看这些网站的屏幕一样小。

如果您的字体选择适用于桌面,是否可以安全地假设它们适用于移动设备?大屏幕完全可以接受的许多印刷样式和做法会在较小的移动屏幕上出现问题。

这意味着为了向移动访问者提供最佳体验,我们必须考虑网站的移动排版,并确保无论使用哪种设备访问我们的网站,他们都会看到一个易于使用和愉快的有吸引力的设计阅读。

简而言之,排版必须被视为使网站响应的重要因素。为了实现这一目标,我们应该更好地了解人们在移动设备上阅读的方式,因为我们遵循移动排版的最佳实践。

用户如何阅读移动设备

Fingers typing on laptop and mobile

人们与移动设备的关系比与办公室或家用电脑的关系更密切

前往当地的咖啡馆或餐厅,或使用移动设备和笔记本电脑在各种人们经常光顾的任何地方。观察他们的行动。您会注意到两种类型的用户和设备之间的距离存在显着差异。

仔细观察,观察移动阅读器时您会注意到的第一件事就是它们与屏幕的接近程度。与他们的办公室或家用电脑相比,人们与他们的移动设备有更密切的关系 - 这种关系发生在12.6英寸而不是离屏幕20到23英寸

由于移动设备的屏幕较小,因此需要将其靠近以便有效地读取该屏幕上的文字。这意味着移动用户越来越接近他们的设备和网站设计。移动排版的关键是可读性 - 如果用户无法阅读,您的设计就无法正常工作。

照明和运动

观看人们在移动设备上阅读时应该注意的另一个因素是他们这样做的外部条件。照明,移动和互联网连接都是变数。特别是,照明是一个难以破解的变量,并且与观看者能够轻松地阅读屏幕直接相关。

关于运动,考虑在高速公路上行驶并经过广告牌。虽然你正在移动并且排版仍然是,但概念是相同的:抓住并引起读者的注意。

更有趣的是考虑人们在使用移动设备时必须应对的物理障碍,即他们的手和屏幕本身的边缘。当人们使用台式计算机阅读在线内容时,他们使用鼠标或滚动键盘进行导航。在移动触摸屏上,手指充当导航必然阻挡屏幕的一部分。

从视图中隐藏

除了导航之外,甚至用户持有设备的方式也倾向于从他们的视角覆盖优质房地产。说到该屏幕的视图,因为它非常小,它一次只能显示如此多的内容。

这意味着可以在移动设备上切断容易在较大屏幕设备上显示的大块内容,超出设备屏幕的界限。

在移动设备上阅读时,读者必须面对的问题并不缺乏。在我们的设计工作中考虑这些挑战是更好的移动排版的第一步。

响应式网页排版的基础知识

Site on monitor and mobile devices

您可以将网站设置为使用一组排版样式用于较大的屏幕,然后根据较小的屏幕调整这些样式

由于实践,网站排版不需要是“一刀切”的情况响应式网页设计。通过响应式网站,CSS媒体查询可用于根据访问者的屏幕大小更改网页的视觉样式。这意味着您可以将网站设置为使用一组排版样式用于较大的屏幕,然后根据较小的屏幕调整这些样式。

与专为打印或台式机设计的字体不同,移动和响应式排版不是使用点系统测量的,而是使用像素,ems或rems设计的。为什么?因为这些单元的基于百分比的结构更灵活,并且更适合在多个设备上使用。这里的目标不是在所有屏幕尺寸上创建一致的外观,而是设计一致的正面阅读体验,无论屏幕大小如何。

在开发响应式Web排版时,您必须注意一些关键领域以确保可读性:

  • 字体
  • CSS样式(对齐,大小,行长等)
  • 加载时间

首选移动字体

您在设计中使用的字体将在其中发挥重要作用该网站在移动设备上阅读的难易程度

太复杂和薄的字母不仅难以阅读,特别是对于有阅读障碍或视力障碍的人,但也往往会在较小的尺寸下分解。这意味着当为移动屏幕缩放字体时,会出现可读性挑战,尤其是在没有Retina屏幕的设备上。

为了避免这个问题,许多设计师选择在移动网站和应用程序中使用sans-serif字体。简单,直接的字体形式的无衬线字体倾向于更好地扩展,并在更广泛的屏幕尺寸和分辨率下实现更易读的呈现。

不同屏幕的不同字体?

在决定在您的网站中使用的字体时,请考虑您是否希望您的网站在所有屏幕尺寸上使用相同的字体,或者您是否愿意更改不同屏幕的字体。

如果你想使用相同的字体,你应该寻找可以扩展大小的字体。

如果您愿意根据需要调整字体选择,您可以使用衬线或更多涉及的字体用于较大的显示,然后将它们更改为更简单的字体用于较小的屏幕(始终确保用真实用户测试您的选择)。

排版样式

Letter a on monitor and mobile devices

两个最关键的字体考虑因素是大小和空间

使用几行CSS,您可以显着改变网站文本内容的整体外观,包括大小,行高,行长等。所有这些样式都在网站的可读性中发挥作用,对于移动屏幕非常重要。

话虽这么说,选择合适的移动字体时最关键的两个考虑因素是尺寸和空间。

尺寸

由于不同的字体以不同的大小呈现,因此没有必须用于移动屏幕的默认字体大小任何小于16像素的东西都会变得难以阅读任何屏幕更不用说会增加关于文本行的开头和结尾位于何处的混淆。

另一方面,太大的文本会产生尴尬的中断(对于我们网页设计师很少使用的连字符也是如此。)对于移动布局,字体大小通常设置为EM而不是像素这样字体大小是相对的,准备响应不同的屏幕参数

空间

对于较小的屏幕 - 特别是在垂直设备上 - 空间非常重要。想一想用户挣扎的介绍中提到的条件:照明,手指或案例的屏幕遮挡等。在文本之间和周围添加额外的空间是至关重要的。

移动设备的小屏幕已经使得难以读取设置得太紧密的文本行。事实上,适用于桌面屏幕的行高可能对于移动阅读来说更具挑战性。

一个好的起点可能在10%到20%的范围内,但这样的事情是非常动态的,因为不同的字体需要不同的设置。线高至少为1.5是一个很好的起点,因为它会让读者感受到轻快但可读的文字

布局

不仅尺寸和空间,而且布局可以对移动设备的整体阅读体验产生巨大影响。移动设备在线路长度方面面临的挑战是线路长度太短。行长非常小的文本会抛弃正常的读取流量。

理想的情况下,较大屏幕的线长应约为65字左右。对于小屏幕设备,该数字应该小得多。对于狭窄的内容栏,报纸长期以来一直在争取约39字的行长。对于移动设备上的窄网站专栏,这是一个很好的指南。

对准

Lorem ipsum on monitor and mobile devices

对于移动屏幕,默认左对齐通常是最佳选择

默认情况下,网页文本左对齐。许多设计师喜欢将这种对齐调整为中心对齐或甚至完全证明其设计的某些部分。在某些情况下,这些样式可能效果很好,但它们通常会在移动设备上出现故障。

对于移动屏幕,默认左对齐通常是最佳选择。左对齐文本 - 除了作为人们阅读的大致方向 - 使其更容易理解,因为文本的左侧始终一致且易于跟踪。

合理的文本也不是一个很好的选择。左侧可能是一致的,但由于移动设备上大多数文本列的宽度较小,完全对齐的文本可能会在内容中产生不寻常的间隙或河流,因为页面难以将长字符合成文本行。

即使您在设计中使用不同的理由来制作更大的显示器,您也可能希望为移动屏幕恢复左对齐以提高可读性。

性能和功能

在您网站的移动排版中要考虑的最后一个因素是该网站的整体性能和功能,这意味着它为访问者加载的速度有多快以及它实际如何运作

在性能方面,具有不可靠连接的网络上的移动用户将比使用专用的高带宽因特网连接的家中的人经历更慢的加载时间。如果您的网站使用大量的@ Font-face网页字体,您可能会对该网站的下载性能产生负面影响

无论您是将字体文件与其他站点文件一起包含还是使用第三方Web字体服务,结果都是相同的;需要下载字体才能在网站上使用。

Web安全字体

将此与“网络安全字体”进行对比,后者直接从用户设备加载并立即加载。

Web安全字体可能不像现在的许多Web字体选择那样性感,但是这些字体选择可以给我们带来的性能改进不应该打折扣,特别是对于移动网站。

考虑到功能,请考虑移动设备上的文本可以执行的所有功能,而不是在桌面上可用:呼叫,链接,购买,文本等。必须考虑诸如放大或分离文本时的特殊注意事项。设计单词以执行某些功能。

外卖:设计触摸

许多适用于所有设计媒体的良好排版原则也适用于移动排版。对于任何屏幕,使用易于阅读且具有适当间距和清晰字体的字体是必须的。但是,对于移动网站,您还必须考虑这些设备的独特特征,人们如何与它们进行交互以及使用它们的各种环境。

在移动设备上考虑排版时,要意识到用户会用手指触摸此文本,而不是与屏幕保持距离。另一个可操作的提示是将您的设计从Photoshop中取出,看看您的排版如何经得起多个视图。

此外,大多数设计师的网络平台,如Webydo要么Abobe Muse,为用户提供响应断点和相应预览的选项,以确保排版能够保留一个实际设备。最后,没有真正的替代品可以在一系列移动设备上查看您的设计,以便在真实条件下阅读并了解它对较小屏幕的反应。因此,传统的外观概念可能只是成功移动排版的最佳标准。

话:Nurit Bahat

Nurit Bahat是一位在网页设计领域拥有超过10年经验的设计师。如WebydoNurit的艺术总监设计了该平台的UI / UX。她是Webydo视觉冲击的精髓,总是在寻找灵感,为Webydo社区带来惊人的新主题。

喜欢这个?试试这些......



翻译字数超限