邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用

2019,都在用 iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用

【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多

干货!2019年你确定要错过这份优秀Web字体清单吗?

Grace 2019-04-01 14:19:43 阅读:7125

就设计元素而言,90%的网页设计归结起来就两个要素:图片、字体。字体作为设计之魂,其重要性不言而喻。茫茫网海中,寻找满意的字体犹如大海捞针。由于经费原因,大家往往在付费与免费字体之间徘徊。别急,Mockplus的小伙伴们为大家整理了一份高质量的字体清单,付费免费都可以满足。希望Mockplus的努力能为你优秀的设计尽上一份绵薄之力。


小提示:请各位设计师养成良好的使用习惯,使用之前,请务必检查字体使用条款哦~


字体安全很重要

何为“安全”字体?--Web安全字体是通常预装到大多数设备的字体- 计算机,移动电话,智能电视和平板电脑。


为什么Web安全字体很重要?

理想状态下,你可以选择任何想要的网站字体。而实际上,你可以使用的字体类型是有限的。大多数计算机和Web浏览器都带有一组由制造商预先安装的字体,但是它们的设计通常都不相同。


如果你使用的字体未安装在用户的计算机上,那么你的网站将恢复为通用字体,造成的结果是用户的设备无法读取该字体或显示为设备上的默认字体。这对于网页的UI设计以及用户体验是非常不友好的。如果你想保持网站的设计和视觉品牌一致,那么使用网络安全字体可确保你的网站在不同的设备上完全按照你的预期所显示。


例如,大家在使用原型设计工具Mockplus时也会遇到网页端预览字体与手机端预览字体不一致的问题,同样也是这个原因。所以大家在使用Mockplus的时候遇到字体问题先排查一下电脑中是否有安装对应的字体哦~


字体应用建议

1. 选择基准字体

一般来说,字体主要分为以下四种:

  • 带衬线字体
  • 无衬线字体
  • 手写体
  • 装饰体


2. 选择大于 12 磅的字号


3. 注意文字长度


4. 注意间距


10款安全的web字体集锦(附下载地址和CSS下载地址)

1. Arial


 Arial

Arial字体是过去30年来使用最广泛的设计之一。由Monotype Imaging设计师RobinNicholas和PatriciaSaunders于1982年在早期的IBM激光打印机中使用。由于Arial在大型和小型尺寸以及各种应用中都易于阅读,因此Arial几十年来一直是主要的屏幕字体。


适用范围:广告,书籍设计,办公室通信,海报、大型平面广告


下载字体

CSS字体堆栈


2. Calibri


Calibri


微软发布的Calibri及其在许多应用程序中作为默认字体的实现得到了普遍认可。它是一种人文主义的无衬线字体,以其温暖和圆润的线条而闻名。Calibri的紧凑布局使其具有灵活性,可以在各种文本尺寸下工作。


适用范围:数字媒体


下载字体

CSS字体堆栈


3. Times New Roman


Times New Roman

在西文中,最常见的字体莫属Times New Roman 。这个带衬线字体来源于英国《泰晤士报》。1929年,字体专家Stanley Morison 批评了《时代》杂志的字体难读又难看。杂志社的人接受了他的批评,并请他设计出了一款新的、适合杂志阅读的字体。于是Morison 和杂志社内部的Victor Lardent 合作设计了这款著名的Times New Roman。


Morison 一开始是建议在 Plantin 的基础上进行改进设计,但为了兼容可读性以及对于空间的节省,最终做出了字体的重大改动:笔触之间的对比做了加强,从而营造出一种干脆的感觉。


适用范围:书籍,期刊,年度报告,小册子,报纸


字体下载

CSS字体堆栈


4. Helvetica


Helvetica

Helvetica是最广泛使用的无衬线字体之一,由Max Miedinger 和 EduardHoffman 在1957 年创建。这个字体的中性化设计让它迅速在各种应用中走红。由于它良好的使用性,Helvetica无处不在,也一直是企业标识的流行选择。此外,Helvetica被美国政府广泛使用,美国税单上采用的就是Helvetica字体。


