步骤3：
有了对应角色的定义以后，就可以开始下一步，为它们分配字重、字号和基础字色了。大标题使用 18pt 的中粗体，次标题使用 16pt 的中粗体，正文使用 14pt 的常规体，次文本使用 12pt 常规体，注释也使用 12pt 的常规题。然后为他们分别分配 B 值为 10、10、40、40、60 的灰度，这样字体就具备了初级的层次感。
步骤4：
只依靠灰度值是不足以满足真实界面设计需要的，所以这个过程中，我们要对一些比较特殊的文字类型使用一些其它色相进行突出。例如标题下方的小子用赭石色，地址和电话这些可以点击的文字使用主色绿色（根据其它页面设计用过的色彩，因地制宜了），进一步丰富了文字的展示样式。
步骤5：
到这里，当然还没结束，前面花了大篇幅讲的文本区域与行高，这时候就要隆重登场了！故意留到后面再讲，是因为对于新手来说，先做样式再排版会比较友好一点，等到适应以后就不用在意顺序了。
文本的设置难题主要来自于行高的制定，我们前面已经说过，最稳妥的做法就是为所有文本设置可以直接支持合理多行显示的行高。比如简介和详细介绍部分的文字，行高明显需要我们做出调整。简介使用 20pt 行高，介绍使用 26pt 行高，且因为是多段文字设置段间距为 10pt。
步骤6：
除了这种显而易见的多行文本以外，再看商家名大标题，实际上这个区域是支持两行显示的，虽然我们只做了一行，所以我们也要为它设置对应多行的行高，这样这个字体无论在任何情况下都可以正常显示。
所以，我们将所有字号设置了合适的行高，参数如下：
字号 12 的行高从 17 改为 20
字号 14 的行高从 20 改成 24
字号 16 的行高从 20 改成 26
并将文本区域设置成实际文字的宽度，再根据亲密性原则对文字进行合适的间距调整，就可以完成最终的效果了。
是的，没错，文章到这里还没结束！光了解怎么把图做出来是不够的，设计的任务，还要想办法合理过度到开发阶段，而在前端实现我们设计稿的过程中，最让人头疼的问题绝对不是动效，而是字体设置的差异，导致细节上的崩坏。
所以最后，我们要站在实际项目的角度上，来有哪些是设计师需要关注的事情。
我们先从前端程序员完成界面样式的开发逻辑讲起，很多人以为了解技术，是要我们自己学代码，实际了解技术是明白功能和结果实现的过程，而不是具体操作。
在各种代码类型中，我们会将实现页面视觉效果的过程称为 —— 界面布局，布局是个动词。虽然每一个系统，不同的代码版本，都有各自的布局特性，但大体上它们的实现逻辑是一致的。
界面布局的实现过程，就像是一个堆积木的过程，每一个积木，就是一个矩形区域，矩形区域内可以容纳图形、矢量文件、视频动画、文本内容等等。程序员通过一定的方式，将矩形区域置入页面中进行排列和定位，再在其中添加对应的视觉内容，实现最终用户可见的样式。
比如下图是 DW 中前端布局效果的预览，线框的矩形就是一个 “积木”。
矩形区域在一定程度上可以等同于前文所说的文本区域，除设置长宽尺寸以外，更重要的事情就是可以用来定义它的坐标和位置。
飞特游客
委托设计