网站改版，尝试换一个英文字体来提一提视觉鲜亮感，看了最近的优秀App：Airbnb、BOSE Content、Apple MUSIC 字体字号的大胆使用让人印象深刻。

在选择字体前，需要知道字体分为哪些

• Serif 字体这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。

• Sans-serif 字体这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。

• Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。（金融网站适合使用）

• Cursive 字体这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。

• Fantasy 字体这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。

字体网站上查找合适的字体，推荐https://fonts.google.com/ 可以添加几个不同的字体到对比页面，然后输入自己想查看的文字，即时显示字体效果，方便对比。

茫茫字海中筛选了3种字体，对比Montserrat 、Roboto、Gotham-Book 、Museo-sans...最后挑选了Montserrat ，各种粗细都好看，和LOGO很搭，数字显示效果也不错。

和LOGO 对比

但理想很丰满，现实总是会给你当头一棒。

在真实页面做出来之后，发现在较小字号时，千分符与小数点不容易分辨 被测试吐槽...

上面这个问题还好，紧接着发现了一个无法回避的问题

众所周知标准财务报表金额都是右对齐的，方便直观对比金额的多少；

如图：

Montserrat字距不是等宽的，右对齐时会发生什么问题呢：

字距不等会对列表阅读造成困扰，无法直观的看到一列数字其中一个的真实值大或小，这在金融网站上是一定不能用的。

重点来了。

除了字距不等，标点相似，这款字体各种地方都深得我心，怎么办呢。着手改字体吧。

Google一番后找到一款可以修改字体的软件Glyphs。界面简洁，上手快，支持中文。

首先，打开软件，界面很简单，和sketch一样，左侧理解成目录吧。

修改字距：双击一个最宽的数字，比如0

将其他字符的宽度都调至600.然后保持左右空白位置大致相同。

下面调1 这里注意，不用在意0和1的左右间距是否相同，只需要把字距调统一。

标点符号。和钢笔使用方法相同，选中逗号的两个点，往下拖。

句号同样方法处理。修改完0-9之后，点击文件-输出。

再看一下修改后的样式。数字宽度相同，千分符与小数点区分明显。

这样看起来就舒服多了。（忽略我倒数第二行的错误）

拓展阅读：

字体修改软件Glyphs下载：http://xclient.info/s/glyphs.html

官网：https://glyphsapp.com/

下面介绍的是网页设计（包括移动端）在选字体时应该注意的事情。

w3school 标准：css字体系列