每天都在用的“黑体”,原来这么排版才好看!

2021-8-19    seo达人

图片

汉字的黑体是依据西文无衬线体特点所创造,黑体起初只有一种笔画粗细度,由于汉字笔划多,这会导致小字清晰度较差,所以一开始主要用于标题设计。

随着制字技术的精进,黑体具有了不同字重和宽窄的字形,让黑体应用领域更为广泛,无论标题、内文还是注释都可以胜任。

图片

尤其是随着20世纪末电脑和互联网的普及,黑体字的价值得到了进一步体现,它简洁的笔画特征与屏显介质特性相符,从而成为了当今各种屏幕媒介中最有发展前景的字体。

图片

黑体高度的统一性,可以让字体本身对眼睛刺激降到最低,而把更多的注意力放在文字表达的内容上,特别适合段落性文字的编排,成为正文使用的首选字体。因为正文强调的是字体“读”的功能性,为正文选择黑体可以让读者轻松舒适地进行阅读,专注于文字所表达的内容。

图片

图片

各大字库也开发有各有特点的黑体,其中免费商用的有:思源黑体、阿里巴巴普惠体、OPPOSans、鸿蒙字体。

图片

在黑体基础上又衍生出很多字体,这里推荐的是部分可以免费商用的黑体:

图片

 

黑体的使用场景

简洁和规矩的黑体在气质上没有太大的个性,它适用的范围比较大,可塑性很强,通过字形的变化,可以表现出不同的气质。

 

现代、科技

黑体简洁干练和几何化结构的笔画特征,呈现出强烈的现代感,适合表现科技、未来感相关的情景。(如电子、科技、互联网等行业)

图片

图片

 

正式、严谨

黑体是极具理性风格的字形,没有明显情绪导向也让黑体给人一种中立客观的印象,适用运用在各种正式、严谨和体现安全信赖感的场景。(如政府、企业、医疗行业等)

图片

图片

 

醒目、冲击力

较粗的黑体强壮有力显得十分醒目,还具有很强的视觉冲击力,常用于促销页面,口号式的标题配上粗黑体才够力道。

图片

图片

 

浑厚、力量

粗黑体浑厚稳重,具有力量感,适合运用在运动、工业等设计领域。还有着有男性倾向,常用在体现男性产品的设计中。

图片

图片

 

高雅、精致

笔画较细的黑体结构清晰,没有过多的装饰,显得简约、高雅而精致,有着女性特点,适合运用在服装、化妆品等行业。

图片

图片

 

黑体的搭配实操

案例一

使字体搭配协调的一个基本原则就是选择风格相近的字体。使用同一字族里的字体进行搭配,是最简单、安全的搭配方法。本次案例使用思源黑体进行搭配示范。通过字体的大小、粗细形成阅读的层次感。

图片

西文选择与黑体风格统一的无衬线体“Univers”,粗细尽量和中文相一致。

图片

编排效果:

图片

 

案例二

第二个案例进行一个运动文案的编排示范。带有强烈动感的书法体,搭配具有力量感的黑体,非常适合运用在一些要体现激情活力的运动、游戏、舞蹈等设计主题,硬朗的黑体与柔和的书法体能够产生强烈的对比效果。

图片

西文则选择与黑体风格统一的无衬线体。注意根据书法字的结构和笔势进行排版,通过对文字大小、位置的调整,让文字看起来更紧密也更有节奏感。

图片

也可以选用与书法体风格匹配的西文手写体进行搭配:

图片

 

案例三

第三个案例进行一个时尚女装文案的设计示范。本案例选择较细的黑体和宋体进行搭配,字形形成了微妙的对比,两款字体都有着高雅、精致的气质,运用在具有女性时尚特征的设计中相得益彰。

图片

西文则选择和黑体相对应的无衬线体、宋体相对应的衬线体进行搭配。

图片

编排效果:

图片

如果感觉排版太过于规矩,可以尝试加入手写体加强字形对比,打破呆板感,营造更强烈的动感。

图片

黑体无论是识别性、适用面、视觉效果都非常好,新手使用也不容易犯错,缺点是个性不足,用得不好会显得平庸。用好黑体是现代设计师必须具备的基本功,需要大家不断练习来掌握黑体字的使用技巧。

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝


转载请注明:学UI网》每天都在用的“黑体”,原来这么排版才好看!



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务






分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档