邮箱订阅

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

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

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

了解更多

全球知名的5大顶尖字体及其用法

Cherry 2017-10-09 13:35:57 阅读:11791

字体对用户有着深刻的心理影响。这里我列举了6种字体,它们被用于世界各地的网页设计中,是文本的完美范例。在设计中使用这些字体,文本永远不会单调枯燥!

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具



这个世界上有两种人,爱读书的人和不爱读书的人。不管这一事实如何,当今时代内容仍然是王道。


然而,没有良好的展现形式,再好的内容也毫无意义。如今,许多网页设计师在网页排版上寻求折中方案,使用恰当的字体是网站整体上获得成功的关键。


数字化平台是极其动态的,我们必须适应内容的不断变化。然而与印刷不同,网页设计无法自由定义字母之间的间距。


字体对用户有着深刻的心理影响。这里我列举了6种字体,它们被用于世界各地的网页设计中,是文本的完美范例。在设计中使用这些字体,文本永远不会单调枯燥!


Poppins


字体来源 : Google字体


字体链接 : https://fonts.google.com/specimen/Poppins


用例示范 :


http://zipl.pro/


http://www.nerval.ch/apollo_11/


http://theisbothmann.com/


http://www.kikk.be/2016/


推荐用于:模块化和小型的网站


描述:Poppins是一种几何形状的无衬线字体,是一种非常流行的网站设计工具。每一个字母的形式几乎都是单一的,在必要时使用光学校正可以使其保持均匀的印刷颜色。


Open Sans


字体来源: Google字体


字体链接: https://fonts.google.com/specimen/Open+Sans


用例示范: http://gravity-theme.site/ (公司,企业和产品网站)


推荐用于:标准外观的网站。


说明:Open sans对于很多字体来说都是很好的搭配对象,比如,Lato,Raleway,Montserrat,Brandon Grotesk等等。它在浏览器上呈现出的效果十分优美,具有良好的可读性。


Montserrat


资料来源: Google字体


字体链接: https://fonts.google.com/specimen/Montserrat


用例示范: http://www.dangblast.com/


http://hansonwu.com/howtoordereggs/#/


推荐用于:有趣的网站(它能创造出庄严而有趣的外观)。


说明:这种字体有三种变体,唤起了二十世纪早期的现代主义风格。 然而,它的形式比Futura更不正式。Montserrat在所有的大写字母和字母的几何简洁上都非常出色。小写字母的Montserrat仍然是一种漂亮的字体,与Arial或Helvetica相比,它有较大的X高度和更多的字符。


Playfair Display


字体来源: Google字体


字体链接: https://fonts.google.com/specimen/Playfair+Display


用例示范:


http://adrien-heury.net/designers-checklists/


http://mondaymusic.es/en


https://www.craftedbygc.com/


https://hoodzpahdesign.com/


推荐:基本上适用所有需要创造信任感的网站。它既可以用于模块化网站吗,也适合传统的站点。


说明:它是一种无衬线字体,有漂亮的曲线和圆角,既适合传统的网站,也适合现代的网站。这一设计受到了18世纪中期到十八世纪末期的字体的影响,比如Baskerville。它为标题和标题(特别是美丽的斜体)提供了一种优秀的字体。然而,对于较大篇幅的复制,这种精致的、高对比度的笔画可能会妨碍可读性,尤其是在较小尺寸的页面中使用时。


Avenir


字体来源:网页


字体链接: https://www.myfonts.com/fonts/linotype/avenir


用例示范: https://playcharms.com/en/


推荐用于: 最适合未来感的设计。例如一个呈现未来主义,并且外观简洁的小型产品网站。


说明:Avenir在法语中的意思是“未来“,它是一种用于许多网站的最小和模块化的无衬线字体, 这给设计带来了未来主义的外观。在纤细、印刷和中等粗细的字体中,使用Avenir的粗体和加粗体可以起到强调的作用。


Bebas Neue:(一个额外的字体)


字体来源:网页


字体链接:https://www.fontsquirrel.com/fonts/bebas-neue


用例示范:


https : //www.craftedbygc.com/


http://www.theqcamera.com/


http://ekpesbookclub.com/


推荐用于:标准而又坚固,又不失时尚的布局感。


说明:它是一个漂亮的浓缩字体,它看起来非常标准,也很时尚。


虽然排版不像动画或高清图像那样华丽,但这些字体仍然是所有设计中不可或缺的一部分。 它们可以被加粗,引起人们对注意的关注,也可以很巧妙地将他们的注意力吸引到屏幕上的其他元素上。无论哪种情况,我们都可以肯定的是,排版可以以一种或多种方式来增强设计。


原文作者:Lollypop Design Studio


原文链接:https://medium.muz.li/top-5-fonts-and-its-usage-39fb616f574b




Mockplus做原型,更快更简单,现在下载Mockplus,免费体验畅快的原型设计之旅。





扫描二维码,关注 “摹客” 微信公众号。

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

_____

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

免费下载
logo

咨询客服

帮助群:748169314 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