• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 超实用!西文字体及排版的运用方法(附字体搭配建议)

超实用!西文字体及排版的运用方法(附字体搭配建议)

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

本文主要包含排版设计,经验分享,西文字体等相关知识,希望在学习及工作中可以帮助到您

一直觉得每种字体都带有自己的性格和情感。所以在实际的应用中,选择哪种字体的重要性比想象中重要得多。字体传达的信息,甚至可以影响人们的购买决策,影响到客户是否对你说「YES」。这里我参考了一些文章,总结了一些对字体的情感和应用研究。

阅读时间:10 分钟

本文将介绍

  • 字体与阅读体验
  • 字体与文化联系
  • 几种常见字体的故事与情感表达
  • 字体应用建议 (附五种字体搭配建议)

字体与阅读体验

每个人、每天、在各种场合都会接触到字体。字体设计与排版,其实已经超出了设计师的范畴,无论是写商务邮件,做展示报告,还是发布博客,我们每个人其实都或多或少会接触到字体设计。

字体及排版的重要性从下面这个实验就可以看出来。20 位志愿者,一半男生一半女生被分成了两组,每组被展示了同样内容不同排版的纽约客:一组的排版、字体和图片都经过设计,另一组则是随意排布了一下。

研究者发现,用户对排版很糟的那一篇文章印象很差,甚至在生理上通过禁皱眉头反映了出来。

而皱眉肌是与人脑海马体旁的杏仁核这种负责情绪管理的部位紧密联系在一起的。

而阅读排版良好的那一组人员,则拥有更强的认知注意力,更强的分析状态和更清晰的思路。

研究人员因而得出的结论是,良好的排版不一定能帮助你更好地理解文章,但确实会让你阅读感觉更好,从而能更加积极地对于阅读做出响应。

好吧,也许你会说,这不是废话吗,我当然知道好的排版比差的排版对阅读更有帮助。但是这里想要强调的是,字体与排版是密不可分的两个部分,都属于英文中「typograhpy」的范畴。英文的「typograhpy」还包含了字体艺术,版式艺术等内涵。

字体与文化联系

字体之所以会给你带来这样那样的感觉,原因之一就在于它与文化的深刻联系。

比如 Courrier (法语里是信件的意思)字体,就特意设计成怀旧的、让人回想起老式打字机打出来的字体。

许多人把 Helvetica 与美国政府联系在一起,也是因为美国税单上用的字体就是这个。

而如果你不生活在美国,或对西方打字机没什么概念,可能看到这两种字体就会无动于衷。因为这种文化联系的缺乏。

所以,这里的建议是在使用字体的时候,一定要注意其文化联系。看看美国银行的例子。这是原始网页:

这是改进后的网页 (与报纸新闻标题联系在了一起)

当美国银行网页的字体改成了 Impact 之后,看起来反而没那么可靠了。

字体是人设计的。它的背后一定有某种文化意义。所以在选择字体的时候,要考虑到字体的文化背景,我相信你不会想选一个一下就让人联想到某些文化里面努力避免的字体。

几种常见字体及其情感表达

1. Times New Roman

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

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

Roman 代指的是传统有衬线的一种规矩的字体。但 Times New Roman 的字体设计与名为 Roman 或 Romas 的源于意大利的字体没有关系。

风格:受早期现代化和一些巴洛克印刷影响,结构庄重,清晰。适宜正式场合。

2. Helvetica

同样作为西文常见字体之一,Helvetica 作为一种无衬线字体,其来源名字显得没有那么动听一点:Neue Haas Grotesk。(neue = 新的,Haas = 很man的,粗鲁的,Grotesk = 怪诞的)。Max Miedinger 和 Eduard Hoffman 在 1957 年瑞士创建了这个字体, 这个字体的中性化设计让它迅速在各种应用中走红。但字体名字就没那么有吸引力了,当 D. Stempel AG 公司一年后打算开始推广这种字体的时候,他们决定换一个更加国际化的新鲜名称。最终他们选用了一个让人注意到瑞士根基的名字:Confederatio Helvetica 是瑞士的拉丁名。

风格特征:高 X基准;紧凑的字母间距;窄 t 和 f。广泛适用于各种场合,尤其受品牌商标的偏爱, 包括 3M,宝马,雀巢, 曾经的苹果等等。另外,该字体很受政府青睐。正如上文所说,美国税单上用的字体就是 Helvetica。

对应的中文字体,应该是各种黑体比较适合。

3. Verdana

Verdana 是 Matthew Carter 为微软公司设计的一款无衬线字体。最初是微软的字体小组里的Virginia Howlett 提出的要求。Verdana 的名称是来源于 verdant (绿色的东西)和 Ana (Howlett 姐姐的名字)。

