整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
为一名设计师，你需要学到的最重要的技能之一就是如何选择字体。这是因为文字内容是设计师与用户沟通的主要方式之一，版式可以决定设计的成败。
排版工作兼具美感和复杂性，有些人把自己整个职业生涯都献给了字体设计。幸运的是，他们的工作都以文档的形式，很好的记录了来，让我们在设计时，有大量的资源可以学习。
本文旨在帮助你学习如何选择正确的字体类型。同时，也鼓励大家去探索那些你自己熟悉的字体组合。
在做任何事情之前，首先都需要确定设计的目标。你想传达的信息是什么？你设计的媒介又是什么？
好的设计，会利用好版式并与目标达成一致。这是因为版式在你的设计中是表达情绪、基调和风格的关键。
例如：如果你设计的贺卡是走很重的插画风，那么选择一款合适的插画风格字体就很关键。合适的字体风格要与整体的设计调性保持一致。
选择合适的插图风格字体
如果你正在设计一个以图片为核心的登陆页面，选择一个不喧宾夺主的简单字体就很关键。使用字体作为一种来强化信息传达的方式。
如果图片是设计的重点，那么选择简单的字体，图片就会更加突出。
在确定设计目标之后，接着需要确定目标用户。这一步很关键，因为有关用户的信息，如：年龄、兴趣和文化素养，会直接影响到字体的选择。
例如：有些字体更适合给儿童设计时使用。在阅读时，孩子们需要字迹清晰，字型大方的字体。Sassoon Primary就是一个不错的例子，Sassoon Primary是由Rosemary Sassoon开发的，正是基于她对儿童容易阅读字体的研究。
Rosemary Sassoon开发了Sassoon Primary字体
有些字体更适合老人，Senior-friendly字体有更加易读的尺寸，对比度也足够高，同时也避免了复杂的装饰性笔迹。
在选择字体时，要考虑到你的读者和他们的需求。简单来说，需要与你的用户共情。
多看看其他设计师的优秀作品，试着去理解他们是如何选择字体的。
对于字体设计的灵感，CreativeBloq的《75种最好的免费字体》就是一篇非常棒的文章，可以让你正确地选择字体。在那篇文章中，CreativeBloq解释了每种字体背后的玄机。
另一个有用的资源是Awwwards在2015年发布的《100个最全的免费字体合集》。Invision 也编制了一个版式字体合集，你也可以在那里找到很多灵感资源。
Typ.io 收录了大量已上线的字体案例资源(http://typ.io/)
想从实际线上网站获得灵感，type.io这个网站会非常适合。这个网站从网上收集到了大量的字体设计案例，另外，网站中还在每个案例底部提供了css的字体样式。
除了寻找专门的字体网站，也可以去查看你最喜欢的网站，看看他们是如何使用好字体的。“WhatTheFont”是一个很好的工具，它是一个Chrome扩展插件，只需要悬停在网页中你希望了解的字体上，就能准确知道它的字体属性了。
（译者注：亲自试验了，能很方便的查字体了，有个地方要注意的是，必须等网站加载完成了，点击那个插件图标才有效果哦。）
除了单个字体，还要看看字体搭配的灵感。合适的字体组合和字体本身一样重要，良好的字体组合有助于建立视觉层级，提高设计的可读性。
字体组合和字体本身一样重要
要获得灵感，可以从Typewolf（https://www.typewolf.com/）开始。Typewolf收录了大量来自不同网站的字体组合灵感。除此之外，他们还有字体推荐和高级排版指导，简直就是版式创作者们的宝库。
FontPair (http://fontpair.co/）还专门为谷歌字体设计了字体搭配灵感。你可以按字体类型组合进行排序，例如：无衬线字体和衬线字体或者衬线字体和衬线字体。
最后，在网上可以找到大量由设计师设计的字体组合。例如：《 Typography: Google Fonts Combinations》和《Typography: Google Fonts Combinations – Volume 2》，只需要在Dribbble和Behance上搜索“font pairing”即可找到。
有了前面的研究和灵感，你就可以选择自己喜欢的字体了。在选择字体时，有三个原则需要记住：可读性、易读性和目标。
在选择字体之前，先研究一下产品目标
选择常规且易于阅读的字体，要尽量避免一些装饰性的字体。同时，还要注意到字体的用途。比如：一些字体更适合作为标题而不是正文。
因此，在选择字体之前，先研究一下它的预期使用目标。
搭配对比更大的字体
在字体组合方面，保持简单原则，在一个页面中最多使用三种不同的字体。此外，字体的组合需要有明确的对比，这样会有助于引导读者的眼睛，首先应该是标题然后才是正文。同时，你还可以使用不同的字体大小，颜色和字重来完善视觉对比。
对于web字体来说，你可以去使用谷歌字体、Typekit和Font Squirrel。谷歌字体是免费的，而Typekit和Font Squirrel提供了免费和付费的字体。
确定字体组合后的下一步是确定字体大小。这方面有一个很好的工具，是由Adobe版式主管Tim Brown设计的模块化缩放工具。模块化比例是一种用来识别过往令人满意的搭配比例，以确定字体大小组合的系统。
模块化比例是一个系统，用来识别历史上令人满意的比例，以创建规范来确定字体大小（https://www.modularscale.com/）。比如：你可以使用基于黄金分割的比例。
以下就是按比例算的前5个字体大小：
Golden Ratio (1:1.618)1.000 x 1.618=1.6181.618 x 1.618=2.6182.618 x 1.618=4.2364.236 x 1.618=6.8546.854 x 1.618=11.089
到后面，你可能会遇到一个问题就是基于黄金分割的比例有点太大了。
Golden Ratio (1:1.618)…11.089 x 1.618=17.94217.942 x 1.618=29.0329.030 x 1.618=46.97146.971 x 1.618=75.99975.999 x 1.618=122.966
如你所见，数字之间的间隔变得太大了。对于大多数的界面来说，需要更小的间隔。值得庆幸的是，模块化比例有多种基于几何，自然和音乐的比例。
Minor Second 15:16 Major Second 8:9Minor Third 5:6Major Third 4:5…
因此，如果不能使用黄金分割比例，也可以使用一个间隔更小的比例，比如：完美的“第四比例”。
Perfect Fourth (3:4)…9.969 x 1.333=13.28813.288 x 1.333=17.71317.713 x 1.333=23.61223.612 x 1.333=31.47531.475 x 1.333=41.95641.956 x 1.333=55.927
一旦确定了比例，就可以从列表中选择字体大小，四舍五入到最近的整数大小。
Font SizesHeader 1: 55pxHeader 2: 42pxHeader 3: 31pxHeader 4: 24pxHeader 5: 14pxBody: 17pxCaption: 14px
模块化比例的方式是利用了数学知识来精确生成字体大小。然后，这只能是作为一个参考，用这个方法作为起点，最终还是需要以你的眼睛来做适当的调整。
最后一步是为版式创建一套字体规范，用来对整体设计进行标准化。
在sketch中设置字体共享样式
在像sketch这样的软件中，可以创建共享样式文本用来快速标准化的使用字体。在这个过程中，你还可以调整和确定文本的属性，比如颜色，字重和大小。在选择字体颜色时，需要记住一句话：字体颜色与标准色需要协调一致。
使用规范来保证设计的一致性
在设计规范中，确保至少要包括以下几个内容：字体定义、字体大小、字体颜色和示例用法。
谷歌的字体规范（https://material.io/guidelines/style/typography.html）是一个很好的例子。
其他的一些优秀案例包括 ：
版式设计是需要亲自实践才能很好掌握的，它是一门科学，也是一门艺术。
我期待你去打破你的舒适区，去探索属于你自己的字体设计经验。
作者：Jonathan Z. White
原文：https://medium.freecodecamp.org/typography-can-make-your-design-or-break-it-7be710aadcfe
译者：彩云Sky，公众号：彩云译设计
本文由 @彩云Sky 翻译发布于人人都是产品经理。未经许可，禁止转载
题图作者提供
一下html中文件标签和文本标签的使用
目的是学会使用，所以借助工具可以省好多时间
1.文件标签：构成html最基本的标签
html:html文档的根标签
head：头标签。用于引入html文档的一些属性。引入外部的一些资源
title：标题标签
body：体标签
<!DOCTYPE html>:html5中定义该文档是html
2.文本标签：和文本有关的标签
注释:<!-- 注释内容 –->
<h1> 到<h6>:标题标签自带换行的效果
<p>：表示段落的标签
<br>：换行标签<br/>和<br>的写法都不会报错
<hr>：显示一条水平线（也是一个自闭和标签）水平线有一些属性我们可以控制它的样式。hr里面表示高度是size而不是height.对齐方式默认是居中的。
<b>：字体加粗
<i>：斜体
<font>:字体标签（通过属性来修改字体的字号，大小，颜色，以及字体的样式）
<center>:文本居然标签
这里讲下网页下面的版权标签是如何写出来的。
3.图片标签：用来展示图片的（图片也是一个自闭合标签）
属性:src:用来指定图片的位置
什么都不写默认就是./的形式
../表示上一级目录
4.列表标签：
有序列表:ol,li(li表示的是列表的每一项)
无序列表:ul,li
5.链接标签：
a:定义一个超链接
属性：
href:指定访问资源的URL(统一资源定位符，就是路径的表示形式)
target：（是目标的意思）指定打开资源的方式
_self:在当前页面打开
_blank:在空白页面打开
6.表格标签：在HTML中的表格只有行的概念，没有列的概念，将表格以行的形式进行分割，然后再对行进行操作。
table:定义表格
width:表格的宽度
border:边框
cellpadding:单元格内容左对齐（定义内容和单元格的距离）
cellspacing:边框合并(定义单元格之间的距离，如果指定为0，单元格的线会合为一条)
bgcolor:背景色
align:表格的对齐样式
tr:定义行
bgcolor:背景色
align:表格的对齐样式(是用来修改文本的对齐方式的)
td:定义单元格
colspan:合并列
rowspan:合并行
th:定义表头单元格
<caption>:表格标题
<thread>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
7.块标签：div和span是结合css使用的
span:文本信息在一行显示，行内标签，内联标签(意思就是它不会换行)
div:是会换行的。每一个div占满一整行。块级别的标签
8.语义化标签：html5中为了提高程序的可读性，提高了一些标签
<header>
<footer>
aption 美 [?k?p??n] n.字幕;标题，说明文字；vt.给（图片、照片等）加说明文字
英文释义：
A caption is the words printed underneath a picture or cartoon which explain what it is about.
To write a caption for a picture, photograph, etc.
双语例句：
There is a caption under the picture.
图片下边附有说明。
The book is well written, properly illustrated and excellentlycaptioned.
这本书写得很好，插图生动形象，说明文字简练精辟。
*请认真填写需求信息，我们会在24小时内与您取得联系。
