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

超全面!正确使用字体的10个黄金规则

作者:喪心病狂十六夜貓 字体:[增加 减小] 来源:互联网 时间:2018-08-23

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

@喪心病狂十六夜貓? :对于设计师而言,为每个项目选择合适的字体,是已经掌握的特殊技能。今天这篇文章可以让你通过应用一些简单的规则,就能设计出适用于电子、印刷技术或提升项目档次的字体。

如果你正在为选择字体组合而感到困惑,遵循本文规则,你就可以设计出优秀的字体。

目录

1. 定位项目重点

2. 找到相同属性的字体

3. 设置同类型字体尺寸

4. 设置留白空间

5. 选择左对齐

6. 选择两种字体

7. 不要修改默认的字型

8. 使用大量的对比

9. 不要忘记移动端的排版

10. 参考风格指南

1. 定位项目重点

?

项目开始时,我们需要明确设计目的。当你在Google Font或Typekit等网站寻找字体之前,先问问自己以下几个问题:

  • 项目面向的目标人群是什么
  • 用户会怎样对待这个设计
  • 适合怎样的氛围、心情
  • 需要和其他的设计、品牌相匹配吗

这些答案将帮助你构建出设计的初步框架。

2.?找到相同属性的字体

?

设计许多的字体组合时,字体的形状细节会影响设计的的好坏。那么,你应该如何进行正确的选择?

首先寻找相似形状的字体。让我们仔细研究每种字体是圆形还是椭圆形、粗或细、高或短、对角的还是倾斜的。

选择要用于标题和正文的字体后,将同样形状的辅助性字体组合在一起。

  • 确认一下各种字体的小写「o」。内侧是圆形还是椭圆形?将[o]形状相同的字体组合在一起。
  • 选择x字高(英文:x-height)相同的字体。
  • 不用担心混合字体风格。衬线和无衬线字体的组合也可以尝试。如果选择了一格复杂的字体,另一种字体选择简单点的会比较好。此外,使用最频繁的地方,如正文,我们还是选择一个简单的字体方便阅读。
  • 小心字体的倾斜度。使用多个斜体或相反方向倾斜的字体对可能会给用户的阅读带来不适,应该避免。

3. 设置同类型字体尺寸

字体的粗细,尺寸是决定项目的好坏的因素之一。文字的尺寸过大会让视线停止,让人无法自然的阅读。另外,文字尺寸过小则会导致视觉疲劳,用户或许会从设计作品上移开视线。

通过正确的设定字符大小,用户可以在内容上自由的阅读。合适的文字尺寸是:和项目中各种各样的尺寸相对应。

正文内容、小标题或大标题等有着各种各样的尺寸。这些尺寸和使用方法,必须保证在设计内具有一致性。

注意以下几点,用户会更容易阅读内容。

  • 文字内容的尺寸,可以根据信息的重要程度来确定优先顺序。字体越大内容越重要,占用用户视觉范围的可能性就更高。
  • 通过缩小文字的尺寸,可以让文本阅读速度更快,能让用户用更短的时间确认内容。
  • 较大的文本元素,可以通过分割长句来更使其容易阅读。

4. 设置留白空间

?

这种方法本身与字体无关,但是在选择字体时,设置留白的方式也很重要。

字距、行距、跟踪、填衬这些方法,能表现出字体的美感,也有可能将他们弄的乱七八糟。

适当运用留白,会让你设计稿更精致。但它还取决于在实际项目中使用的字符、字体等的组合和大小。

5. 选择左对齐

和其他语言一样,用户在阅读英语、日语、中文的时候,都是从左往右移动视线的,所以理想的突出主体内容可读性的方法是左对齐。

如导航标题和Hero Header,一些文本本身就很容易阅读,所以不用将它们对齐到左边。而对于长句子来说,应该将它们对齐到左边。

6. 选择两种字体

在设计项目中使用了两个字体,这个规则可能很多人知道。

