• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 除了 Helvetica ,UI 设计师还应该知道哪些经典字体?

除了 Helvetica ,UI 设计师还应该知道哪些经典字体?

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经典字体,英文字体等相关知识,希望在学习及工作中可以帮助到您

@ui力力 :我和好多同学一样,也是自学设计出身,在经过设计软件的学习和画图标的阶段后就开始工作了,后来在工作中遇到过很多问题,比如说,标题和正文怎么排布才是合理的?应该使用多大的字体?配色怎么配?一个 icon 是要用线型还是面型?这些困惑的出现是难免的,因为设计是一门非常严谨的学科,里面蕴含了很多道理,就连最基础的字体选择和排版,都经过了将近 1000 年的发展和演变,有很多很多专业的知识。作为一个 UI 设计师,我们应该对这些知识有所了解。

欢迎关注作者的微信公众号:「UI每日推」

Helvetica

刚做设计的时候,我只会用一种字体,就是 Helvetica,因为它是苹果的官方字体,我做设计稿的时候永远是一个背景图片加上用 Helvetica 写的很细的一行字,好像很简洁的样子。然后别人问我这个字体好在哪里,我也说不上来。其实每个字体背后,都有它独特的情感和气质,或者一段故事。

Helvetica 在拉丁文中是“瑞士”的意思,Helvetica 是瑞士设计的代表作品。在第二次世界大战时,由于瑞士是一个中立国,因此国内的艺术发展丝毫没有受到影响,再加上很多欧洲其他国家的设计师逃亡到瑞士,使瑞士的设计迅速发展,形成了非常现代的设计风格。这款字体的设计风格和它的国家一样,中性,不带有任何的情感倾向,在各种情况下使用效果都不会差,后来成为使用最广泛的字体,也被苹果公司选为官方字体,成为了最著名的字体。

△ ?2007年被拍成了电影,传奇字体Helvetica,有兴趣的同学可以去看一下

Didot

Didot 诞生于18世纪,是一款法国字体,前前后后一共经历了家族三代人的努力。当时的法国刚刚经过革命,废除了封建制度,拿破仑上台以后,以前华丽的洛可可宫廷风格被人们所摒弃,大家开始寻找新的设计风格,在设计 Didot 字体的时候,以前复杂和倾斜的笔画被垂直的笔画替代,字体的衬线比以前更加细致,而且在制作的过程中使用了数学控制字体的变化。这款法国字体高端,品质感十足,随着巴黎成为时尚中心,被越来越的的时尚杂志使用,成为法国设计的标志。

△ 用 Didot 作为 logo 字体的时尚杂志 VOGUE

Futura 和 DIN

德国给我们的印象一直是可靠,稳定,坚固的。德国的设计和“德国制造”一样,也遵循这样的理念。在20世纪初,德国的包豪斯设计学校成为现代设计的推行者,当时的一些理念在现在看来依然非常经典,他们主张把设计回归基本的几何元素,以几何和机械的美感来主导设计,Futura 是当时这种风格下最成功的一款字体,在设计的时候,Futura使用了大量的尺子和圆规,用数字和几何确定笔画的位置,代表了德国设计的冷峻和可靠。

在德国,公共场合里只有一字体,就是 DIN,它广泛使用与德国公路的标识牌,汽车牌号和铁路系统中,DIN 是“德国标准协会”的首字母缩写,在1924年的时候设计了第一版的 DIN字体,但是只有两个字重(字重就是笔画粗细的意思),后来在1994年以后又增加了多个字重,形成了家族字体。DIN 非常有机械感,整体设计充满力量,有很强的突出效果,让人可以更好地专注于文字的内容而不是花哨的设计,这就是 DIN 在交通中广泛使用的原因。

△ ?使用 Futura 设计的海报,还有宜家也广泛使用了 Futura

△ ?在德国广泛使用的 DIN ,上图是一个标识牌

Avenir 和 Gotham

Avenir 是字体设计大师 Adrian Frutiger 最自豪的设计作品,但是这款字体在当时并没有出名,而是在30年后的今天才得到了大家的认同。Adrian Frutiger 在审视自己作品的时候,发现并没有一款几何字体能和 Ftura 抗衡,所以他也想设计一款几何字体,但是在设计了一段时间以后,他发现根本没有必要再设计一款几何字体了,因为那种完全按照数学和尺子做出来的字体太过冰冷,没有人情味,所以他想设计一款充满感情的人文主义字体,整套字体是他独自一人设计的,把自己对设计的热爱完全融入了进去,那种有点可爱的风格是现在很多互联网公司希望传达的,airbnb 在官网上大量使用了 Avenir,来传达它舒适亲密的理念。

Gotham 是奥巴马在2008年竞选时选用的字体,和 Avenir 一样,也是一款人文主义字体,代表了亲近和包容,设计灵感来源于纽约市的街头绘画,很有感染力和号召力。在星巴克和很多海报中,Gotham 都有广泛的运用。

△ ?有点小确幸风格的 Avenier,很有亲和力

△ ?前些天我设计的Pokemongo 的卡片,字体选用的就是 Gotham

欢迎关注作者的微信公众号:

llqr20170121

「值得推荐的一组中文字体」

  1. 《超实用!有哪些活泼而高端且不俗套的中文字体?》
  2. 《特别有料!有哪些值得推荐的中文字体?》
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • Helvetica 字体60岁了,它是如何变成了人们生活中的日常?
  • 除了 Helvetica ,UI 设计师还应该知道哪些经典字体?

相关文章

  • 2018-08-23网易实战案例!用五步设计流程,让你的设计更有说服力!
  • 2018-08-23网易可用性优化实录!如何让你的交互设计自查表真正用起来?
  • 2017-08-06在IE6,IE7 中DIV容器固定高度的使用技巧
  • 2017-08-06Chrome浏览器的自动保存密码提示功能禁用方法
  • 2018-08-23AI+AE教程!制作骑电动车的小熊!
  • 2018-08-23数据分析学习笔记(1):数据分析的思维模式
  • 2017-09-22JavaScript利用URL向后台传入中文参数乱码问题解决之道
  • 2017-08-06网页设计中的表单设计技巧小结
  • 2018-08-23用一个AI教程,帮你学会运用黄金分割绘制图形
  • 2017-08-06使IE6正常显示PNG-24格式图片的两种方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 浅谈前端制作中,IE6还有必要兼容吗
    • 优设网投稿规范
    • 遵循这7个原则,能让你的网页用户体验更优秀
    • 产品改版实战经验:设计师如何做改版效果评估?
    • 从了解用户的注意力开始,创造更优秀的用户体验
    • 这些设计细节,决定了谁月薪5000谁月薪50000!
    • 如何输出一份专业优秀的交互文档?
    • Bootstrap3.0学习笔记之按钮的样式
    • 如何高效完成表单输入?来看这个实战案例!
    • 三种方式实现元素水平居中显示与固定布局和流式布局概念理解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有