it-swarm.cn

您如何在空间非常有限的情况下选择一种字体,即在最小的空间内适合大多数可读取的文本?

在为用户创建报告和仪表盘时,我通常空间非常有限。我通常使用Arial或Arial Narrow,但是UI并不是我的专业领域,所以我想知道,您如何确定一种最佳字体,以便在最小的空间内容纳可读性最强的文本?

这是一个示例:请记住,这只是一个示例,因为很多时候空间是有限的,例如何时需要将一百万列压缩到报表中,等等。

Chart with limited space

114
richard

它实际上取决于许多因素,例如您期望的 某些字符的频率 是什么以及可以使用的字体是什么。

我通过创建一个程序来进行基本操作,该程序遍历了我当时在Windows机器上安装的所有可用字体,并在屏幕上以每种字体的形式打印了包含每个可打印ascii字符的一行。我也用不同的字体大小重复了测试。

我记得它们的结果是 Segoe UITahoma 在10pt和9pt大小的UI用途的空间利用率和可读性方面是最好的。在短期内,我们选择了Tahoma,因为Segoe UI无法免费用于Windows Vista以下的操作系统。如果您不需要支持Windows XP或更旧的Windows操作系统或其他非Windows操作系统),那么我肯定会使用Segoe UI,否则,我会使用Tahoma(如果有)以及否则,请尝试Verdana,请参阅 此列表 以获取可用Windows字体的阵容以及有关每种字体的最佳使用信息。

还要记住,我相信从Windows Vista开始,Microsoft现在建议对UI元素使用9pt字体而不是10pt字体,因为Sego UI字体在低分辨率下的显示效果比其他字体清晰得多,尤其是在平板显示器上。

根据开发平台的不同,如果可能的话,您可能还需要考虑修改字体指标。我记得在带有WPF的.NET中,有很多方法可以修改文本的呈现方式,以压缩字符之间的间隔并使单个字符更窄。使用这种技术,您可以坚持使用任何喜欢的字体,并且只需对其进行微调即可获得所需的结果。

关于您提供的特定示例图:对于此特定图,我建议对其进行枢轴旋转,以便最可能阅读的文本是水平的,以便更自然地阅读。我还将数字放置在条形图的每个条形图内,以使其适合与背景色不同的颜色,从而增加了其他空间,例如标签。将条形图布置为行将使其更易于阅读,并在必要时在多页上进行打印。如果行布局不可行,则为图中的每个项目创建一个单独的键可能是合理的,这样每个条都可以放置得更近一些以节省空间。例如,该键将允许将每个条标记为A,B,C ...或01、02、03 ...,并且该键(在其他位置排成一行)将提供有关每个条的更详细信息。

请记住,图表或图表主要用于获取快速的视觉信息。如果这给用户/读者带来太多负担,则最好简化一下,合并图表的某些详细信息,或者仅以表格形式提供更多原始数据。

这是一个简单的清单,显示了各种大小的Arial,Segoe UI和Tahoma字体。请注意,每种字体占用的相对空间在不同的点大小处是不同的。 enter image description here

更新:我在下面添加了另一个比较,其中显示了更完整的常用字符列表,包括前面提到的每种字体中的大写字母和小写字母,以及添加了Verdana和MS Sans Serif(Windows 2000之前的Windows中的默认UI字体)。不幸的是,根据bobsoap关于使用Verdana的建议,很明显,与9pt的其他字体相比,Verdana的性能最差,但请记住,这可能不适用于其他磅数。同样,大小并不一定总是最重要的细节,有时候,以较小的大小可读的字体比是否相对于另一种字体更紧凑更重要。

enter image description here

94
jpierson

你这样做是错的。

通常,有一种“其他方式”。这个问题的答案都是不错的选择,但老实说,您应该考虑所有不同的选择。在尽可能小的空间内压缩尽可能多的文本总是意味着您已经破坏了以前的设计选择。

  • 也许您应该将它们翻转为单杠,从而为您提供了更多的使用空间。
  • 也许您不应该使用条形图,或者不应该首先使用图表。
  • 也许问题出在实际数据,您可能不得不将其进一步拆分!
  • 侧栏或图例/索引可能会有所帮助
  • 悬停功能可能适用于在线版本

有太多选择,请确保使用正确的选择。将尽可能多的信息压缩到一个小区域是always错误的方法。信息需要空间来呼吸,可读,可扫描和可识别。

