深入探讨黑体字的字体设计

来源£º中国设计在线    时间£º2019-05-10    站内收藏

黑体£¬可说是一种最¡¸日常¡¹的字体£¬在一天的生活中£¬举凡手机屏幕上的app按钮¡¢网页文章¡¢书本标题¡¢杂志内文等£¬常常都会见到它的身影¡£这个大家如此熟悉的字体£¬?#27492;?#24179;?#31561;?#19981;简单£¬事实上£¬它有相当多的造型细节£¬值得细细欣赏品味¡£

本篇将分为两个部分£¬首?#21364;?#39046;各位认识黑体£¬学会辨认风格£¬并了解它与欧文无衬线体的差别¡£其次会告诉大家如何欣赏不同黑体的构架及造型细节£¬了解风格与用途上的差异¡£希望看完这篇以后£¬面对中¡¢日文市面上约50种的黑体£¬大家能选出最合用的字体£¡

 

01.认识黑体

什?#35789;?#40657;体?

面对一般大众£¬可以这样形容£º¡¸拿铅笔或钢?#24066;?#23383;£¬写出来的细线£¬就是文字的骨架¡£而黑体£¬就是从骨架去长肉£¬把细线加粗£¬直到所有笔画都变成粗细一致¡£¡¹

白话的版本是£º¡¸很像拿平头荧光笔或水?#26102;市?#20986;来的¡¢笔画粗细一致的字£¬就是黑体¡£¡¹

进阶的版本则是£º¡¸黑体£¬就是将文字骨架加粗后£¬维持所有笔画造型与视觉上的粗细一致£¬且起笔¡¢收笔是切平的字体风格¡£¡¹顺带一提£¬将¡¸切平¡¹改为¡¸收圆¡¹£¬就是圆体£¡

由骨生肉£¬保持线条粗细一致£¬起笔¡¢收?#26159;?#24179;£¬就是黑体¡£

发现黑体的重要特色了吗£¿就是¡¸粗细一致¡¹¡£这和书写工具有关£¬大部分的中文字体都以毛?#35782;?#20041;笔画造型£¬?#20013;词?#36731;重不一的力度£¬自然会使笔画有粗细差异£¬黑体则以平头笔为基础£¬因此几乎没有粗细变化¡£

书写工具的选用£¬如毛笔或平头笔£¬?#26434;?#31508;画特色会有影响£¡

中文黑体¡Ù欧文无衬线体

这不禁令人联想到欧文字母设计¡£是的£¬黑体的设计就是受到西方无衬线体£¨sans serif£©的影响£¬是非常现代¡¢简洁的字体¡£不过要注意的是£¬许多人说¡¸中文黑体是无衬线体£¬明体是衬线体¡£¡¹这样的模拟其实不太恰当¡£正确地说£¬¡¸衬线¡¹本是欧文字体的专有名词£¬中文字体没有直接?#26434;?#30340;名称¡£它是书写欧文书法时£¬以平头笔配合运笔技巧£¬在起笔处产生的造型¡£

而使用毛笔的中文书法£¬在起笔处的特别造型£¬则可称为¡¸顿笔造型¡¹£¬事实上许多的中文黑体£¬起笔处还是可以见到¡¸顿笔造型¡¹喔£¡所以£¬不要再把中文黑体和欧文无衬线体互相代?#23631;Ë£?#36825;是错误的¡£ 

02.造型细节£­影响黑体风格与用途的关键£¡

接下?#35789;?#30528;欣赏不同黑体的造型£¡首先看到三套黑体的¡¸永¡¹字¡£A是¡¸Adobe繁黑体¡¹¡¢B是¡¸兰亭黑¡¹¡¢C是¡¸Toppan Bunkyu Gothic£¨凸版文久黑体£©¡¹¡£仔细看清楚£¬接下来会问两个问题喔£¡

A£º¡¸Adobe繁黑体¡¹¡¢B£º¡¸兰亭黑¡¹¡¢C£º¡¸Toppan Bunkyu Gothic£¨凸版文久黑体£©¡¹£¬它们是否很不一样£¿

问题一£º哪一个字体的¡¸骨架¡¹最不一样呢£¿

答案是A¡£它最大的差异在于末两笔£­右上方的撇和最后的捺分离¡£另外£¬A的许多笔画特意拉长£¬像最上方的点和第二笔的横画都是¡£之所以这样设计£¬是为了让字的骨架填满空间£¬也就是所谓大字腔¡£

三套黑体中£¬¡¸Adobe繁黑体¡¹£¨A£©的骨架最特殊£¬它采用大字腔的设计£¬将笔画特意拉长£¬并分离末两笔¡£

?#36873;?#27704;¡¹字换成¡¸东¡¹字£¬更能明显看出A是大字腔£¬将¡¸田¡¹的字腔范围套上不同颜色后£¬便能立刻排出大小差异£ºA£¾B£¾C¡£

套色后可明显看出字腔大小差异£ºA£¾B£¾C¡£

