Airbnb前端工程师告诉你，如何在设计中选择正确的字体和版式 - 星点互联3D模型CG素材资源下载

原文作者Jonathan是一位设计师，同时也是一位开发者。曾任职于雅虎，现在在airbnb任前端工程师。大神自述，自己在设计和开发两个领域研究的比较多，这篇文章就分享了他在设计中的一些排版经验，虽然文章中讲到的大部分资源可能是适用于英文排版，但是从排版的层面来说，道理都是想通的。所以，仔细阅读，相信会有所收获！

作为一名设计师，你需要学到的最重要的技能之一就是如何选择字体。这是因为文字内容是设计师与用户沟通的主要方式之一，版式可以决定设计的成败。

排版工作兼具美感和复杂性，有些人把自己整个职业生涯都献给了字体设计。幸运的是，他们的工作都以文档的形式，很好的记录了来，让我们在设计时，有大量的资源可以学习。

本文旨在帮助你学习如何选择正确的字体类型。同时，也鼓励大家去探索那些你自己熟悉的字体组合。

在做任何事情之前，首先都需要确定设计的目标。你想传达的信息是什么？你设计的媒介又是什么？

好的设计，会利用好版式并与目标达成一致。这是因为版式在你的设计中是表达情绪、基调和风格的关键。

例如，如果你设计的贺卡是走很重的插画风，那么选择一款合适的插画风格字体就很关键。合适的字体风格要与整体的设计调性保持一致。

如果你正在设计一个以图片为核心的登陆页面，选择一个不喧宾夺主的简单字体就很关键。使用字体作为一种来强化信息传达的方式。

在确定设计目标之后，接着需要确定目标用户。这一步很关键，因为有关用户的信息，如年龄、兴趣和文化素养，会直接影响到字体的选择。

例如，有些字体更适合给儿童设计时使用。在阅读时，孩子们需要字迹清晰，字型大方的字体。Sassoon Primary就是一个不错的例子，Sassoon Primary是由Rosemary Sassoon开发的，正是基于她对儿童容易阅读字体的研究。

有些字体更适合老人，Senior-friendly字体有更加易读的尺寸，对比度也足够高，同时也避免了复杂的装饰性笔迹。

在选择字体时，要考虑到你的读者和他们的需求。简单来说，需要与你的用户共情。

对于字体设计的灵感，CreativeBloq的《75种最好的免费字体》（https://www.creativebloq.com/gra ... designers-1233380/8）就是一篇非常棒的文章，可以让你正确地选择字体。在那篇文章中，CreativeBloq解释了每种字体背后的玄机。

另一个有用的资源是Awwwards在2015年发布的《100个最全的免费字体合集》。（https://www.awwwards.com/100-gre ... ction-for-2015.html）

Invision 也编制了一个版式字体合集（https://www.invisionapp.com/insi ... na-newsltr_20170322）。你也可以在那里找到很多灵感资源。

想从实际线上网站获得灵感，type.io这个网站会非常适合。这个网站从网上收集到了大量的字体设计案例，另外，网站中还在每个案例底部提供了css的字体样式。

除了寻找专门的字体网站，也可以去查看你最喜欢的网站，看看他们是如何使用好字体的。”WhatTheFont”是一个很好的工具，它是一个Chrome扩展插件，只需要悬停在网页中你希望了解的字体上，就能准确知道它的字体属性了。（译者注：亲自试验了，能很方便的查字体了，有个地方要注意的是，必须等网站加载完成了，点击那个插件图标才有效果哦。）

除了单个字体，还要看看字体搭配的灵感。合适的字体组合和字体本身一样重要，良好的字体组合有助于建立视觉层级，提高设计的可读性。

要获得灵感，可以从Typewolf（https://www.typewolf.com/）开始。Typewolf收录了大量来自不同网站的字体组合灵感。除此之外，他们还有字体推荐和高级排版指导，简直就是版式创作者们的宝库。

FontPair (http://fontpair.co/）还专门为谷歌字体设计了字体搭配灵感。你可以按字体类型组合进行排序，例如无衬线字体和衬线字体或者衬线字体和衬线字体。

最后，在网上可以找到大量由设计师设计的字体组合。例如：《 Typography: Google Fonts Combinations 》（https://www.behance.net/gallery/ ... -Fonts-Combinations）和《Typography: Google Fonts Combinations – Volume 2》(https://www.behance.net/gallery/ ... mbinations-Volume-2 )，只需要在Dribbble和Behance上搜索“font pairing”即可找到。

有了前面的研究和灵感，你就可以选择自己喜欢的字体了。在选择字体时，有三个原则需要记住：可读性，易读性和目标。

选择常规且易于阅读的字体，要尽量避免一些装饰性的字体。同时，还要注意到字体的用途。比如，一些字体更适合作为标题而不是正文。

在字体组合方面，保持简单原则，在一个页面中最多使用三种不同的字体。此外，字体的组合需要有明确的对比，这样会有助于引导读者的眼睛，首先应该是标题然后才是正文。同时，你还可以使用不同的字体大小，颜色和字重来完善视觉对比。

对于web字体来说，你可以去使用谷歌字体、Typekit和Font Squirrel。谷歌字体是免费的，而Typekit和Font Squirrel提供了免费和付费的字体。