跟人性的字体 Frutiger 一样, Verdana 设计理念是适应那时低分辨率的电脑屏幕。其风格特征是高 X基准,字母间宽松的间距,以及很宽的字母空心(比如 a 和 p 闭合部分的距离),以便在小字号上也能易于辨认。

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

4. Calibri

被称为「温暖又温柔的一款字体 」,Calibri 从 2007 年开始,逐渐成为了微软旗下几乎所有产品的默认字体。该字体属于 Windows Vista 推出的 Cleartype 字体系列之一,用于适应 LCD 显示屏。同系列的字体还包括 Cambria, Candara, Consolas, Constantia and Corbel 。

在大字号尺寸下,字体圆润的边角清晰可见。而它的意大利斜体则包含了书法字体的影响,这种影响在现代系字体里面都可以见到。虽然对于 Calibri 字体在设计界有些争议,但得益于它有些弯曲的线条和笔触收尾初的轻微卷曲,该字体在幻灯片展示大字号的时候还是挺好看的。

5. San Francisco

San Francisco 是苹果特意为其产品设计的一款无衬线字体。根据苹果官方介绍文档,该字体也是高 X基准,数字高度与大写字母高度一致的。

相比之前苹果使用过的 Helvetica, 该字体在小字号上的显示表现优秀很多。对该字体的积极评价主要是以下几个方面:

字体颜色的均匀程度。缩小文字字号,眯起眼睛感受一下:

字体的灵活性

San Francisco 是一整个字体家族。设计师在设计的时候,不用操心使用具体哪一种 San Francisco(比如只需要把系统调成 UILabel),系统会自动选择合适的字体适应屏幕和字体大小。

尤其需要指出的是该字体的冒号。一般字体冒号会比底部基准线高一点点,但 SF 的冒号位于两个数字中间的时候,可以刚好居于数字高度居中的位置。

总的来说,SF 是一款适应了数码时代的字体。

字体应用建议

为了传达不同的情感,在使用字体的时候,有一些建议可以参考。

1. 选择基准字体

一般同一个场合,不一定会只使用一种字体。比如标题和正文可能就是两种字体。但是,一定要先选好正文部分的字体,再根据正文的字体选择合适的其他字体风格进行搭配。就好比穿搭,一般来说是先选好了穿哪件衣服,再决定搭配什么配饰。

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

带衬线字体: 也

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

  • 网易设计师:做好文字排版的小技巧
  • 用超多案例,帮你学会排版中最基础的对比和对齐原则
  • 配色和字体都很棒,但为什么界面看着不高级?
  • 基础知识学起来!如何科学提高UI界面的文本易读性?
  • 这8条走心的建议,帮你设计出更加优秀的排版
  • 从这些基本的字体排版规则入手,搞定网页排版这件事
  • 超实用!西文字体及排版的运用方法(附字体搭配建议)
  • 专业科班方法!帮你学会网格工具这个理性的排版利器
  • 基础小科普!8种常见的版式设计方法汇总
  • 高手的平面课堂!聊聊图文叠加的四种常用技法

相关文章

  • 2018-08-23用一个AI教程,帮你学会运用黄金分割绘制图形
  • 2017-08-06编写Web前端代码的注意事项小结
  • 2018-08-23用Framer的实例,说说设计师学习代码的那些事
  • 2017-08-06网站开发人员应该知道的61件事
  • 2018-08-23最新版iOS 11设计规范发布了,来下载官方源文件!
  • 2018-08-23这10条认知,可能就是你和大厂UI 设计师的差距
  • 2017-08-06熟练设计师的七原则(2):颜色运用
  • 2018-08-23如何设计一张高品位高水准的海报?高手的秘诀在这!
  • 2018-08-23配色高手系列!聊聊“黑色”在电商设计里的常用搭配技巧!
  • 2017-08-06极尽简约的网站设计实例

文章分类

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

最近更新的内容

    • 看完这篇基础科普,别再说你不会用点九图了!
    • 系统学习!服务设计的常用理论、流程和方法总结
    • 上亿人使用的起点读书APP,背后的改版设计实录!
    • 基础小科普!浅谈「列表视图」与「网格视图」的用法
    • 网页图片优化工具及使用技巧分享
    • 面试时可能被问到的一些CSS问题
    • 编写Web前端代码的注意事项小结
    • YouTube 终于换Logo啦!来看背后的设计故事!
    • 熟练设计师的七原则(2):颜色运用
    • AI+AE教程!制作骑电动车的小熊!

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

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