字体设计在线视频

这节课我们讲一下界面的字体设计

字体是界面的基本组成要素

它既是内容也是形式

既是语言又是链接

在界面里面不可缺少

计算机里面有大量的字体可以使用

如果使用的得当

是可以加分的

使用不当就会减分

如何使用字体呢

是界面设计师需要掌握的

基本技能之一

在没有文字之前呢

人们用图腾做标记

有了文字

就几乎可以传达任何的信息

历史才可以被记录下来

所以语言和文字

是人类记录和传递信息的基本元素

字体呢既是信息也是图形

它能够通过字形字义等等

呈现出形象化的感知

表达丰富的情绪

比如说这个海报

它把字体和图形进行了巧妙的结合

两杯牛奶从左上角倒下来

形成了中间的这段文字

并且通过文字的排列

成功地把人们的视线

引向了海报的右下角

空白处的一块巧克力

使这个巧克力呢

成为下一个视觉焦点

在这里呢

我们看到白色文字的颜色

和细节的处理

都显示出和倒出来的牛奶之间

存在着某种联系

而这种联系延伸到右下角的空白处

让人们把这两杯牛奶

和巧克力的口感联想在一起

很好地阐释了海报的宣传主题

在互动媒体上

文字也是通往新信息的连接点

比如说这个界面

直接用文字做标签

在字体演进的过程中

技术起到了推波助澜的作用

比如宋体和黑体

就是从宋代

活字印刷术之后演进的字体

那信息技术呢

又把更多丰富的字体

带到了人们面前

无论是PC电脑还是苹果电脑

都为使用者提供了各种数字化的字体

还有五花八门的付费字体

总体而言呢

可以把字体分为三类

一类是印刷体

比如宋体和黑体

一类是书法体

比如楷体 隶书 魏体 颜体等等

这些由书法演变而来的字体

第三类呢是美术体

比如综艺 美黑 圆体 琥珀体等

是通指具有某种艺术风格的字体

图示的这些呢

是计算机中常见的英文字体

网页端对字体的使用有哪些限制呢

一般来说

浏览器定义的标准字体呢

是中文宋体和英文Timcs New Roman字体

这两种字体可以在任何操作系统

和浏览器里都能正确显示

另外呢windows自带了40多种英文字体

和五种中文字体

这些都属于免费字体

你可以在网页里面自由使用

只要是windows操作系统的浏览器

它们都可以正确地显示出来

但是呢在其它操作系统里面

比如说Unix

有些字体就不一定能够正确地显示

同理

如果使用只有苹果

IOS操作系统里才有的字体

那么在其他操作系统里面

浏览器上不一定能正确显示

所以说网页里面

如果要出现大量的文字信息

建议采用兼容性好的字体

以免部分浏览器

产生不能正确识别的问题

网页字体的样式一共有四种

有正常体 斜体 粗体和粗斜体

目前移动设备有两个主流的操作系统

一个是IOS

一个是安卓

这两个系统中

默认的中英文字体都不一样

所以在设计移动界面的时候

需要留意一下

字体常用单位有两种

一种是磅

英文符号是pt

另一个呢是像素

英文符号是px

磅对应的是打印尺寸

如果选用磅为单位

无论屏幕分辨率是高还是低

不会影响打印出来的大小

只会影响打印出来的精度

像素呢对应的是相对尺寸

它会受到屏幕分辨率的影响

同样像素值的字体呢

屏幕分辨率越高

文字显示就会缩小

反之就会增大

在界面中

要考虑屏幕分辨率

对字体显示的影响

另外一个影响字体显示的因素

是屏幕的精度

英文的简称是ppi

精度越高像素密度越高

同样像素值的字体的显示也就会缩小

那通常情况下

界面上的文字有两种类型

一种是矢量文字

一种是像素文字

运用矢量文字的好处呢

是无论如何放大

文字仍然清晰

而且内容可以通过后台随时更新

坏处是字体的使用类型

受到浏览器的限制

如果采用了不兼容的字体

一些浏览器上

会自动显示为替代字体

导致界面效果失控

如果想用一些不常用的字体

