Material 设计排版 - 标题、标题、间距、文本外观

Material Design Typography - Headlines, Titles, Spacing, Text Appearance

我一直在遵循 Google 官方 Material 排版设计指南 (http://www.google.com/design/spec/style/typography.html),但我发现它们非常缺乏。例如,他们列出了 10 种样式,您应该将它们用于 body、副标题、标题、标题 display1、display2 等。在您的应用程序中键入文本……这让我想到了第一个问题。

问题 #1:如何知道 "subhead" 是什么,或 "title" 与 "headline",或什么时候应该使用 "display1" 而不是 "display4",这些项目有标准吗?

此外,准则规定前导 space 应该内置到文本的 line-height 中。因此,问题2.

问题 2#:如何为 Android 中的文本添加 "leading" space,这与 Android 指南相关吗?

问题#3:虽然我已经下载了最新版本的Roboto,但我的中字体看起来绝对是粗体,而不是Google的优雅且略粗的中字体,我如何确认我的字体实际上不同于 Googles?

非常感谢

"Show me the code": 不是我的,但请参阅下面的评论以了解一个选项,以及 Plaid 应用程序 (Butcher) 如何通过访问来应对排版挑战它的来源在 Github (BaselineGridTextView class).

免责声明:我绝不是这个主题的参考,但你的问题已经一个月了,没有任何答案,尽管它很重要,而且它的重要性只会从现在开始增长。就是说,由于可能出现的错误,我至少会尝试给出一些启示并提出我的意见。

Problem #1: How does one know what a "subhead" is, or a "title" vs "headline", or when should "display1" be used as opposed to "display4", are there standards for these items?

这些是印刷出版传统中常见的、标准化的、抽象的文本实体。

  • Display:大文本,通常用于标语牌,吸引人的标语,需要和争夺注意力的东西,应该在用户不注意时引起注意。它的可读性差,正是因为它应该非常短(立即引起注意,而不是大流量的一部分)。我想 Material 设计中的 4 种不同显示尺寸只是 Matias 和他的团队的额外关注,但我怀疑应用程序会使用超过 1 种显示尺寸(也许是杂志和富媒体应用程序)。大多数应用程序甚至根本不会使用显示尺寸。
  • 标题:传统上,我相信,如果我对这个主题的浅薄理解是正确的,标题大小被用作short taglines of the story. Not a description, just a tagline, a short message. An example of a headline: ASSASSIN KILLS KENNEDY. In common apps following Material Design, it is used as the main subject of a screen (just like pages of a newspaper)。我认为(不确定)这可能在其他地方被称为“标题”。
  • 标题:老实说,它很普通,而且由于它的大小适中(与标题和显示相比),它是我使用最多的样式之一:它在文本块上方的位置非常有用。例如,“Eula”作为此标题之后的 eula 文本的标题,或紧接在作者列表之前的“作者”。是widely used in the framework as well.
  • 副标题:这个更具体。它是“标题”的直接、次级,用于提供其后文本块的摘录、引述或简短描述。副标题示例(在标题示例之后):得克萨斯州州长受伤,马克思主义者被控谋杀。在 Material 设计中,由于大小 the most common place I've seen it used in is in a two item list item,正是因为它被用作电子邮件的摘录(提供概述)或用作 phone 数字(最详细的信息) phone 列表中特定人员的重要资产)。
  • Body:正文。很明显。其中最易读的,只有长文本选项。
  • 标题:脚注和小文本。在印刷品中,它被广泛用作图像的标题。在 Holo 中,我认为(不确定)它被用作分隔文本(但全部大写)。在 Material 设计中,我认为分隔线停止使用标题文本并使用浅色的“body”。

其他程序本身使用这些(部分或全部)概念,但略有不同:

  • 文本处理器的文本样式;
  • Photoshop、Illustrator 等图像软件中的字体设置。
  • 字体的光学大小。例如,Adobe 使用 “caption”, “regular”, “subhead” and “display”,如您所见,它旨在补充大小和行距,特别是针对不同大小跨度定制的字体形状;

一般的概念似乎是这些是表示文本集中重要性梯度的抽象实体,并且可能有灵活的规则在出版物之间只要它被使用在出版物、主题、应用程序等中始终如一

Problem 2#: How can I add "leading" space for text in Android,

这适用于那些将 TextView 与不同样式混合使用的地方,例如在 image example 中(当然还有文本跨度)。

老实说:现在,出于紧急目的,我正在用我的眼睛 superimposed grids to check my leading. I'm starting with the leading size, then I subtract the font size of the following text line and some small amount as the descender of the current line. Then I make tiny small optical adjustments if needed. It would be nice if these elements (x-height, cap height, descender etc.) could be calculated exactly,但老实说,我还没有深入研究这个问题(但可能是可能的)。我对我的“目视计”很满意,但我的布局中的 MD 还不够完善。

但是,我只是看了这个(没有尝试),我相信你可以深入研究 FontMetrics,测量场并在两者之间动态应用适当的尺寸 TextViews 如上所示。我会先尝试(下一个 ascent 和前一个 descent)。

is this relevant Android guidance?

是的,是的。非常。当文本具有不同的样式时,将文本放在另一个文本的下方。就像一个标题后跟一个 body,并尝试大胆猜测:它不会工作,你的应用程序将与系统不一致。见上文。

Problem #3: Although I've downloaded the latest version of Roboto, my medium fonts look absolutely bold, as opposed to Google's elegant and slightly thicker medium fonts, how can I confirm my font is actually different than Googles?

请告诉我们确切你在哪里得到两个样本进行比较。字体渲染可能会受到许多不同因素的影响,除了许多其他因素之外,每个系统都使用自己的提示算法。即使在不同的 Roboto 版本和不同的 Android 版本之间也存在细微差异。当然,与常规相比,中号看起来“大胆”,但实际上并不大胆。

你可以在sdk/platforms/android-APIVERSION[=129=中查看字体/data/fonts 文件夹。从 android-22 开始,使用 Ubuntu 15.04(轻微提示)进行渲染:

我认为它与 sample 保持一致。

为了与广泛使用的内容进行比较,这是 Ubuntu font family(分别为常规、中等和粗体)的(一部分)。在我看来,中号也比常规更接近粗体:

Minion Pro(常规、中等、半粗体和粗体)。它的权重更均匀可能是因为它还提供半粗体变体,但我们谈论的是一种为精美印刷而制作的衬线字体,并且在市场上有更多的时间不断完善:

希望对您有所帮助。