作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
约旦狄维士
Verified Expert 在设计

Jordan的专业知识涵盖品牌战略、服务设计和用户体验. 她与组织合作,帮助加强团队和创新.

专业知识

以前在

Central Saint Martins
分享

几乎任何人都可以选择一种字体——只需在下拉列表中单击一个名称. And yet, choosing 正确的 typeface is one of the most deliberated decisions of the 设计过程.

排版 设计师 dedicate their careers to crafting letterforms. In those small shapes, experts balance things like emotion and neutrality, personality and practicality, legibility and flexibility. 为一个特定的设计选择一个字体需要考虑一长串的问题.

传统上, 平面设计师一直在研究印刷设计方面的排版基础. 但是现在设计师的角色跨越了所有类型的数字媒体, typography is a bigger beast to tame. In the spirit of brushing up on the fundamentals, use the web typography tips 下面是在选择字体和格式时,为了获得最佳的阅读体验.

The Challenges of Digital 排版

当涉及到印刷设计时,用户将如何与之交互的变量很少. 打印出来的页面不会因为握着它的人而变形——颜色可以严格控制,字体保持不变. 多么奢侈啊. Digital typography is a lot more fluid. When typography appears on screen, there are many factors that contribute to how it’s displayed, some of which include:

  • Screen size: It’s impossible to predict, however, Responsive 设计 aims to accommodate any slight shift in dimensions. But that means typesetting can sometimes be done in vain.
  • 屏幕分辨率:像素密度对文本的易读性起着很大的作用. 技术的进步使高分辨率屏幕更容易为大众所接受,但是 设计师 should keep in mind the outliers with older tech.
  • 屏幕校准:亮度级别决定颜色在屏幕上的显示方式. 网页设计的颜色选择需要适应所有类型的屏幕设置.

Choosing the Best Font for Reading on Screen

数字设计是一门难以捉摸的工艺——不久前,我们还被限制在只有几种字体类型可以与低分辨率显示器兼容.

We’ve come leaps and bounds in our typeface options. 它们是为屏幕精心制作的,设计上有一些细微的差别,以提高可读性. Just as printed fonts trick the eye to increase legibility, like 油墨陷阱, good web fonts will do the same.

Print design fonts vs. web design fonts

设计不必局限于通用的标准字体(Times New Roman现在可以退出了). 对于设计师来说,有无数的选择可供选择,以获取网络安全且可访问的字体. 谷歌字体, 字体库, Adobe Typekit are a few that offer easy integration and a wide range of choices.

Formatting for a Pleasant Reading Experience

Selecting a typeface is only the beginning. Decisions around line length and height can make or break a 数字设计. 有一些简单的技巧——永远不要使用所有的大写字母,尽量减少字体的数量——但是很多格式的决定都依赖于反复试验.

调整格式的最佳字体阅读与网格情人屏幕上

理想的文本大小取决于所选择的字体,因为x高和反开放等因素会影响易读性. The text size will then determine the 行高 and length. 测试这些决策之间关系的一个简单方法是使用下面的工具 网格的情人, which uses sliders to change the appearance of each measurement.

选择文本块后面的背景色和字体颜色本身一样重要. 两者之间的对比将决定副本的可读性. WebAIM的 Contrast Checker 有助于轻松确定颜色组合的对比度,使调色板符合可访问性标准.

Never Ever Skimp on Testing

A guide is useful when designing an onscreen experience, 但是如果不去实地观察,就很难知道一个设计是否成功. 在屏幕上测试排版和显示设置,这些设置落在平均值的边缘,比如几乎过时的智能手机, the largest hi-res monitors, screens turned up blindingly bright. 通过极端条件的设计为完全用户访问做好了准备.

A Guide to Web 排版

在设计屏幕时需要考虑很多事情, as technology and products advance, the conditions to design will continuously shift. 然而,当涉及到网站排版时,有些事情似乎总是正确的.

这里有一个全面的指导,选择正确的字体和格式的可读性.

A guide to web typography.

Understanding the basics

  • What is typography in web design?

    网页设计中的排版与印刷设计相似,但需要考虑某些因素以确保所有屏幕类型的易读性. 字体, 类型的大小, color, 行高, 字母形状是排版中的一些因素,必须仔细平衡,以提供愉快的阅读体验.

  • Which font is best for reading on screen?

    最适合在屏幕上阅读的字体是具有独特和开放的字体. 比邻星新星, 乔治亚州, 和Fira具有在各种屏幕显示上易于阅读的特性. Other factors impact a font’s legibility, such as 类型的大小, 行高, font and background color contrast.

  • What is the best font size for a website?

    网站上的字体大小应该响应显示它的屏幕大小. 在一般情况下, a font should be 12-16pt on a mobile screen, 15-19pt on a tablet, 16-20pt on a desktop computer screen. These are guidelines for website font size; factors like 类型的大小, 行高, line length should also be considered.

  • What is good typography?

    Good typography, like good design, is invisible. 排版的主要目的是传达书面信息. 字体应该设计得清晰易读,并提供愉快的阅读体验. Factors like 类型的大小, 行高, 线条长度是排版中应该考虑的元素.

  • How many fonts should a website use?

    一个网站应该把字体的数量控制在最低限度——总共不超过三种. When a site has too many fonts, 用户可能会因为视觉设计的变化而迷失方向. 所选择的字体应该有各种各样的重量和风格,可以在UI设计中策略性地使用.

Hire a Toptal expert on this topic.
现在雇佣
约旦狄维士

约旦狄维士

Verified Expert 在设计

New York, NY, United States

Member since March 28, 2018

关于 the author

Jordan的专业知识涵盖品牌战略、服务设计和用户体验. 她与组织合作,帮助加强团队和创新.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前在

Central Saint Martins

World-class articles, delivered weekly.

Subscription implies consent to our 隐私政策

World-class articles, delivered weekly.

Subscription implies consent to our 隐私政策

Toptal 设计师

加入总冠军® 社区.