小纽扣

字体的主要工作是为了促进读者的可读性,并激发读者阅读的积极性。

排版是每个设计较为强大的组成部分。

 

内容为王

字体的主要工作是为了促进读者的可读性,并激发读者阅读的积极性。

下面是5种在网站和移动端应用中最常用英文字体。

 

1. Open Sans 字体

Open Sans 是由 Steve Matteson 设计并由谷歌委托的一种人文主义无衬线字体(Sans-Serif)。

Open Sans 对打印字体和网页字体进行了优化。由于这种字体在许多字母上都有宽的光圈和一个大的X高度 (大小写字母), 所以无论它是在大屏幕还是在小屏幕上,它始终能保持高度清晰。

Open Sans 字体

 

网页设计中使用 Open Sans 字体。图片来源:Riccardo Anelli

类别:无衬线(Sans-Serif)

配对字体:Open Sans 可与多种字体进行配对,如Montserrat,Lato, Brandon Grotesk 和 Roboto。

设计建议:标题28像素,常规内容16像素。

来源:Google Fonts(谷歌字体)

 

2. Roboto 字体

Roboto 字体具有双重性质。它有一个机械骨架,主要是几何形状的。 字体同时也具有友好和开放的曲线。

Roboto 字体

 

Roboto 字体也是 Andriod 和 Google 其他服务的默认字体。

在 Google 产品中使用 Roboto 字体(RIP 收件箱)

类别:无衬线(Sans-Serif)

配对字体:Roboto Slab, Open Sans, Lato, Playfair Display。

设计建议:常规内容21像素。

来源:Google Fonts(谷歌字体)

 

3. Helvetica 字体

Helvetica 是一种广泛使用的无衬线字体,由瑞士字体设计师 Max Miedinger 和 Eduard Hoffmann 于1957年共同开发。Helvetica 的显著特点是高 X轴 、水平或垂直线条上的笔画终止,及字母之间非常紧密的间距,这使其具有紧凑的外观。

Helvetica 字体是网页设计的热门选择。图片来源:wabydo

 

使用的 Helvetica 字体。图片来自 Peter Dawson

 

在打印字体中使用 Helvetica 字体(英国政府出版物)

Helvetica®Now 在2019年发布,代表着有史以来最著名的字体故事的新篇章。

类别:无衬线(Sans-Serif)

设计建议:标题48像素,常规内容18像素。

配对字体: FF Tisa, Georgia, Roboto, Benton Sans。

来源:Fonts.com

 

4. Monterrat 字体

布宜诺斯艾利斯传统 Monterrat 附近的旧海报和标志激发了 Julieta Ulanovsky 设计这种字体。几何类型对数字的使用进行了优化,它成为现如今网站和移动应用程序的绝佳选择。

Monterrat 字体

 

Monterrat 字体适用于所有简短的大写

图片来自:eddieolin

类别:无衬线(Sans-Serif)

设计建议:标题尝用30像素,常规内容用18像素。

来源:Gooogle Fonts(谷歌字体)

 

5. Avenir 字体

Avenir 在法语中是“未来”的意思。该家族的灵感来自于20世纪20年代发展起来的以圆形为基础的无衬线字体的几何风格,比如 Erbar 和 Futura

Avenir 字体

 

图片来自:blackoptical

 

正在使用的 Avenir 字体:dutchnews

类别:无衬线(Sans-Serif)

配对字体: Minion, Georgia, Helvetica。

设计建议:标题30像素,常规内容14像素。

来源:Fonts.com

 

用于查找和配对字体的工具

下面列出会简化字体选择和配对的过程的两个工具:

字体

https://uxpro.cc/toolbox/visual-design/fonts/

 

排版

https://uxpro.cc/toolbox/web-design/typography/

 

原文地址:UI中国

作者:SKYUI_HOME

 

转载请注明:学UI网 » 5个网页及移动端设计中最常用的英文字体

登录收藏
 
你可能喜欢的:
找不到素材?这份免费APP UI Kit资源大礼包送给你!找不到素材?这份免费APP UI Kit资源大礼包送给你!
Design Whitelist_设计白名单(附字体下载包)Design Whitelist_设计白名单(附字体下载包)
【史上最全】设计师必备的83个设计资源网站【史上最全】设计师必备的83个设计资源网站
Vera Block极品全套模板【干货下载】Vera Block极品全套模板【干货下载】
人物与场景自主切换的插图设计库——humaaans人物与场景自主切换的插图设计库——humaaans
干货!最全优秀搜索框设计案例干货!最全优秀搜索框设计案例
源文件 | Web、iOS和Android三端元件库下载源文件 | Web、iOS和Android三端元件库下载
史上最全的25个UX/UI设计灵感类网站史上最全的25个UX/UI设计灵感类网站
ios11 ui kit SKetch视频介绍+SKetch源文件ios11 ui kit SKetch视频介绍+SKetch源文件
8个设计师必看的免费UI图标设计资源站8个设计师必看的免费UI图标设计资源站