适用范围:品牌商标


字体下载

CSS字体堆栈


5. Tahoma


Tahoma

Tahoma是一个十分常见的无衬线字体,字体结构和Verdana很相似,其字符间距较小,而且对Unicode字集的支援范围较大。Tahoma 和Verdana师出同门,同为名设计师马修卡特的作品,由微软在1999 年推出。许多不喜欢Arial字体的人常常会改用Tahoma来代替,除了是因为Tahoma很容易取得之外,也是因为Tahoma没有一些Arial为人诟病的缺点,例如大写“I”与小写“l”难以分辨等。


适用范围:屏幕对话框、菜单


字体下载

CSS字体堆栈


6. Georgia


Georgia

Georgia是一种衬线字体,为著名字型设计师马修卡特(Matthew Carter)于1993年为微软所设计的作品,具有在小字下仍能清晰辨识的特性,可读性十分优良,是 Windows系统的内建字型之一。苹果电脑的麦金塔系统之后也跟进采用Georgia作为内建字型之一。


适用范围:电子书,手机,电脑网页


字体下载

CSS字体堆栈


7. Verdana


Verdana

Verdana 是 Matthew Carter 为微软公司设计的一款无衬线字体。跟字体 Frutiger 一样, Verdana 设计理念是适应那时低分辨率的电脑屏幕。Verdana字符的宽大和宽度是这些字体在屏幕上易读性的关键。 尽管Verdana字体系列的尺寸很小,但它的分辨率更高,字体最受欢迎。


宜家从2010年起抛弃了使用多年的Futura, 转而投向了Verdana 的怀抱。据宜家的解释,这种转变的原因是为了保证字体能适应各种国家的文字(之前的宜家字体不能兼容亚洲文字),从而保证宜家设计风格的一致性。可见Verdana 在国际化适应范围上是比较广的。


适用范围:电子书,手机,电脑网页


字体下载

CSS字体堆栈


8. Optima


Optima

Optima字体是由著名设计师Hermann Zapf设计的清晰精确的字体。Optima的灵感来自古典罗马铭文。Optima字体的曲线和直线的厚度略有不同,容易留下优雅和清晰的印象。因此,Optima常用于传达经典理想以及当前趋势。例如,皮肤护理巨头雅诗兰黛(EstéeLauder)将其用作官方字体设计。


适用范围:海报设计、书籍装帧、画册封面、产品包装设计


字体下载

CSS字体堆栈


9. Palatino


Palatino

Palatino字体系列据说是世界上十大最常用的字体之一。Palatino设计采用经典的衬线字体,采用强烈,开放的风格,清晰易读,非常有吸引力。它的受欢迎程度催生了许多模仿者。


适用范围:报刊杂志,广告,电子书,手机app,电脑网页


字体下载

CSS字体堆栈


10. Candara


Candara

Candara是一种无衬线字体,为字型设计师Gary Munch为微软所开发,附带于Windows Vista中发行。——Wiki百科


适用范围:电子邮件,网页设计,杂志和非正式的排版设置


字体下载


CSS字体堆栈


2019年10款免费最新字体

1. MORGANITE

MORGANITE


2. THE CIRCUSDISPLAY

THE CIRCUSDISPLAY

3. Neon


Neon

4. Fivo Sans


Fivo Sans


5. Yellow Peas Free Font


 Yellow Peas Free Font

6. Shapes Free Font


Shapes Free Font


7. ALOJA


ALOJA


8. Kardinal

Kardinal


9. Stay Classy Free Font


 Stay Classy Free Font


10. Strain Free Font


Strain free font


除以上20款英文字体,Mockplus团队也为大家收集了一份最全面的免费可商用字体清单。不仅如此,你还可以在这里学到如何从零开始设计一种字体,并在24小时内将其提交给Google。不管是字体还是工具,Mockplus的为广大设计同仁所付出的努力,希望你看得见~

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:490763208 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