Lesson 7: Responsive Typography In Action
Lesson 7: Responsive Typography In Action
排版一直都是设计和传达的基础。虽然现在的设计和印刷品设计差别很大,但核心原则还是不变的。
Article 1: Bonus: Responsive Typography Experiment
不是英语,看不明白是什么
好像是展示网页实现的人脸识别功能。
Article 2: Responsive Typography: The Basics
屏幕分辨率多了,网站设计已经从静态布局、本地字体向 动态布局
、网络字体(web fonts)
转变。
以前设备分辨率相近的时候,设计网站通常先确定正文的样式;然后根据正文样式决定行宽。现在多分辨率把这事弄得更复杂了。
有不同的方式实现响应式布局:
- 自适应布局(adaptive layout):根据有限的几个值调整布局。
- 流式布局(liquid layout):对每个宽度值连续调整布局。
两种方式各有利弊,但是我们觉得根据尽量少的 断点
来做自适应更好,因为可读性比内容能随着视窗无极变化重要的多。当然这在复杂的场景是有争议的,但是文本可读性确实在几个固定的宽度是最好的。
选择字体
正确的腔调(The Right Tone)
选择字体的时候最主要的是腔调(tone),但是每种字体都有各自的质量、需求(或者禁忌),字体的选择产生一系列视觉和技术的后果。
2012 年我们给自己的网站选择了衬线字体,以为它符合我们的腔调,而且对应了我们内容的优雅。
而 iA Writer 选择了等宽字体。因为这个程序是帮你出第一版草稿出来,所以我们特地选择了 Nittit ——一款坚定又谨慎(strong and careful)的字体。我们选择等宽字体的另一个原因是 iPad 的操作系统不会自动调整比例字体的字距。
monospace typeface: 等宽字体。
proportional typeface: 比例字体、非等宽字体。
现在三年过去了,我们对 Nittit 的喜爱导致我们现在用了它的非等宽版本。
衬线还是非衬线
这个怎么选很复杂,有一个可能有用的法则奉上:
The serifed typeface is a priest, the sans is a hacker.
衬线字体是牧师,非衬线的是黑客。
衬线字体更佳专制,而非衬线的感觉更民主。
实际上,如果正文字体大于 12px 的话,有没有衬线的字体都能表现很好,唉…… (12px 以下的字体在现在的显示器上会很小)
字号
字号的确定不能只看个人偏好,还要考虑阅读距离。看电脑的距离比书远,所以电脑上的字体要比书上的大写。
tips:
找到一本字号看上去很舒服书,可以用 透视法
算出在电脑上用多大字号好。
行宽和对比度
字号可以用 透视法
算出来,但是由于阅读距离变大,行高通常需要比算出来的值更大些。140% 是个很好的选择,但是肯定还得综合你用的字体来考虑。
对比度不能太弱或者太艳俗(garish。比如黄底粉字。)。
iPhone 与 iPad
我们的 app iA Writer
的 iPad 和 iPhone 版本中使用的字号是不同的。为什么呢?
- 二者的阅读距离是不同的。同时,还有个全新的挑战是 iPad 的不同使用场景中,阅读距离也是有很大差别的。为了在所有的阅读距离都不造成阅读困难,我们选择用最大的阅读距离来定义字号。
- 因为 iPhone 阅读距离小,所以行高也要(比透视法算出来的)更小一点。
- 实际上,我们的 app 在 iPhone 上的文字区块的边距(gutter)、字符间距也更小一点。
台式机怎么办?
有人抱怨 iA Writer
电脑版上的字号太大,其实我们这么做的原因和 iPad 版本一样。
为什么不允许用户改字号呢?
绝大多数网站和 app 中的字都太小了,我们的新用户从来没有体验过 iA Writer
看上去有多舒服。我们这么做的主要原因不是要确保所有用户用起来都一样,而是不想 iA Writer
有复杂的设置,你能用它做的就是写字。
那为什么不根据设备分辨率自动调整呢?
这么做会使得软件变复杂。因此我们选择分别给 Mac,iPad 1/2 和 iPad3 不同的设置,而不是所有分辨率。
Response So Far
设计师们习惯于控制,但是网站设计有很多东西是控制不了的。网站设计不是追求完美,而是要找到最合适的妥协。
Article 3: Contrast through Scale
排版最重要的原则:对比。
对比决定了结构、强调、关系、相对重要性,同时也决定了内容读起来多顺畅。
一般有这些方式制造对比:
- scale
- weight
- classification
- case
- color
本文讲 scale
。
What is scale?
Scale refers to the range of values at which type is sized. The more regular the intervals between each value, the more harmonious the scale.
通过缩放(scale),能:
- 控制读者消费内容的步幅(pace)
- 指引读者
- 传达信息结构,帮读者导航、理解各部分内容的关系
从正文段落开始确定字号
从段落开始确定字号有两个原因:
- 通常网站中段落比标题、子标题之类多得多。
- 一般以段落为基础来确定其他元素的字号。
很多元素会影响到段落字号的确定。
- 受众的需求:退休老大爷和青年小伙子对字号的要求是不一样的。
- 阅读距离和文字量:你用27寸5k屏幕距离两英寸来设计,你的用户不一定跟你一样。
选择一个久经考验的缩放比例(scale)(musical scales 的中文是 “音阶”,排版中的 scale 的含义可以以此为参考)
想要使标题、子标题、正文、引用等之间的关系保持和谐一致的话,需要一些简单的计算。当然,想避免这些的话,直接拿现成的比例也能得到一个不错的结果。
现在仍广泛在用的 16 世纪的文字缩放比例(6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 26, 48, 60, 72)很大程度上是由当时的技术所限制的,但是现在我们已经没有这些限制了。
在 Jon Tan 的演讲 Web Type – 80% Science, 20% Art 中,他提出可以用 斐波那契数列(Fibonacci Sequence) 作为计算文字缩放比例的标准。
斐波那契:后一个数是前两个数的和。
思考比率
以前的排版限制(金属、单面、固定的大小)现在没有了,我们有了更大的自由度来做随便哪种一点不和谐的烂缩放比例了。添加一些限制能给你的排版很大的提升。
跟随便定字号不同,有了比率(ratio)的限制计算出来的缩放比例,能让你的排版更统一(consistent)、更和谐。就像建筑物和自然界中到处都能找到黄金比例的身影。
当然比例不知黄金比例一种,我们可以从音乐中找到灵感,Owen Gregory 的 Composing the New Canon: Music, Harmony, Proportion 一文解释了把音乐中的比例(musical scales,音阶)作为排版比例(typographic scales)的方法。
案例
非常棒!
Jeffrey Zeldman’s Web Design Manifesto, 2012
Article 4: The Great Discontent
读了这么多关于排版的文章,来看看这个博客吧。这个博客有很多非常好的响应式排版样例。
Article 5: Universal Typography
Tim Brown 的演讲视频。
- 排版是不是要处理墨水和纸,而是处理
黑和白的关系
。 - "type is a beautiful group of letters, not a group of beautiful letters."
听不明白。没听完。
Article 6: Typecast
本周学了这么多东西,用 Typecast 来实践下吧。
< TODO >
Lesson 7: Responsive Typography In Action的更多相关文章
- Frontend Development
原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...
- CSS动画划入划出酷炫
HTML插入 <!DOCTYPE html> <html class="no-js iarouse"> <head> <meta char ...
- 谷歌Web中国开发手册:1目的&夹
原版的:https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/ 该网站 ...
- [翻译]使用VH和VW实现真正的流体排版
前言 不像响应式布局,通过media query,设置几个变化点来适配,流体排版通过调整大小,适配所有设备宽度.这个方法可以使我们开发的网页,在几乎所有屏幕尺寸上都可以使用.但出于一些原因,它的使用率 ...
- css 字体单位之间的区分以及字体响应式实现
问题场景: 在实现响应式布局的过程中,如何设置字体大小在不同的视窗尺寸以及不同的移动设备的可读性? 需要了解的有: 1.px,em,pt之间的换算关系 1em = 16px 1px = 1/16 e ...
- Lesson 5: Typography in Product Design
Lesson 5: Typography in Product Design Article 1: Interactive Guide to Blog Typography 布局(Layout) 用空 ...
- Lesson 2: Dive Into Typography (排版)
Lesson 2: Dive Into Typography (排版) 排版是字的艺术,是关于字的一切:字体.字号.行高.行长.字重(斜体/加粗/正常).字距(kerning).行距(leading) ...
- Lesson 3: The Amazing New Mobile Web
Lesson 3: The Amazing New Mobile Web Article 1: This is Responsive by Brad Frost 各种响应式网站设计的资源. Artic ...
- [转]Build beautiful, responsive sites with Bootstrap and ASP.NET Core
本文转自:https://docs.microsoft.com/en-us/aspnet/core/client-side/bootstrap?view=aspnetcore-2.1 Bootstra ...
随机推荐
- 移动H5前端性能优化指南[托尼托尼研究所]
概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2. ...
- 百度地图api窗口信息自定义
百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...
- bzoj2534: Uva10829L-gap字符串
Description 有一种形如uvu形式的字符串,其中u是非空字符串,且V的长度正好为L,那么称这个字符串为L-Gap字符串 给出一个字符串S,以及一个正整数L,问S中有多少个L-Gap子串. I ...
- android.os.NetworkOnMainThreadException异常处理办法
网上搜索后知道是因为版本问题,在4.0之后在主线程里面执行Http请求都会报这个错,也许是怕Http请求时间太长造成程序假死的情况吧. 在发起Http请求的Activity里面的onCreate函数里 ...
- Web Service相关工具的配置
近期在学习Web Service Testing,使用到了soapUI这个工具,但是在学习之前,需要搭建Web Service环境,其中有关数据库的连接问题花费了我好多时间,主要还是自己对于很多配置不 ...
- mapreduce (三) MapReduce实现倒排索引(二)
hadoop api http://hadoop.apache.org/docs/r1.0.4/api/org/apache/hadoop/mapreduce/Reducer.html 改变一下需求: ...
- 【Maven实战】仓库介绍和Nexus的安装
在Maven中我们之前进行配置一个项目的依赖时,引用一下jar包,这些jar包第一次都会从一个地方进行下载,这个地方称为仓库,而对于仓库一般有本地仓库和中心仓库之分,但是我们一般在做项目时会在自己的服 ...
- OpenGl学习总结
http://wenku.baidu.com/view/5305fe4f866fb84ae45c8dcd.html
- 源代码管理工具TFS2013安装与使用
最近公司新开发一个项目要用微软的TFS2013进行项目的源代码管理,以前只是用过SVN,从来没有用过TFS,所以在网上百度.谷歌了好一阵子来查看怎么安装和配置,还好花了一天时间总算是初步的搞定了,下面 ...
- LeetCode题目答案索引
LeetCode-Two Sum LeetCode-Median of Two Sorted Arrays LeetCode-Longest Substring Without Repeating C ...