怎样给扁平化风格选择合适的字体（附字体案例）

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

@kamiyoung 扁平化设计是时下最流行的设计风格，之前我们已经探讨过扁平化设计的原则（原文链接）很多朋友都提出了自己的疑问和观点，今天我们将回答其中一些热门问题。

“扁平化设计中使用什么样的字体最合适？”

此教程是木子设计网翻茄匠@kamiyoung 为大家精心翻译的，很用心呢，希望各位亲爱的编辑同仁们转载时艾特上妹子，在此感谢。:）
相关优秀资源推荐：
扁平化字体 → 24套适用于扁平化设计的免费英文字体
扁平化文章 → 推荐！22个超赞的扁平化设计经典案例

扁平化设计与版面设计

http://www.floatdesign.net/

https://coderwall.com/futureal

http://www.fitbit.com/

www.who-wanna.com/en/

在《扁平化设计趋势》（原文链接http://designmodo.com/flat-design/）一文中，很大的篇幅都在讨论版面设计。这使得观察、选择、使用何种字体成为融入扁平化设计趋势的重要因素。

优秀的版面设计能同时满足读者的审美需求和阅读需求。版面的视觉效果要与设计和信息传达的整体风格保持一致。
简洁是扁平化设计最大的特点，因此选用简单的字体就更加适合。为了保持简洁的设计宗旨，大部分扁平化设计最多使用两个系列的字体，很多只使用一个系列。

由于扁平化设计常常采用明亮的色彩方案，因此文字的清晰程度和粗细就显得格外重要。我们需要寻找有笔触效果、与配色方案既对比鲜明又和谐统一的字体，这些字体要既要满足一定的审美需求也要便于阅读。
最后，在表现视觉效果的时候，可能需要一些锐利的字体，这些字体似乎更加适合表现扁平化设计的细节。

选择字体

http://simonemarcarino.com/

http://wistia.com/

http://www.tvlcorp.com/

常常看到设计师在进行扁平化设计的时候选用sans serif字体。但那不是唯一的选择，一些新颖的字体同样会有很棒的效果。

Sans serif typefaces 有统一的笔触宽度，是目前扁平化设计中最受欢迎的字体。笔触的宽度不发生变化，因此看上去十分简洁，同时易于阅读。这种字体适用于很多背景，特别是那些扁平化的背景。字体描边加粗以后同样能够在色彩鲜艳的背景中呈现出很好的对比效果。

Serif typefaces 也是一种选择，但是并不是经常被使用，因为这种字体看起来较为正式且包含了更多的装饰性元素。

在扁平化设计中设计师从头到尾只使用一个系列的字体是很普遍的事情。（为了让设计看起来没那么单调，设计师也常常选用2至4种字体作为调节。
选一种样式较多的字体，例如含有bold、 black 和 light等样式。这样即使只是用一种字体也可以呈现出充满层次感的丰富的视觉效果。

novelty typefaces 是扁平化设计中另一种不错的字体选择。可以尝试一些新颖的字体，但是这种字体应该和sans serif具有相同的属性，例如清晰的线条和统一的笔触。避免过多的装饰性细节。

虽然在扁平化设计中经常只使用一种字体，但是如果有一种比较新颖的字体，选择两种字体也是不错的注意。当文本比较简单、字号比较大的时候可以使用较为新颖的字体，在字号较小，文本内容较多的区域使用另外一种字体。

别总想着用那些陈旧的字体。虽然像Arial这些常见的字体在扁平化设计中依然表现出色，但是选择一些特别的字体会给设计增添些许活力。由于很多设计师在进行扁平化设计的时候都会采用相似的颜色搭配和技巧，因此如果希望你的设计能够脱颖而出，选用新颖的字体就显得很重要了。选用独特的、出人意料的字体能够帮助你的设计建立识别性。

专注文本内容

http://neueyorke.com/

https://www.standbuy.us/

https://flaticons.co/

文本内容本身和字体的选择同样重要。
扁平化设计的重点在于简洁，文本内容应同样保持简洁。

请确定你对文本内容的选择和编辑是恰当的。选用直白的语言，明确地展示给用户你的网站如何工作。在需要用户执行操作的时候请选用简单直白的表述。在该说"现在付款"的时候别啰嗦地说"点击按钮进行付款"。

色彩和字体的搭配

http://www.profoundgrid.com/

http://www.geckoboard.com/

http://minimalmonkey.com/
字体的粗细以及颜色的选择在版面设计中很重要。目前在扁平化设计中黑色和白色是最常见的文字颜色。由于这些文字常常摆放在色块的顶端，所以选用黑色和白色看起来效果还不错。

在文字和背景间需要使用对比效果，这样才能让文本内容清晰易读。别使用阴影、渐变等类似于拟物的视觉效果，设计师必须要有通过色彩进行内容区分并使关键内容凸显出来的能力。

空间和大小

http://apps.microsoft.com/windows/en-US/

http://friendsoftheweb.com/

http://www.buildwindows.com/

设计师要善于在扁平化设计中利用空间和大小的变化完成设计。
在设计中要有恰当的留白，让版面有呼吸感。扁平化设计要充分体现出设计的可用性。你希望用户完成从点击到敲击的一系列操作，那么给这些操作多留一点空间吧，将重点转移到文本内容上，然后很自然地，用户就知道怎么完成这些操作。

可以考虑把文字调整得大一些。当你选择了较为纤细的sans serif字体或者新颖的字体时请认真考虑这个建议，这样能增强文字的易读性。

上述技巧需要配合使用。给文本预留更多的空间将允许设计师选择更大的字号。并且能够调整不同文字的大小。请将空间和大小视作关键的可用性技巧，按钮是否足够大？每个按钮都有自己的特点吗？样式设计能够清晰地告诉用户网站的功能和接下来需要进行的操作吗？

字体建议

有种类繁多的字体可供选择，希望以下免费的字体能够激发大家的设计灵感。
 

Lato (Google Fonts)

Franchise (Font Squirrel)

Junction (League of Moveable Type)

Aller (Font Squirrel)

Museo Slab (FontSpring)

Telegrafico (Ficodfont)

Gnuolane (FontSpring)

ChunkFive (Font Squirrel)

Lovelo (Font Fabric)

Mojave (Behance)

木子设计网 SDC翻茄匠：微博：@kamiyoung
原文地址：designmodo

 
================关于木子设计网================
"木子设计网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座：每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音（YY频道：15335158）分享实战经验。
设计微博：拥有粉丝量43万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：https://www.muzisucai.com/
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【muzisucai_com】优设哥的全拼
您也可以通过扫描下方二维码快速添加：