是的,这通常意味着要使用更多的空间。但这不是一件坏事。使用数据的人只需花很少的精力即可快速扫描填充有结构良好信息的几页,而不是弄清楚该条在该一页报告中的含义。想想这位老董事会成员,将纸袋递给旁边的人时,将他的老花镜装在口袋里:“我看不懂-它说什么?”

很抱歉,标题有些刺耳,但我看到了这个最高答案,只是觉得“需要一种不同的方法”部分需要更多的阐述。

。edit:

因为这是一个非常有争议的答案,并且与原始问题相当矛盾,所以我认为我应该详细说明发布它的原因。

首先,这不是UX问题,而是图形设计或排版问题。

这个问题有一些假设,其中最大的假设是针对此UX问题的“正确解决方案”是小文本。但事实并非如此。小文本变得难以阅读,而平板电脑和其他移动设备会加剧该问题。如果您的用户视力不好怎么办?如果在较旧的较低分辨率的显示器上显示该怎么办?如果阳光或光线刺眼怎么办?小文本无法阅读的原因很多。

这样,此答案在这里是为了帮助遇到此问题的下一个人注意不要犯相同的错误

...话虽如此-我完全感谢提出问题的人只是没有字体更改的资源:)我们都去过那里,而且我们都将在那里!

TLDR:我以亨利·福特对待快马的呼吁的方式来对待这个问题。 (免责声明:我不是亨利·福特)

44
Dirk v B

柯达

有时,较小的字体是避免紧要关头的好方法。在这种特殊情况下,至少对于所示问题的一部分,有一个更好的解决方案,该解决方案既更清晰,又占用了一半的空间,如下所示:

Lastname, Firstname

我使用的字体足够大,即18pt Tahoma(在新标签页中打开图像以查看完整大小),可以使用负字母空间。

24
James Crook

假设您指的是与Retina显示器类似的常规显示器(〜96 DPI)的屏幕使用,并且您的系统具有亚像素抗锯齿功能,那么您要寻找的是一种字体具有出色的像素 提示 。提示是一种获取为打印目的设计的矢量曲线,并针对不同的点大小自定义其形状的技术,通常是使字体的主要部分与像素网格对齐。这是在字体的外观(刚性和不容忍的像素网格)之间做出折衷的问题。越小越好,这些折衷会变得越来越严重,因为像素网格提供的像素连续减少。

许多字体已明确设计用于计算机屏幕(通常称为 屏幕字体 )。马修·卡特(Matthew Carter)的字体集; VerdanaTahoma乔治亚是很好的例子;他们从一开始就考虑了像素网格。这使得它们本质上适用于较小的尺寸(但通常使它们在打印时看起来有点尴尬)。

通常,在小点大小(记住点大小是指height)时,我会建议Verdana因为它的非常高 x高度)提供宽开口 计数器。这将使其比其他字体更宽,这不是您要查找的字体(根据示例)。

Segoe UITahomaMS Sans Serif都设计为通用屏幕字体(分别是Windows Vista/7,Windows XP和Windows的早期版本)的默认字体) ,因此它们是全方位的好选择(Segoe UI是唯一一个考虑到亚像素提示的设计,并且是最现代的选择)。

选择字体时,还应考虑两个因素:如果垂直运行该类型,则子像素的抗锯齿功能自然会有所不同,并且一般而言,像素提示看起来会有些差(因为类型设计人员不太可能垂直测试其面部)。如果您在对角线方向上运行字体,或者不在像素网格上运行字体,则提示所有像素的提示都将抛出窗口。

有关像素提示,栅格化及所有其他内容的详细说明,没有比 这个令人惊叹的网站 更好的参考了。

如果有兴趣,我将为一小号字体添加一两段有关打印选择的内容,但是除了 这篇很棒的文章 外,我没有什么可以添加的。

15
Kit Grose

指定您要优化的尺寸非常重要。您是要水平(较短的线)还是垂直减小尺寸?如果要优化水平宽度,则应寻找精简字体。 Arial Narrow和Helvetica Condensed是两个明显的选择,但我认为它们不易读并且看上去便宜。

对于类似于Arial/Helvetica的无衬线,但范围更窄,请查看:

Myriad Pro,Open Sans,Segoe UI,Tahoma,Frutiger,Bell Gothic,Lato,Antique Olive和Adobe的新字体Source Sans Pro。

通过对数字的比较,我发现Myriad Pro,Source Sans Pro,Segoe UI和Tahoma是可读性最好的,最小宽度为9px-11px。请注意,这些字体处理大小差异很大,因此通常需要合并大小偏移以进行公平比较。

拉托也可以很好地工作。 Asana使用Proxima Nova,它非常开放,并且在小尺寸下可读,但是在使用大尺寸时看起来并不好。

