材料设计排版 - 标题,标题,间距,文本外观

时间:2015-05-25 20:27:26

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

我一直在关注排版的Google官方材料设计指南(http://www.google.com/design/spec/style/typography.html),但我发现它们非常缺乏。例如,他们列出了你应该用于身体,小标题,标题,标题显示1,显示2等类型的10种样式。在你的应用程序中键入文本...这引出了我的第一个问题。

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

此外,指南规定领先的空间应该建在文本的行高。因此,问题2。

问题2#:如何为Android中的文字添加“领先”空间,这是相关的Android指南吗?

问题3:虽然我已经下载了最新版本的Roboto,但我的中等字体看起来绝对大胆,而不是谷歌的优雅和略厚的中等字体,我如何确认我的字体实际上与谷歌不同?

非常感谢

1 个答案:

答案 0 :(得分:32)

"向我显示代码": 不是我的,但请参阅下面的评论以获取一个选项,以及如何使用Plaid app(Butcher)通过访问Github上的来源(BaselineGridTextView类)来解决排版问题。

免责声明:我绝不是这个主题的参考,但你的问题是一个月大而没有任何答案,即使它很重要,它的重要性只会从现在开始增长。也就是说,由于可能出现的错误,我会尝试至少提供一些亮点并提供我的头脑。

  

问题#1:如何知道"小标题"是,或者"标题" vs"标题",或什么时候应该"显示1"使用而不是" display4",是否有这些项目的标准?

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

  • 显示:大文字,通常用于标语牌,有吸引力的标语,需要和争夺注意力的东西,当用户不看时应引起注意。它的可读性不太准确,因为它应该非常短(立即引起注意,而不是广泛流动的一部分)。我认为Material Design中4种不同的显示尺寸只是Matias及其团队的特别关注,但我怀疑应用程序将使用超过1种显示尺寸(也许是杂志和富媒体应用程序)。大多数应用甚至都不会使用显示尺寸。
  • 标题:传统上,我相信,如果我对此主题的理解不正确,则标题大小将用作故事的short taglines。不是描述,只是标语,短信。标题的一个例子: 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,因为它被用作电子邮件的摘录(提供概述)或电话号码(特定人员的最重要资产的详细信息)电话清单)。
  • 正文:正文。很明显。所有内容中最具可读性的,以及长文本的选项。
  • 标题:脚注和小文字。在印刷中,它被广泛用作图像的标题。在Holo中,我认为(如不确定)它被用作分隔文本(但在所有大写中)。在Material Design中,我认为分隔符停止使用标题文本并使用浅色的“body”。

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

  • 文本处理器的文本样式;
  • Photoshop,Illustrator等图像软件中的字体设置。
  • 字体的光学大小。例如,Adobe使用“caption”, “regular”, “subhead” and “display”,正如您所看到的那样,它旨在补充大小调整并引领字体形状,特别是针对不同大小的跨度;

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

  

问题2#:如何添加"领先" Android中的文字空间,

这适用于那些将TextView与不同风格混合的地方,例如image example(或文字跨度)。

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

然而,我只是看着这个(没有尝试过),我相信你可以潜入FontMetrics,测量字段并在两者之间动态应用适当的尺寸{{ 1}}如上所示。我先尝试(下一个的TextView和之前的ascent)。

  

这是相关的Android指南吗?

是的,确实如此。非常。当它们具有不同的样式时,将文本放在另一个下面。就像一个标题后面跟一个标题一样,并尝试一个疯狂的猜测:它不会起作用,你的应用程序也不会与系统保持一致。见上文。

  

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

请告诉我们 完全 您需要将两个样本进行比较。字体渲染可能会受到许多不同的影响,除了许多其他因素外,每个系统都使用自己的提示算法。甚至在不同的Roboto版本和不同的Android版本之间也存在细微的变化。当然,与普通相比,媒体看起来“大胆”,但实际上并不大胆。

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

Roboto black

Roboto bold

Roboto medium

Roboto regular

Roboto light

Roboto thin

我认为它与sample相对应。

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

Ubuntu regular

Ubuntu medium

Ubuntu bold

Minion Pro(常规,中等,半和粗体)。它的权重更加均衡,因为它还提供了半版本的变体,但我们所说的是一种用于精细打印的衬线字体,并且在市场上有更多的时间不断改进:

Minion Pro regular

Minion Pro medium

Minion Pro semibold

Minion Pro bold

我希望这会有所帮助。