谷歌Material Design & Typography

2016-06-16 · 🙈Ray · 0条 · 422次

漂亮的排版对美观程度还是挺重要的,过大的字体或者太小的字体都会降低应用的美观程度。有时候对于不同分辨率的屏幕,会产生一些特别不好的效果,例如文字显示不全等,开发中的疏忽还会导致换行等问题。

一.

Roboto 和 Noto 是Android和Chrome的标准字体。Roboto是安卓上的标准字体。Noto是Chrome上所有语言以及Android上不支持Roboto的所有语言的标准字体。

文字有三种类型:(1)English and English-like (2)Dense (3)Tall

>_ Roboto


Roboto有六种粗细:Thin, Light, Regular, Medium, Bold, Black.

>_ Noto

Noto字体与Roboto字体在竖直方向上是一样的。

Noto Sans CJK (Chinese, Japanese, and Korean)有7种粗细: Thin, Light, DemiLight, Regular, Medium, Bold, and Black. Noto Sans CJK Regular与Roboto Regular的粗细是一样的.

Thai, Devanagari以及其他主要存活的语言的Noto字体有Regular和Bold两种粗细。

>_ Hinted fonts

修改字形以更好地适应低分辨率的屏幕。Hinted版本比unhinted版本消耗更多空间。

Roboto和Noto都有hinted版本和unhinted版本。

谷歌推荐:在安卓和Mac OS X上,使用unhinted版本。在Chrome OS, Windows以及Linux上使用hinted版本。

>_ Font stack

顺序问题:Roboto,Noto,sans-serif。前种没有再用后种。

二.Styles

为了大字体更好使用,字体大小以sp为单位。

前面我们提到过一共分为三种类型的字体:

>_ English and English-like scripts

Latin, Greek, Cyrillic. 基本的样式集市基于12,14,16,20和34大小的排版大小。

在某些特定场合中,要使用“次要标题”样式,而不用较小的“主体”样式。这些个体包含了一小段文字预览,或者有标题与一行“主体”样式的文字一同出现。

>_ Dense scripts

中文,日文和韩文。

Weight:因为Noto CJK有7种比重,是可以与Roboto匹配得上的,所以使用与English相同的比重。

Font size:对于比Title大的,字体大小与English的相同。 小于等于Title的,字体大小比English的大一号。

>_ Tall scripts

东亚、东南亚、中东语言,包括Arabic,Hindi和Thai。

Weight:使用Regular比重,因为Medium在Noto中并不能用。谷歌推荐避免Bold比重,因为当地人反馈Bold太粗了。

Font Size:对于比Title大的,字体大小与English的相同。 小于等于Title的,字体大小比English的大一号。

三. Line height(行高)

为了更高的可读性以及美观性,行高根据每种样式的大小和比重来定。只有Body、Subhead、Headline以及小一些的Display样式中才允许使用自动换行。其它所有样式应当以单行形式出现。

>_ English and English-like scripts

>_ Dense and Tall scripts

对于所有样式,都要比English-like类语言大0.1em. Tall和Dense类的高度要比English的大一些。

四. 其他准则

>_ Colors & contrast颜色和对比

与背景色太相近的颜色以及过分的对比率都会使得文字难以阅读。文本要保持最小的对比率为4.5:1,最合适的是7:1.

>_ Large and dynamic type

为了更好的用户体验,最好不要一直使用大小相近的字体大小。

>_ Line breaking 断行

>_ Tracking and kerning 字距

>_ Line Length 行宽

每行60个字符是比较理想的情况。

五. 附表(语言分类)



  0