这是我对所有10px像素所做的比较。最好自己动手玩,但是,更改字体大小通常会对这些小尺寸产生非线性影响。

font comparison at 10px

其他人提到了Verdana。 Verdana在小尺寸下可读性很强,但根本无法优化宽度。也就是说,可以以小尺寸读取的宽字体会针对高度而不是宽度进行优化,也许这正是您要寻找的,但是在网络上,垂直滚动比水平滚动更自然,通常不是这种情况。

我个人的偏好是在屏幕上查看Arial,如果我正在寻找一种中性的外观,或者需要优化宽度,则可以查看Source Sans Pro或Segoe UI。

9
terrace

我一直喜欢Segoe UI,但最近不得不承认Arial在许多情况下实际上更具可读性。如果您不相信我,请在充满数值数据的网格中比较12px Arial和12px Segoe UI。 Arial似乎闪闪发光。甚至原始答案中显示的示例文本也清楚地表明Arial更易于阅读。这很丑陋,但更具可读性。其中很多只是大小上的细微差异。

此外...当您将Segoe设置为13px或更高时,数字真的开始看起来很奇怪。最终,大多数应用程序都是由数据驱动的。创建一个充满数据的网格。在两者之间切换,问几个更容易阅读的人???嗯..

如果您正在阅读11px的纯文本(无数字),那么我认为Segoe更容易阅读。但是,无论谁决定Segoe UI都是比arial更容易阅读的字体...我想看看他们从何处获得此数据。我问过几个人,每个人都认为Arial对于12px(9pt)(包括我自己)的数据更可读。

关于字体颜色,也有很多字体字体。 Segoe看起来最好稍轻一点(#333333或#212121)通常很好。在这些颜色下,Arial似乎很难阅读,通常以纯黑色为最佳。 Segoe UI的对比度过高,并且在纯黑色方面看起来很忙。

我发现arial比Tahoma个人更具可读性。如果您只是在谈论直接的可读性。在Windows界面中,Tahoma可能看起来更好,但这是一个美学的东西。

间距,字体颜色和字体大小会更改所有内容。不要让任何人告诉您Segoe UI是更好的字体。在某些情况下比较好,但不是全部。当然,它很有吸引力。

6
KingOfHypocrites

Different fonts in different sizes

Arial Narrow和Tahoma似乎是最好的。

4
Fubz

以我的经验,Avenir Next Condensed非常清晰,同时仍然只占很小的空间。与Arial Narrow相比,它占用的空间更少,并且更易于阅读。

Visual comparison of Arial Narrow and Avenir Next Condensed

2
McHobbes

我遇到了一个问题,其中字体空间优化是我在Mac上使用的某些软件(Soundminer,在OS X Mavericks 10.9.5上)的重要因素,但是我想这可能对其他Mac软件和OS X的未来版本有用以及)。该程序列出了具有固定高度行的文件元数据,并允许用户选择行高和字体大小。 “自动换行”是一个选项,但是不会调整行高以自动适合每个单元格的内容。

在检查完系统上的所有数百种字体后,在最小空间内适合大多数字符数据的字体仍然清晰可辨,是Apple Symbols。字体大小设置为12,行高设置为22,我可以舒适地容纳两行文本,并且比其他任何字体(相同大小或更小的字体)都可以容纳更多字符,同时仍然可以保持可读性(最多3个位置) ”)。

希望这对其他有相同(或相似)问题的人有用。

2
EarHax

这里的大多数答案仅应用作可能使用的字体的建议。在可读性之后,这只是一个品味问题。 (在评论中说Verdana显然是最糟糕的选择,我最喜欢它。)我经常尝试8种或10种不同的字体,然后决定哪种字体对我来说最好。选择还取决于上下文。我确信每个人都会在内衣店和钢铁厂使用不同的字体作为名片。所有有关衬线和无衬线的BS都是浪费时间。无论使用哪种外观,只要使用看起来不错的东西即可。

我同意目标不应是将尽可能多的信息填充到文本中。大多数人不会阅读全部甚至大部分内容。他们将寻找关键点,如果有兴趣,他们可以阅读其余部分,或者更好的是,要求提供更多信息。

1
c.j.

Arial狭窄。有趣的是,没有人提及它(答案粗略地浏览了一下)。我在所有MS应用程序中都使用了它,效果良好。 Neeraj。

1
Neeraj

我发现Verdana是较小字体的理想选择(对于较大字体则不是那么理想)。或者,如果可以,可以使用像素字体。

0
bobsoap