Lesson 2: Dive Into Typography (排版)
Lesson 2: Dive Into Typography (排版)
排版是
字的艺术
,是关于字的一切:字体、字号、行高、行长、字重(斜体/加粗/正常)、字距(kerning)、行距(leading)可读性……
Article 1: Typography Essentials – A Getting Started Guide (排版要点——一个入门指南)
这篇文章所说的很多都不适用于中文。
基础
- The Type Size, also called the Cap Height, is the overall height of capital letters in the formation of words.
- The Ascender is the upward tail on letters like h, l, t, b, d, and k.
- The Descender is the downward tail for letters like g, q, and y.
- The Counter is the white space located inside letters like o and p.
- The X Height is the height of the letter, and does not include ascenders or descenders.
- Baselines are the boundary that the lowest part of the letter rests on. Take a look at the y, p, g, p and y letters in the illustration above. The solid line they are resting on is the baseline.
- Kerning: 字距。
- Leading: 行距。
- left alignment
- center alignment
- Right alignment 显得正式。
- Justified alignment: 左右对齐。避免出现
tracking
, 也叫river
).
Type Category(字体分类)
- Serif: 衬线体。这种字体在长段的时候更易读,而且传统。(如果没有特别制定,绝大多数程序都把
Times New Roman
style 作为默认字体。是衬线体。) - San-Serif: 无衬线体。这种字体的粗体作为 labeling、headlines、titles。也易读,但是更有现代的感觉。
- Script, symbols and decorative type: 手写体、符号、装饰体通常用于具体的图像和信息。(婚礼可能使用更瘦更流畅的字体,小孩生日
Lesson 2: Dive Into Typography (排版)的更多相关文章
- compass typography 排版 常用排版方法[Sass和compass学习笔记]
Bullets 用来定义ul li 相关的样式 no-bullet 关闭 li的默认样式 那个小圆点 no-bullets 作用域ul 调用no-bullet 函数 不过用了reset 后 默认没有 ...
- [No000026]365种创业、办公、和生活成长的精华资源
只需要具备以下技能,人人都可以成为企业家:经得起失败的考验,思维活跃,新点子不断,能够脚踏实地把新点子转化为产品,并在这个过程中坚持不懈,百折不挠,即使跌倒了,也要及时从失败中学习,迅速投入到下一次冒 ...
- 标准化css属性顺序
前言 对于css文件而言,选择器的写法有它的讲究,如—— 1> 不要用ID选择器 2> 不要用通配符*选择器 3> 选择器的层级 ...... 对于属性值的写法也有他的讲究,如—— ...
- [Typescript] Introduction to Generics in Typescript
If Typescript is the first language in which you've encountered generics, the concept can be quite d ...
- 阅读MDN文档之StylingBoxes(五)
目录 BoxModelRecap Box properties Overflow Background clip Background origin Outline Advanced box prop ...
- normalize.css 中文版
## normalize.css 中文版 normalize.css 原地址:http://necolas.github.io/normalize.css/reset 太暴力了,这个 normaliz ...
- 使用HTML5和CSS3碎语
当我们使用HTML5, CSS3,甚至Bootstrap设计网站的时候,有些方面是必须考虑的,比如字体大小,标题大小,行间距,每行字数,字体,颜色,背景图片和文字的搭配,图标,留白和布局......所 ...
- table中的td自动换行
总有那么几个时候会觉得,table的td不能自适应换行真坑,凭什么只能用tr来换行,经常数据都是连在一起的呀,你叫我怎么把它拆分放到tr里...... 那能不能用ul和li来替换?可以是可以,不过有时 ...
- normalize.css v2.1.2 翻译
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */ /* /*! 我就是自己看看,然后翻译下下,让大家看看 */ /* ===== ...
随机推荐
- python3.3 基础 新特性
前段时间看到对 python 之父的采访,持 python应尽量使用新版的态度. 所以学习,就从比较新的版本开始吧. 3.x 之后的版本与2.x 的版本还是有些不同,仅从入门的基础部分即可感受到, 比 ...
- 游戏算法中lua脚本详解
此外,函数本身也是一个变量,比如: dp@dp:~ % cat test.lua local mylen={} mylen.len3=function (x,y,z) return math.sqrt ...
- python 的内置函数(1)
19.内置函数: abs():求绝对值 bool():求一个值是True or False ,其中False值有 0 ,空字符串'',None,空 ...
- 平方和与立方和 AC 杭电
平方和与立方和 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- Qweb报表中的Reload from Attachment参数
通过继承的方式修改了Qweb报表却发现没有生效,经查,其原因在于报表的设置中勾选了 Reload from Attachment 选项. 将本选项取消选中即可生效.
- 一个正整数N,拆成任意个正整数之和,怎样使这些数的乘积最大
网上看到了如标题所示的题目,就开始想如果用程序来算的话,那么它的算法是怎样的. 自己想了半天,第一感觉要用递归, 如先算出 当 n=1 max=1 当 n=2 max=1 当 n=3 max=2 .. ...
- 转:Linux 内核中的 cdev_alloc和cdev_add
内核中每个字符设备都对应一个 cdev 结构的变量,下面是它的定义:linux-2.6.22/include/linux/cdev.hstruct cdev {struct kobject kobj; ...
- 迅雷程浩:企业外包服务,下一个大的风口?(2B业务一定要懂销售和营销的人,这点和2C 不一样)
我今年暑假去了趟硅谷,一天去一个朋友的公司拜访,发现这公司没有前台,前台桌子上放了一个显示器.我刚进去,显示器里的老印就跟我打招呼 "How may I help you?" 事后 ...
- Qt编程之QString 处理换行
由于之间写过的一篇文章,Unix,windows,Mac里面的换行符不一样,导致处理也不一样,我现在要用QString以行分割(读取的文本文件的里面有换行符).所以要通吃这三种换行符 http://w ...
- HttpClient 发送 HTTP、HTTPS 请求的简单封装
import org.apache.commons.io.IOUtils; import org.apache.http.HttpEntity; import org.apache.http.Http ...
- compass typography 排版 常用排版方法[Sass和compass学习笔记]