Material 字体样式与排版

Google Material 设计规范文档 Style– Typography

字号

  • 再好的布局也会被过多的字号和样式会毁掉。要规定好在这个布局上合适的 字号集合 。
  • 中文比英文字面的密度更大，所以同一样式中文字号通常要比英文选大一些大字号。比如对于BUTTON样式，中文选用15sp，英文为14sp。
  • Material Design Typography - Headlines, Titles, Spacing, Text Appearance

行高

  • 行高与字号、粗细(weight)是相关的。

颜色

  • 文字与背景颜色对比多过大、过小都会使阅读困难:(
  • 文字颜色的差异要能让用户觉察到。

更大、动态样式（dynamic type）的文字

  • 为了更好的体验，使用动态样式代替“足以显示的小号字”和“可能被折断（无法完全显示）的大号字”。（比如显示用户名，名字可能长可能短，使用固定字号的话，小字号会留出太多空白、大字号不能完全显示。）

Material 字体样式与排版的更多相关文章

  1. 常见CSS3选择器和文本字体样式汇总

    常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读css选择器四大类:基本.组合.属性.伪类对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且 ...

  2. Flutter 基础组件：文本、字体样式

    // 文本.字体样式 import 'package:flutter/material.dart'; class TextFontStyle extends StatelessWidget { // ...

  3. 学习微信小程序之css4设置颜色,单位表示，字体样式

    颜色的设置可以通过RGB设置 可以直接通过英文单词设置 可以通过16进制来设置 长度单位: 字体样式: 设置字体样式 字体粗细 设置字体风格 设置字间距

  4. css3中的字体样式

    text-overform:ellipsis省略号/clip裁剪. overform:hidden溢出隐藏文字. 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省 ...

  5. CSS3初学篇章_3（属性选择符/字体样式/元素样式）

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  6. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  7. 【Android】 TextView设置个别字体样式

    SpannableString msp = new SpannableString("测试"+XM+"更换当前号码将从手机发送一条普通短信进行验证"); msp ...

  8. Asp.net 字体样式

    在页面中使用到字体样式  “微软雅黑“,在静态页面中显示正常,但在asp.net页面中字体无效,此时只需把字体修改为“Microsoft YaHei";

  9. 详解CSS设置默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

随机推荐

  1. SQL Server系统表讲解

    1. sysobjects http://www.cnblogs.com/atree/p/SQL-Server-sysobjects.html   2.syscomments http://www.c ...

  2. sqllog 8.32 注册码

    注册信息: Name:kkkboy[CrSky] Registration code: Professional 17cb5c23-8653-418f-b81b-5582c7a5a2d7 Enterp ...

  3. do/while(0) c4127

    原文链接:http://cnicholson.net/2009/03/stupid-c-tricks-dowhile0-and-c4127/ // NOISY CODE #define MULTI_L ...

  4. Extjs 兼容IE10

    在对应的地方将Ext.isIE 修改成: Ext.isIE && !(/msie 9/.test(navigator.userAgent.toLowerCase())  &&a ...

  5. js学习笔记——数组方法

    join() 把数组中所有元素转化为字符串并连接起来,并返回该字符串, var arr=[1,2,3]; var str=arr.join("#"); //str="1# ...

  6. php 二维数组按照某value值求出最大值最小值

    //商家的等级信息是一个二维数组,求出最小折扣和最大折扣array(0=>array('levelname'=>'银','dis'=>7.5), 1=>array('level ...

  7. JNI学习&使用过程中的错误

    Part 1 Ubuntu下JNI的简单使用: http://blog.csdn.net/fengqiaoyebo2008/article/details/6210499 Part 2 在eclips ...

  8. 注解 @Resource与@Autowired与@Component的使用

    在java代码中使用@Autowired或@Resource注解方式进行装配,这两个注解的区别是:@Autowired 默认按类型装配,@Resource默认按名称装配,当找不到与名称匹配的bean才 ...

  9. cf B. Two Heaps

    http://codeforces.com/contest/353/problem/B 题意:要把2*n个两位数分成两部分,使得第一部分上的数和第二部分上的两位数组成四位数.求怎么分能使构成的不同的四 ...

  10. 从客户端(txtNewsContent="<hr />")中检测到有潜在危险的 Request.Form 值。怎么办呀?

    <system.web><httpRuntime requestValidationMode="2.0" executionTimeout="3600& ...