字腔会影响观感£¬字腔大的A£¬笔画几乎填满整个字面£¬方正的结构带来稳重感之余£¬也稍嫌呆板£»而字腔小的C£¬¡¸东¡¹的轮廓较有变化£¬中间收窄的¡¸田¡¹更如人的腰身£¬给人曼妙生动的印象£¬也因此让人视线集中£¬看起来有精神¡£观察任何字体£¬都可?#28304;?#39592;架¡¢轮廓¡¢及字腔留意起喔£¡

问题二£º哪一个字体的¡¸笔画造型¡¹差异最大呢£¿

答案是C¡£C在转折与起笔处突出£¬也就是前面所说的£¬中文黑体有类似¡¸衬线¡¹的¡¸顿笔细节¡¹¡£所谓顿笔细节£¬可?#26434;֙?#28216;?#35302;·¥Ã¥¯¡?#23383;体来解释£¬这是一套相当美丽又实用的黑体£¬它在Mac跟Windows 8.0以上都有内置£º

¡¸游?#35302;·¥Ã¥¯¡¹£?#32654;丽又实用的黑体£¬Mac跟Windows 8.0以上都有内置喔£¡

游?#35302;·¥Ã¥?#26377;最自然的顿笔造型£¬在起笔处加上虚线£¬会发?#33268;?#24275;长得像毛笔¡£相信?#26434;?#23398;过书法的人来说一定不陌生£¬只要起笔时稍微下压£¬就会产生这样的造型了¡£许多人对黑体常有现代¡¢数位?#23567;?#20725;硬¡¢没个性等刻板印象£¬但实际上£¬?#34892;?#40657;体的笔画也融入了书法笔触£¬具备柔软优美的造型细节喔£¡

¡¸游?#35302;·¥Ã¥¯¡?#30340;起笔£¬融入毛笔书法笔韵与柔软优美的造型细节¡£

黑体造型细节欣赏£º¡¸起笔¡¹

除了游?#35302;·¥Ã¥?#22806;£¬再另外列出?#25945;?#40657;体£¬下?#21152;?#24038;到右£¬依序是£º¡¸游?#35302;·¥Ã¥¯¡¹¡¢¡?#23567;冢?#35302;·¥Ã¥¯¡¹¡¢¡¸MS?#35302;·¥Ã¥¯¡¹¡?#20013;间的小冢黑体£¬起笔为尖刺造型£¬像是用平头?#24066;?#20986;的欧文衬线£¬右边的MS黑体则收成圆形¡£

观察黑体£¬可以留意起笔£¬像中间的小冢黑体£¬起笔为尖刺造型£¬右边的MS黑体则收成圆形¡£

除了顿笔造型£¬起笔还有一个细微差异¡£回到A¡¢B¡¢C三套字体£¬放大看£¬会发现A¡¢B都是方形£¬但C的起笔造型由宽大逐渐收细£¬因为像喇叭一样£¬故有¡¸喇叭口¡¹之名¡£这在铅字印刷时代£¬具有让印刷字安定清晰的用途£¬但在电脑屏幕显示与高分辨率输出的当代£¬喇叭口变成造型细节£¬线条的曲度及力度变化£¬为字体增添美感与韵味¡£

三套黑体中£¬¡¸Toppan Bunkyu Gothic¡¹£¨C£©的笔画造型最特殊£¬如起笔就有¡¸喇叭口¡¹的设计¡£

黑体造型细节欣赏£º¡¸转折¡¹与¡¸收笔¡¹

除?#20284;?#31508;外£¬还可以注意转折与收笔¡£从转折可以明显看出不同黑体的特色¡£像横撇¡¸¥Õ¡¹£¬三者的处理很不同£¬A是切?#24688;¢B是直?#24688;¢C则非常类似毛笔的回锋¡£

观察黑体时£¬还可以留意转折£ºA是切?#24688;¢B是直?#24688;¢C则类似毛笔回锋¡£

转折的处理会影响速度感£¬像A就有快速的运笔感£»C是慎重地提笔¡¢回锋¡¢再转折£¬速度慢也最有书写感£»B则像是积木组?#24076;?#26159;去掉人味的刚硬设计¡£此外£¬转折处的造型设计£¬也会让观者无意间去揣摩字的书写轨迹£¬以下尝试画出不同黑体的运笔轨道£¬透过观察细节£¬会发现它是影响字体风格£º如¡¸轻快v.s.稳重¡¹¡¢¡¸机械v.s.人文¡¹或¡¸古典v.s.现代¡¹的关键喔£¡

转折会影响速度感£¬试着画出不同黑体的运笔轨迹£¬会发现它是影响字体风格的关键喔£¡ 

释例£º如何具体分析黑体£¿

以下用?#25945;?#40657;体来做总结与复习£¬让大家学会如何分析黑体£¬并在选用时做判断¡£分析时£¬可以先固定字级大小£¬并放入字身框£¬这会帮助我们?#34892;?#21028;断字的整体轮廓£¬像左边的黑体比右边的更填满方框£¬可知它的字腔应该较大£¬右边的字腔则较小¡£

分析黑体时£¬可以先固定字级大小并放入字身框¡£字的整体轮廓能协助?#25735;?#23383;腔大小£¬像左边的字腔应该较大¡£