还是建议使用像素字体

准确的说像素文字

已经不是字体了

而是图片

在做界面视觉设计时

我们可能会用到一些特殊字体

甚至呢是一些自创的字体

用作图标 标题 logo或导航等等。

为了保证字体呢

在用户端的显示效果

通常会把这样的字体呢

做成图片格式来用

这样做的好处

是不受系统字体的限制

可以灵活使用任何字体进行创作

可以满足需要的视觉效果

它的坏处也很明显

因为像素图放大以后会发虚

图片呢会变模糊

影响观看的效果

另外呢像素文字的内容

是不能更改的

如果要改

必须重新制作和输出

字体可以传达出不同的性格特征

这些特征是通过它的字形

笔画 结构 粗细等形式传递出来的

当字体和特定的语义联系起来的时候

它的个性也就更加明显

比如这个图中幼稚这个词

我们会认为左下角这个字体

更能体现这个词的词义

这是因为我们对这个字体发生了联想

因为这个字体的笔画结构

很像小朋友写的字

每种字体都有自己的个性

设计师应该善于利用字体的个性和特征

来进行符合设计意图的表达

不同字体的差异在于

结构 粗细 笔画的细节等等

在文字放大以后

我们可以看到字体的细节

比如说这是冬青黑体的细节

这是华文黑体

这是兰亭黑体

可以看到同样是黑体

在细节上还是有很多差异的

兰亭黑字形比较宽

华文黑体偏瘦

冬青黑笔画比较粗

这张图是几种黑体排列的效果

当文字缩小以后

它们之间的差异不是很大

不过仔细看还是有很多不同

如果是不同的字体

排列起来的差异就比较明显了

比如在这张图里面

上下两个段落

分别使用了黑体和宋体

可以看到文字缩小以后

黑体的识别性更好

而宋体识别性要差一点

从特征上来看

宋体的文字比较秀丽

而黑体呢比较硬朗

所以界面中

如果要显示较小的文字的时候

建议使用黑体或等线体

这样可以保证良好的识别性

再来观察这两组不同的英文字体

也有很多细节上的差异

有些字体感觉比较精致

有些字体感觉比较复古

图示的这些字体属于有衬线字体

它的特点是笔画粗细变化比较明显

在起笔 落笔和转折的地方的细节

都有额外的装饰

这几种字体呢

是属于无衬线字体

文字缩小以后的识别性更强

它的线条粗细变化不明显

细节上也没有多余的装饰

界面中如果需要小号的文字

建议使用无衬线字体

这样可以保证更好地识别性

这张图显示了有衬线字体

和无衬线字体在笔画细节上的差别

另外字体的使用还要注意版权问题

如果是商业用途

除了系统自带的字体以外

多数字体的使用是要交费的

在处理大量的文字排版时

要注意使用合适的字句

字句太密或者太宽

都不利于阅读

段落的行距和采用的对齐格式

对阅读也很重要

行距太密会使画面显得拥挤

不利于阅读

而疏密适当的行距

不但美观还容易阅读

在段和段之间留出空白

会显得更有层次感

中文排版中

使用首行缩进的方法

更符合人们的阅读习惯

中文排版采用两端强制对齐的方法

可以使中文的方块字

左右两端显得更齐整

视觉上也更美观

大段的中文文字

采用居中对齐的排列方法

会给阅读造成一定的困扰

应当慎重的使用

但是在文字不多的情况下

可以根据画面需要

采取居中对齐

比如说在这个例子中

构图是左右对称的

在这里使用居中对齐就比较合适

下面再来看几张英文排版的情况

比如这张图

大家可以体会一下

英文字母之间不恰当的字句

对阅读产生的影响

比如这个段落行距太密了

易读性不好

和前面对比一下

这个段落的行距就舒服多了

我们把长段落进行分段

留出空白

可以显出层次感

比如这个段落使用了左对齐

让行尾形成了参差不齐的效果

显得美观自然

这样符合英文的阅读规律

另外根据构图的需要

我们还可以使用右对齐

或者是居中对齐

左右强制对齐

可以让段落两边显得非常整齐

但是呢也会让部分的单词之间

