更多设计文章，设计交流，欢迎添加 | 微信ddm7212

关注#公众号：SKY盖哥 ，第一时间获得设计干货和分享内容。

一、字体重要性

字体对于很多新人设计师来说，是一件比较麻烦的事情，如果在商业设计上想使用你想要的一些字体，有时候需要巨额的版权费，字体侵权的案例每天都在发生。虽然网上有很多免费的字体，但是有些质量比较低，或者只是一些限定的字体，大家使用时候一定要务必小心。

二、巧用字体大小拉开层级

字体是页面中非常重要的元素之一，字号用多大，以及字体的颜色深浅非常重要。上面两张效果图，相信我们做设计时，会经常遇到，设计元素也都遵循着规范，但是仔细看会发现有很多细节问题，我们一起来解读下。

我们仔细的解读下，会发现这个页面中的字体运用了30，28，24三个字体，特别在运用的时候，标题和副标题之间的对比太小了。

为什么觉得字号会有问题，因为字号大小对比太小，30和28号，从视觉上相差不大，很多设计师设计看起来没有层次的原因，也是因为层次没有拉开，所以会看着没有终点，大家设计大小过于接近。一般来说，字体有层次，字号之间至少得相差4号以上。

我们优化字体，从原来相差2个字体，调整到4个字号大小，这样对比更加强烈，首先色彩上已经拉开对比，其次文字大小上，也拉开了对比。整体的对比感也就出来了。

字号加大到4的差别，我们才能在视觉上感觉明显差异。

改完后对比效果还是很明显，节奏比之前清晰了很多，页面看起来也不会信息糊在一起了。

弹窗上字体调整，标题信息的第一优先级，其次是辅助信息。所以这个小技巧大家一定要记住，如果你在UI设计中，想要页面有层级，至少你的文字之间字号差距4或者以上。

那么问题来了，我们该如何系统的自定义一个字体的字号呢？有没有一些设计方法呢？

三、运用比例尺让字体更有节奏

大家工作中一定会遇见一些问题，这个地方标题是用36呢还是用32号字体？如果你们产品就你一个设计师还好，如果有很多个设计师合作，如果没有一个规范约束，肯定会各种乱。

当然，我相信很多公司都有各种字体规范，之前我们做项目也有，但是能真正做设计时候用到特别少。后面我们就使⽤了⼀个⽐例尺⽅法。

什么是比例尺？

比例尺其实是一个比例，有点类似于黄金比例，它平时运用到建筑，音乐艺术中比较多。比如建筑的尺寸，钢琴按键的比例尺寸，这些尺寸是有一定规律的，所以叫比例尺。

比例尺怎么操作？

第一步，我们先要确定一个基础的字大小，一般来说是页面中最常用的，比如正文，常用移动端正文使用28px比较多（750分辨率下）。

第二步，就是需要定义一个比例系数，然后使用该比例系数乘以基础字大小生成的一系列字体大小。

怎么确定基础字体大小？

字体是页面中非常重要的因素，如何选择基础字体大小，一般从产品类型维度考虑：

我们的内容类型，是大量文字还是图片还是视频。如果我们是新闻app。那么文字毕竟多，所以我们的字体要考虑一个最合适的大小，比如常用阅读文字大小是28，30等等。

如何选择比例大小？

Sheetsu.com有一个公式，可以根据你的内容去设置一个字体系数比例，比如说，你的产品，如果想设计上留白更大，杂志感多一些，你可以比例系数大一些，如果你是电商，需要内容比较琳琅满目，可以比例系数小一些。这里也提供了一系列公式，让大家选择。

你选择的文字大小，以及比例基数将影响你整体的字号大小。这没有一个固定的答案，谁试谁知道。我们来看一个实际案例！

比如淘宝app中，平时商品上文字内容比较多，内容也比较复杂，场景多。28号字体是经常使用的，那么我们就可以选择28号位基础的字体。

因为淘宝内容比较多，所以整个比例基数定位在1.124比较合理，然后得出以下参数：

28 X 1.125 = 31.5

31.5 X 1.125 = 35.44

依次内推，然后四舍五入，得出整个字体比例层级。

28；32；36；40；44；50这几种层级的字号。那么这样设计出来的字体就会非常有节奏。

推荐一个比例工具

这个网站 https://type-scale.com/ 可以输入字号自动生成，操作起来很简单。

第一步输入基础字体，第二步，点击下拉框选择一个比例尺寸。然后其他的可以不用管，字体因为中国app基本都是苹方。所以可以忽略。

然后就出来很多字体比例啦，1.125倍数的。

不同比例的字体在页面中使用出来的效果也不一样，大家可以多去试试。

最后

这个小技巧非常有用，是做设计规范必备的一个小方法，希望可以帮助到你。

如果觉得本文内容不错，还想知道更多设计小技巧，欢迎随时加叮当猫微信：ddm7212，进行随时咨询。

Powered by Froala Editor