30天打造品牌特色电商网站 Day.19 文字的排版

字距、行距、与其他物件的距离，调整适当能让使用者有舒服的体验，而良好的排版能引导使用者优先接收整个画面的重要资讯。

字与字的距离

1. 字距：
   通常不太调动，不过想要创造出质感，或是刻意想要拉开文字，可以利用 letter-spacing 接上字跟字之间的距离。
2. 行高：
   阅读是左右向阅读，因此上下太靠近会干扰到阅读动线。行高能留出空白，减少拥挤感。这边建议一般可以使用 1.3倍 或 1.5倍 来做设定（行高参数输入的是倍数，因此只要打数字）

段落靠齐

1. 水平方向
   大部分常见是靠左，靠左不但是大部分人较习惯的方向，且能让各长短不一的文字区块还能有整齐的效果，比如商品列表因为每项产品的名称长短会不一致，都靠左就能达到平衡。
   参数是 text-align ，常见设定有左(left)、中(center)、右(right)，视整体排版所需而调整。
   一区块的大标题，或是有些较空旷的地方、一行只有纯文字叙述，就适合置中排版。

2. 垂直方向
   用 align-items-center 来做垂直向的调整。
   若不设定会靠上方，不过有时为了平衡画面留白空间，会调成那一排的垂直居中，常见於首页的品牌叙述等。

在文字上画线

文字上的线，能在观看上更了解文字的意义。使用 text-decoration 可以设定线的位置。

1. none
   取消画线，可以用来去除default预设，比如 <a></a> 连结。
2. underline
   增加文字下底线，如果想要让文字有强调意味，可以考虑下底线的样式。
3. line-through
   删除文字的线，若是想标示特价价格，就能标示出原价并运用这样的样式。

排版总结

排版是不同物件，不断的排列组合。
这边提供几个电商网页常见的小重点整理给大家：

1. 纯文字按钮或连结之间要给予足够开的空间
2. 有背景底色的文字区块，可以让文字左右、上下都置中
3. 标题可以统一靠右、置中
4. 遇到较多文字叙述的情况，要注意阅读感受是否会太壅挤。

以上2篇关於文字的设计就到这边，希望能帮助大家在文字上更有灵感！