当你打破这个规则的时候,可以看看是否可以用该字体的另一种样式:如粗体、细体、斜体来解决。

7. 不要修改默认的字型

不要去伸展,扭曲,或倾斜你的字体。如果您需要不同的字体,请尝试选择其他方法。

字体设计师花费了大量的时间来做一款好看的字体。如果更改字型,将会损害字体的可读性。

8. 使用大量的对比

?设计师很困扰的一个问题是:如何在图片或背景上加文字。

当给文字添加阴影时,不一定会获得足够高的对比。通过调整亮度,可实现轻松对比,也有助于将普通的风格变得厚重。

有些情况下,照片中既有亮也有暗的地方的情况下,你就可以利用粗体字或细体字形成对比。

让我们考虑选择附加文本,选择较厚的字体,并尝试在照片上叠加颜色。所有的技术都是为了突出了对比,使文本更具可读性。

9. 不要忘记移动端的排版

关于网站排版的问题,移动终端的可读性是最重要的一个问题。虽然给文字添加图案或纹理在某些桌面屏幕上进行打印或显示时不会出现问题,但对于小型设备来说效果并不理想。

所以,考虑这个字体适用在什么地方是很重要的。

对于移动终端来说,字体看起来会略大一些,所以让我们把字体间距做得比桌面宽一点。通过这样做,可以有效减少用户不喜欢的移动操作,例如在阅读短句时多次滚动显示。

10. 参考风格指南

?当您决定要用某种字体在项目时,你需要一个总结了所有用法和规则的样式指南。

比如:请你的元素移至在网页上易于访问的位置,并在该位置修改你的设计。

所以,完美的字体设计的关键因素是:统一性。

总结

字体的好坏,应由用户来决定。

为了设计出完美的排版,利于阅读是最重要的一点。字体容易阅读,便容易理解。所以,为了达到用户可以随时阅读而不用考虑任何事情的目的,字体也应该符合场景想要传达的信息和氛围。

优设人气专题

字体排版手册 |?优设独家专访?|?iPhone X 学习指南丨在线抠图神器丨灵感大全

纹理素材 |?免费图库丨配色神器丨读书计划丨PPT 神器丨鲁班设计

iOS 11 学习指南丨人工智能丨PS 教程丨AI 教程丨C4D 教程

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

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

  • 这8个字体设计和排版技巧,是2018年的设计趋势
  • 超全面!正确使用字体的10个黄金规则
  • 2017年流行的这些字体排版趋势,你都知道嘛?

相关文章

  • 2018-08-23想引导用户?来学习UX中的承诺和行为一致性原则
  • 2018-08-23这个大公司越来越重视的体验文案编写师,到底是干嘛的?
  • 2018-08-23背后的故事!手机QQ的一键消除红点功能是怎么诞生的?
  • 2017-08-22python 文件头的编码声明问题
  • 2018-08-23想成为高级视觉设计师?先学会引导读者视线的方法!
  • 2017-08-06网页设计中的细节分析详谈
  • 2018-08-23想为iPhone X设计UI?给你这11个设计小贴士
  • 2018-08-23电商大招!三步教你搞定情人节活动专题页设计及玩法!
  • 2017-08-06最佳网页宽度及其兼容实现方法
  • 2017-08-06响应式WEB设计学习(3)—如何改善移动设备网页的性能

文章分类

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

最近更新的内容

    • 如何输出高质量的交互稿?来看京东设计师的总结!
    • 设计师如何在智能化时代持续学习和成长?来看高手的方法!
    • 用3个案例,让你学会移动端的长表单设计
    • UCAN 干货总结!阿里设计如何助力设计产业升级?
    • 超干货!一套完整的设计分析思路应该是怎样的?
    • 从设计指南说起,详解Material Design体系组件
    • 手机浏览器不支持position: fix的解决方法
    • 在看了10000条标题后,我们总结了写文案的4大技巧
    • 人气好文!写给网页设计师的视觉设计基础手册
    • 页面中marquee与flash同时存在时的冲突解决方案

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

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