文字排版配色,这是小事吗?

说到文字排版,肯定也避不开文章的细节配色,所以今天来聊聊文字排版设计配色的事儿。虽然在很多人看来这是小事,其实只有亲身体验过,才会发现,这个细节一点都不小。有很多写公众号的小可爱们, 之前也说到文章配色,很多在问文章排版怎么才好看,却不知我背地尝试了多少次。尝试得多了,其中门道也摸索出一些,今天,我就准备“倾囊相授”了(谦虚一点)。

说到文字排版,肯定也避不开文章的细节配色,所以今天来聊聊文字排版设计配色的事儿。

虽然在很多人看来这是小事,其实只有亲身体验过,才会发现,这个细节一点都不小。有很多写公众号的小可爱们, 之前也说到文章配色,很多在问文章排版怎么才好看,却不知我背地尝试了多少次。尝试得多了,其中门道也摸索出一些,今天,我就准备“倾囊相授”了(谦虚一点)。

边距与对齐

这里的“边距”说的是宽度上距离屏幕边缘的间距。现在在电脑上看文章,多数都会在两边加上很宽的留白,所以以下所有要点都针对移动设备,以手机为主。

常用的编辑器都会给文章加一个默认边距,比如公众号就是16px。有经验的小伙伴就会发现,多加一点点边距会令视线更加聚焦,所以不管是自己写文章还是设计文章类模块的时候,我倾向于使边距达到20pt-21px

image.png

对齐方式包括居左、居中、居右和左右对齐。写文章的话,最好就是左右对齐,这样整篇文章都是整整齐齐、段落分明的。如果效果真的不忍直视,或者类似于诗歌那种体裁,再尝试居左或者居中。

image.png


文字

写文章的时候,倒是不太需要考虑字体的问题,因为平台一般都会限制字体。硬是要说的话,选择非衬线体其实比较好,就是笔画粗细一样的字体,无需留心辨认。还有就是,字体宜少不宜多,一篇文章,多个字体只会让人烦。

多说一句,不要以为能下载的字体都能随便用,任何非商用字体在未授权的情况下都是不能用在可传播的文章里的,包括封面图和文中配图里。

无论在 phone、pad 还是 watch 上,文字字号至少要在11pt 以上才适合阅读,正文字号15pt-19pt更好。研究过多篇排版舒服的文章之后,我发现,对于文章来说 15pt-17pt 最为合适,标题另说。我比较喜欢 16pt,不管在多宽的手机屏幕上,都不会小到看不清,也不会傻大傻大。

文字的粗细,专业名词叫做“字重”。一般正文用常规字重即可,但没有重点的文章看着有也点累,所以不妨在重点词句上使用更粗的字重,不够突出的话还可以加个颜色。

image.png

再者就是注意行距,一般默认的文字行距并不太适合文本类排版,尤其是文字贼多的时候。行距在1.5倍以下时,行与行之间就会显得比较挤,读起来很费劲。1.6-1.8的行距能给眼睛一个比较合适的留白,更适合阅读,本文选择的是1.75。

不仅文字行与行之间有讲究,段和段之间也得注意。我是比较喜欢段落之间可以增加间距的,有的会直接敲一个空行,但通常会显得太高了,所以设置合理的段间距好些。此文的段前距是20px,段后距是0,这个数值根据自己觉得舒服的程度调整就好。

image.png


配色

配色是个老大难的问题,但我真的对它如初恋呀,写过那么多关于配色的文章,具体操作啥的就不说了,主要讲思路吧。

在文章配色中,简洁的远胜过花哨的,所以我一般会建议文章里普通文字用一种颜色、不超过三种的有彩色。其实,在我看来,两种就足够了,重点是风格要选好。比方说,文章内容是成熟、稳重、大气型的,用深色就比浅色的好,可以选择蓝灰色、咖啡色之类的。又比如,文章的定位是活泼、少女型的,粉色、淡蓝色、浅紫色等等就可以用起来。

image.png

刚刚说两个颜色够用了,那另一个颜色怎么选呢?我觉得吧,选个差异较大的颜色能适应更多的情况。我现在的两个色彩(浅蓝和深蓝)就属于饱和度差异大的一类,也可以是色相差别大,比如互成对比色、互补色的颜色,微调成统一的风格就好。

对了,还有普通文字的颜色,我只能说,纯黑向来被认为是不合适的文本颜色,偏灰一些更好。

image.png


标题

标题算是集文字、排版、配色与一身的元素,也是文章排版的精髓之一。毕竟除了配图和标题,其他地方也很难做出花儿来了。

先想想最多需要设置多少级标题,一般2-3级也就够了,太多了人还以为画思维导图呢。标题文字往往较粗,而且每一级之间大概跃升两个单位字号。解释一下,假设最多有3级标题,正文字号是16pt,那第三级标题字号可以是18pt,第二级是20pt,最大一级是22pt。

标题居左或居中的多,也可以搭配着来,比如一级标题居中,二级标题居左。

image.png

标题上可以稍微用一些小元素装饰,但是还是简洁些的好,视觉重点还是应该在正文字上。知道你们懒,善良的我收集了一些觉得舒服的标题,不用谢~

image.png


图片

图片的不确定因素稍高一些,如果追求一致的效果,选图片时就需要注意尺寸、风格、内容是相当的。不过有技术的话,自己可以再加工。除此之外,有两个 tips 得注意:

图片尽可能清晰些。因为文章配图基本都支持放大看,甚至可以保存下来,清晰的图总比模糊的更受欢迎。

图片尽量从背景中分离出来。什么意思呢?举个例子你就明白了,公众号文章背景色基本是白色的,在文章中放个白色底的图片就不太能看出来,这个时候可以给图片加个浅灰色细描边或者来点轻阴影,突出区别还高级。

图片的说明文字最好放在图片下方。一般看先文后图的段落,我都会有点懵逼,不知道图是跟着上一段还是下一段。为了避免读者有这样的困惑,对一个图片的解释说明就放在图片下边吧。


image.png


 其他

其他包括头图、尾图、引文、列表等等。

头图一般是放文章的主图或者宣传品牌的图,有些还是动态的。文章的尾图多数是扫二维码关注或者引导操作的。除了风格要搭之外,图最好是都不要太高,否则顶得文章在一屏中露出一点点就不合适。

引文的表现形式很多,加背景色、改字体颜色等等,按需选择即可。列表可遵循正文行距、段距进行排版。

小结

综上所述,文章排版的话崇尚简约的比较多,hold不住花里花哨排版的小伙伴,反而整的不伦不类,那就费力不讨好了。不管是文字排版设计还是其他设计都一个道理。反正还是那句话,文字排版重点旨在提升用户体验,快速清晰表达文章含义,然后在此基础上去美化,本末倒置不可取。


文章评价
登录后可以评论
立即登录