产生太多空白

显得不自然

网格和分栏

可以让信息的呈现更清晰更有层次

也更易于阅读

比如这个案例中

利用分栏对文字段落进行了约束

大标题小标题和正文

从字号和粗细上进行了对比

形成了舒适整洁的视觉层次

当人们长时间看屏幕的时候呢

视觉很容易感到疲劳

所以在屏幕上阅读大量的文字

往往不如在纸面上阅读轻松

字形字距行距和字体的大小

排版时每行的长度都会影响可读性

另外屏幕的精度也会影响可读性

中文在屏幕上

可以识别的最小字体是九磅

老年人因为视力减弱

只能看清楚更大号的文字

所以呢一些界面

允许用户自定义字体显示的大小

不失为一种面向不同人群

阅读习惯的一种解决方案

在实际应用中

界面文字通常还会和图形

导航、按钮等结合在一起

进行整体的布局设计

字体不但是传递信息的符号

也是形式构成的元素

它可以和图形结合

产生丰富的视觉效果

加强它的信息传达能力

比如这个案例是一个设计师的logo

用他的名字RICHARD SMITH头衔

PHPTPGRAPHER和联系方式

围成了一个圆形

并且通过字体粗细大小的变化

构成明暗和空间层次

而这个图形可以使人联想到镜头

正好和他的身份相吻合

这个设计把信息和图形关系

进行了巧妙的联系

令人印象深刻

下面呢我们来谈一谈字体的组合和搭配

使用不同的字体呢

有时候是为了避免单调

有时是为了表达的需要

比如说这个插画设计师的个人网站主页

设计师的名字用了粗壮瘦长的等线体

非常醒目

和穿黑衣的半身人像照片相呼应

形成了共同的视觉中心

文字WORK

选用了和背景的插画风格接近的字体

和背景相互协调

形成了第二个视觉层次

背景是作者的插画

凸显出作者的专业特质

形成第三个视觉层次

这个界面的字体搭配

属于动静结合 和而不乱

那么字体搭配有什么规律呢

首先

为了避免视觉混乱

不要用太多字体

建议有两三种即可

比如说这个界面用了三种字体

第二

选择适当的有联系的字体

并且和界面风格相协调

比如这个界面

是一个小型设计工作室的网站

界面是对称布局

用色稳重大方

画面精致而简洁

它采用了三种字体

大标题是Y的拉丁字体的变体

这个字体个性比较强

有一定的装饰性

但也不失庄重感和现代感

这个大标题和它下方的图片

形成了视觉中心

小标题

用了和大标题一样的字体

不过略微拉长了一些

颜色对比也弱一些

和中间的logo的图形

形成第二个视觉层次

图片左右的介绍性内容

采用了和标题相似的有衬线字体

只不过这个字体的易读性更好

上方的文字导航

它的视觉层次仅仅在背景层之上

文字很小

使用了无衬线字体

这种字体易读性最好

我们看到这个界面

三种字体的选择是有一定讲究的

有衬线字体显得比较精致

无衬线字体有现代感

易读性好

字体搭配整体上既有对比

也有不同

还能互相协调

我们试着把其中的字体换一下

看看它有什么不同

这个同样的界面

我们把主标题换成黑体

界面的感觉是不是有了一些变化

黑体的笔画是没有任何装饰的

有庄重感

但是呢却让这个画面少了一点点个性

和精致感

那现在我们把主标题

换成这个有点复古风格的字体

看起来似乎也不如之前的字体好

一方面呢因为这个字体太纤细

分量略显不足

另外一个原因呢这个字体比较活泼

和其他字体在风格上差异比较大

和沉稳的界面风格不太协调

从这个例子我们可以看到

字体的选择和搭配

在界面中是十分重要的

一般来说老式字体

和亚现代字体的混合往往效果不错

这是因为亚现代字体在设计的时候

融合了老式字体的风格

同时呢也有现代字体的简单

那这两种字体在一起

既不相同又能互相协调

为了互相协调呢

同一份设计中

不同的字体

应该有自己的大小和间距

布局良好的字体呢

是交流的基本组成部分