观察黑体的第一步£¬就是看骨架¡¢轮廓¡¢及字腔大小£¬之后可以试着感受字腔的影响¡£字腔大的字体较有现代与设计感£¬排版效果扎实且牢固£¬甚至?#28304;?#20725;硬感且缺乏个性¡£但因为各笔画间的距离大£¬字体大小不太会影响清晰度£¬大至?#20449;?#21450;车站指标£¬小至企业标准字与logotype£¬都可以使用¡£字腔小的字£¬轮廓则较有?#19979;?#24863;£¬外放内收的结构£¬不仅让它看起来较为凝聚£¬也和传统汉字书法所讲究的美感相近£¬排版后的效果则较有节奏性£¬版面也更透气些¡£

试着排列两种黑体£¬上方的¡¸地铁市政府站¡¹£¬是否比较明晰£¬也更是大家所熟悉的捷运站指标呢£¿

接着进入观察黑体的第二步£¬留意各笔画的起笔¡¢转折与收尾细节¡£以下图为例£¬可以看出左边造型简洁£¬起笔平整¡¢收尾无勾笔£¬转折亦未刻意营造¡£而右边的笔画则富含变化£¬起笔有顿笔及喇叭口¡¢收尾有上扬的曲线勾笔¡¢转折处也有运笔?#23567;?/p>

留意起笔¡¢转折与收尾£¬是观察黑体的第二步£¬像左边的造型简洁平直£¬右边的则充满细节变化¡£

笔画细节设计将影响排版效果¡£细节少的字£¬较生硬且有现代感£¬适合呈现?#24863;?#24687;¡¹£¬用于科技相关场合¡£富含细节的字£¬则?#20808;?#36719;且有古典韵致£¬适合用于文学¡¢或想营造特殊气氛的场合¡£

试着排列两种黑体£¬下方的¡¸黑魔法防御术¡¹£¬是否更让人融入魔法的氛围中呢£¿ 

小补充£º日本如何称呼¡¸黑体¡¹风格£¿在日文字体?#35828;?#20013;该怎么找寻£¿

日本?#36873;?#40657;体¡¹风格称为¡¸角?#35302;·¥Ã¥¯¡¹£?#26085;文中的?#38468;恰?#24565;作kaku£¬是方形的意思¡£而¡¸?#35302;·¥Ã¥¯¡?#23601;是歌德Gothic一词£¬所以日本是以方形的歌德体£¬来称呼中文的黑体¡£?#35828;?#20013;?#32423;?#20250;见到以罗马拼音显示日文字体£ºkaku gothic£¬就是中文的黑体风格¡£在此补充日本称呼¡¸圆体¡¹的方式£¬一样是歌德体£¬只是?#30333;?#25442;成¡¸丸¡¹字£¬丸在日文念作maru£¬是圆形的意?#36857;?#25152;以¡¸丸?#35302;·¥Ã¥¯¡¹£?#23601;是中文说的圆体啰£¡罗马拼音是maru gothic¡£

日本人很爱缩写£¬在?#35828;?#20013;寻找日文的黑体与圆体字体时£¬须特别留意¡£像¡¸角?#35302;·¥Ã¥¯¡?#23601;有三种省略法£¬第一种是只留下¡¸?#35302;·¥Ã¥¯¡¹£¬Adobe附赠的¡¸小冢?#35302;·¥Ã¥¯¡?#23601;是¡£第二种是留下¡¸角?#30784;¹£?#20687;是¡¸¥Ò¥é¥®?#35859;âF础¹£?#36825;是Mac使用者很熟悉的一套完整日文黑体字体£¬一共有十种不同粗细£¬可以满足各种排版需求¡£第三种省略法最夸张£¬只保留¡¸?#30784;¹£?#22312;日本地铁站的指标或海报上常见的字体?#24863;˜Ç础¹£?#20013;文可翻成新黑体¡£

寻找日文的黑体£¨角?#35302;·¥Ã¥¯£?#19982;圆体£¨丸?#35302;·¥Ã¥¯£?#26102;£¬须留意缩略写法¡£像黑体就有三种省略法£¬圆体则有一种¡£

圆体单纯许多£¬只有完整的¡¸丸?#35302;·¥Ã¥¯¡?#25110;省去后半部分的¡¸丸?#30784;¹£?#27809;有其他省略法¡£相信在看了这个补充后£¬大家都能顺利?#19994;?#26085;文的黑体与圆体字型啰£¡

作者£ºRuby

廖珮妏£¬主修書法史£¬關心書法字體的數位化¡£喜歡藝術¡¢歷史¡¢旅行¡¢建築¡¢語言學習£¬期?#25991;܏母?#22823;的文化視野關懷字體議題¡£


转自:https://blog.justfont.com/2018/08/jf-typeclass-intro-3/

本文来源£º中国设计在线

上一篇£º返回列表
关键词£º 黑体字 字体设计 
编辑£ºcdo
相关阅读
    正在加载...
Ðdz¾APPÏÂÔØ