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

Question

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

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

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

问题2#:如何在Android中为文本添加"领先"空间,这是相关的Android指南吗？

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

非常感谢你

Answer 1

"告诉我代码":不是我的,但请看下面的评论,一个选项,以及Plaid应用程序(Butcher)如何通过访问Github(BaselineGridTextView类)的源代码来解决排版挑战.

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

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

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

• 显示:大文字,通常用于标语牌,有吸引力的标语,需要和争夺注意力的东西,当用户不看时应引起注意.它的可读性不太准确,因为它应该非常短(立即引起注意,而不是广泛流动的一部分).我认为Material Design中4种不同的显示尺寸只是Matias及其团队的特别关注,但我怀疑应用程序将使用超过1种显示尺寸(也许是杂志和富媒体应用程序).大多数应用甚至根本不使用显示尺寸.
• 标题:传统上,我相信,如果我对这个主题的浅薄理解是正确的,标题大小被用作故事的简短 标语.不是描述,只是标语,短信.标题的一个例子:ASSASSIN KILLS KENNEDY.在Material Design之后的常见应用程序中,它被用作屏幕的主要主题(就像报纸的页面一样).我认为(如不确定)这可能在其他地方被称为"标题".
• 标题:老实说,它非常通用,并且由于其适中的大小(与标题和显示相比),它是我最常用的样式之一:它在文本块上方的位置非常有用.例如,"Eula"作为此标题后面的eula文本的标题,或紧接在作者列表之前的"作者".它也被广泛用于框架中.
• 小标题:这是更具体的.它是"标题"的直接,低级程度,用于提供其后面的文本块的摘录,引用或简要说明.小标题示例(按照标题示例):德克萨斯州州长受伤,马克思主义者被指控犯有谋杀罪.在Material Design中,由于尺寸的原因,我见过的最常见的地方是两个项目列表项,完全是因为它被用作电子邮件的摘录(提供概述)或电话号码(电话列表中特定人员最重要资产的详细信息.
• 正文:正文.很明显.所有这些中最具可读性的,也是长文本的唯一选择.
• 文字说明:脚注和小文字.在印刷中,它被广泛用作图像的标题.在Holo中,我认为(如不确定)它被用作分隔文本(但在所有大写中).在Material Design中,我认为分隔符停止使用标题文本并使用浅色的"body".

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

• 文本处理器的文本样式;
• Photoshop,Illustrator等图像软件中的字体设置.
• 光学尺寸的字体.例如,Adobe使用"标题","常规","子标题"和"显示",正如您所看到的,它旨在补充尺寸和领先的字体形状,特别适合不同尺寸的跨度;

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

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

这适用于那些将TextViews与不同样式混合的地方,例如图像示例(或文本跨度,当然).

老实说:现在,出于紧急情况,我用眼睛叠加网格来检查我的领先优势.我从前导大小开始,然后我减去下面文本行的字体大小和一些少量作为当前行的下行.然后我根据需要进行微小的光学调整.如果这些元素(x高度,帽高,下降等)可以准确计算,那将是很好的,但老实说我还没有深入研究(但这可能是可能的).我对我的"视力计"感到满意,而我的布局中没有完美的MD.

然而,我只是看着这个(没试过),我相信你可以潜入FontMetrics,测量领域并在TextView上面显示的两个s 之间动态应用适当的尺寸.我先尝试(ascent下一个和descent前一个).

这是相关的Android指导吗？

是的.非常.当它们具有不同的样式时,将文本放在另一个下面.就像一个标题后跟一个正文,并尝试只是一个疯狂的猜测:它将无法正常工作,你的应用程序将与系统不一致.往上看.

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

请告诉我们您在哪里准确比较两个样品.字体渲染可能会受到许多不同的影响,除了许多其他因素外,每个系统都使用自己的提示算法.甚至在不同的Roboto版本和不同的Android版本之间也存在细微的变化.当然,与普通相比,中等看起来"大胆",但实际上并不大胆.

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

我认为它与样本保持一致.

为了与广泛使用的东西进行比较,这是(部分)Ubuntu字体系列(分别是常规,中等和粗体).在我看来,媒体也比常规更接近大胆:

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

我希望这有帮助.