【问题标题】:Material Design Typography - Headlines, Titles, Spacing, Text AppearanceMaterial Design 排版 - 标题、标题、间距、文本外观
【发布时间】:2015-08-07 08:41:31
【问题描述】:

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

问题#1:如何知道“副标题”是什么,或“标题”与“标题”,或者何时应该使用“display1”而不是“display4”,这些项目是否有标准?

此外,指南规定前导空格应内置在文本的行高中。因此,问题2。

问题 2#:如何在 Android 中为文本添加“前导”空格,这是相关的 Android 指南吗?

问题 #3:虽然我下载了最新版本的 Roboto,但我的中号字体看起来绝对粗体,与 Google 优雅且略厚的中号字体相比,我如何确认我的字体实际上与 Google 不同?

非常感谢

【问题讨论】:

    标签: android fonts android-5.0-lollipop material-design typography


    【解决方案1】:

    “给我看代码”:不是我的,但请参阅下面的评论以了解一种选择,以及 Plaid 应用程序 (Butcher) 如何通过访问其源代码来应对排版挑战在 Github 上(BaselineGridTextView 类)。

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

    问题#1:如何知道“副标题”是什么,或“标题”与“标题”,或者何时应该使用“display1”而不是“display4”,这些项目是否有标准?

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

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

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

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

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

    问题 2#:如何在 Android 中为文本添加“前导”空格,

    这适用于您将TextViews 与不同样式混合的地方,例如在image example 中(当然,也可以使用文本跨度)。

    老实说:现在,出于紧急目的,我正在用superimposed grids 的眼睛检查我的领先地位。我从前导大小开始,然后减去以下文本行的字体大小和一些小量作为当前行的下降。然后,如果需要,我会进行微小的光学调整。如果这些元素(x 高度、上限高度、下降器等)could be calculated exactly 会很好,但老实说我还没有深入研究(但它可能是可能的)。我对我的“视力计”很满意,但我的布局并不完美。

    但是,我只是看了这个(没有尝试过),我相信您可以深入了解FontMetrics,测量字段并在上面显示的两个TextViews 之间动态应用适当的尺寸.我会先尝试(下一个的ascent 和上一个的descent)。

    这是相关的 Android 指南吗?

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

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

    请告诉我们究竟您要比较这两个样本的位置。字体渲染可能会受到许多不同因素的影响,除了许多其他因素外,每个系统都使用自己的提示算法。即使在不同的 Roboto 版本和不同的 Android 版本之间也存在细微的差异。与常规相比,中号肯定看起来“粗体”,但实际上并不粗体。

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

    我认为它与sample保持一致。

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

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

    我希望这会有所帮助。

    【讨论】:

    • 大卫!你就是那个男人。我通过解释指南来更新材料设计,最终我完全按照你写的方式使用了样式。所以最终,起初它是压倒性的,然后,当你一遍又一遍地使用它时,你就会对它有一定的了解。至于领先空间的相关性,我想知道如何实现这一点?我没有看到文本视图的前导空格属性,我错过了什么吗?我认为这不需要其他类(FontMetrics)来完成前导空格的工作。我目前正在使用填充作为前导空格。
    • @AutoM8R 很高兴。前导没有属性,因为前导在between TextViews 中特别有用,所以within 没有意义。谈到what I said about diving into FontMetrics and its fields:我们知道领先是从一个baseline 到下一个TextView 的距离,所以before you dive into complicated things,请记住,您可以找到Roboto 的这些值并将它们预缓存为其中的XML 边距值每个文本样式。无需即时计算。
    • 我最近做了一个小库来解决这个问题(允许设置前导、第一行前导和最后一行下降,并根据这些计算对顶部/底部填充和行间距的额外调整) .随意看看:github.com/Actinarium/Aligned
    • @Actine 是的,刚刚在 Google+ 上看到了你的帖子!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-04-22
    • 1970-01-01
    • 1970-01-01
    • 2021-01-01
    • 1970-01-01
    • 2016-06-09
    • 2016-02-01
    相关资源
    最近更新 更多