字体设计

ABCDEFGHI JKLMNOPQR STUVWXYZ
无衬线体 Couture
结 构
升部
升部线
H O E k q x 大写字高
大写线
基线
x字高
降部线
降部
基线
大、小写字母底部所踩的那 条假想线。有些字母底部也 会特意超过基线一点，以保 证视觉上与基线持平。
x字高
用无上下延伸部分的x作为 小写字母的代表，将其高度 命名为x字高。
布局、内容摆放和栏目设计都会影响文字的阅读性。从易读性来看，需要设计师考虑字体、字号、行距、间距、背 景色与文字颜色对比等。
一、最佳易读性规范
<1> 行宽
如果一行文字过长，视线移动距离长，很难 让人注意到段落起点和终点，阅读比较困 难；如果一行文字过短，眼睛要不停来回扫 视，破坏阅读节奏。
让内容区的每一行承载合适的字数，来提高 易读性。
不论哪种视觉效果，精美 的、正式的、有趣的还是严 肃的，一般都可以应用一种 明确的对齐来达到目的。
通常情况下，建议在页面 上只是用一种文本对齐。
近日网络词，对一种坐姿的概括， 它基本就是“坐躺”， 可视为“葛优躺“的非文艺版， 出自艺人大张伟接受电视访谈时 对北京人生性行为的描述之一， 新近网友归纳“京城四瘫”， 大老师位列四瘫之首。比较“葛优躺”， “北京瘫”更侧重对坐姿本身的陶醉： 舒坦就得，爱谁谁。
【我方了】
16年热词之一，褒者说，此为萌系网友自创方 言拟音字；贬者说，它不过是甲等语言障碍者 的分泌物。方即慌，循此，方家蔚为壮观，我 方了你别方方什么方…听得人头皮痉挛。 >了解更多
【北京瘫】
近日网络词，对一种坐姿的概括，它基本就是 “坐躺”，可视为“葛优躺“的非文艺版，出 自艺人大张伟接受电视访谈时对北京人生性行 为的描述之一， >了解更多
曼秀雷敦的左对齐
tiffany的居中对齐 左对齐和右对齐是文本看起来更清晰、效果分明；居中对齐显得更庄重、正式、稳重。
<4> 亲密性
位置的接近意味着存在关 联，亲密性是指将相关项 组织在一起让它们从整体 看看起来和谐统一。
亲密性可以从两点入手： 适当留白、以视觉重点突 出层次感。
<右图中> 人眼首先被Banner图和里面文 字吸引，然后再向下移动到文字 描述及购买按钮，这些元素的亲 密性与对比形成一种平衡。
使用这一原则时需要注意， 必须确保文字是容易看清的，如果文字过小或 过于纤细、色彩对比度不够，会适得其反。
<2> 重复
设计中的元素可以在整个 网页设计中重复出现，对 文字来说，可能字体、字 号、样式的重复，也可能 是同一种类型的图案装 饰、文字与图片整体布局 方式等。
重复给用户一种有组织、 一致性的体验，可以创造 连贯性，显得更专业。
3、文字颜色与背景颜色对比
【北京瘫】
近日网络词，对一种坐姿的概括，它基本就是 “坐躺”，可视为“葛优躺“的非文艺版，出 自艺人大张伟接受电视访谈时对北京人生性行 为的描述之一， >了解更多
【我方了】
16年热词之一，褒者说，此为萌系网友自创方 言拟音字；贬者说，它不过是甲等语言障碍者 的分泌物。方即慌，循此，方家蔚为壮观，我 方了你别方方什么方…听得人头皮痉挛。 >了解更多
过紧
语出某宝商品文案，近时“葛优躺”成为超级 表情包，除“葛优躺”三字蹿热外，某宝商品 跟进推出“葛优躺”同款T恤，贩售文案曰： “老司机带你感受终极颓废，纪春生同款T恤 复原开卖…穿上它，优雅地颓废”……这则文 案虽属玩笑，却也不乏创意：将原本陷于剧情 的躺姿泛华为视觉体验中的“颓废”，并为此 添油加醋。
传统图书排版每行最佳字符数是 55~75，实际在网页上每行字符 75~85更流行。中文在14号字体时， 建议35—45个文字。
<2> 间距
行距是影响易读性非常重 要的因素，过宽的行距会 会让文字失去延续性，影 响阅读；而行距过窄，则 容易出现跳行。
网页设计中，文字间距一般根据 字体大小选1—1.5倍作为行间 距，1.5—2倍作为段间距。 比如12号字体，行间距是 12px—18px，段落间距则是 18px—24px。 另外，行间距正好是段落间距的 75%是非常常见的。
在案例页面中，标题使用18号的微软雅黑，正文使用12号的宋体，两种字体字号 的对比让文字内容富有层次，很容易吸引读者眼球。
2、文字颜色对比
等我从沙发上站起来马上就拍
语出本周热传段子：“洋葱日报讯，近日，上万家长联名要求葛优拍一张‘端坐照’。很多家长批 评葛优的‘瘫照’（葛优躺）带坏了孩子，暑假一放就天天瘫在沙发上，说要体味浪费人生……因 担心孩子成为‘瘫掉的一代’，目前已有上万名家长联名要求葛优立即拍一张严肃的端坐照，然后 自费投放到媒体和营销号，以弥补之前给孩子们带来的恶劣影响……葛优闻讯回复，“一定拍一定 拍，等我从沙发上站起来，马上就拍。”
半包围或全包围结构：同、句、向、回。
穿插结构：多、少、会、有。
字面 大小
汉字笔画繁简悬殊，最少笔画是一笔，最多有三十多笔，相差十分明显，这对字体的大小影响也很大。 例如两个相同大小的正方形，内白大的显大，内白小的就会显小。
内白大的显大
内白小的显小
汉字中，也会根据字体的内白来调整字体大小，下图中四个字放在一起时，如果同样大小，那么“口” 字会显大，“圆”字会显小。因此为了视觉上的平衡，必须将“口”字缩小。
字间距、行间距、段间距。 此外，在排版内容区之 前，需要根据页面实际情 况给页面四周留出余白。
二、CRAP设计四原则在文字排版中的应用
CARP是四项基本设计原理，包括对比 （Contrast）、重复（Repetition）、对齐 （Alignment）、亲密性（Proximity）,已经 被设计师广泛应用。这四个基本原则在网页 设计中对文字的排版也非常适用。让内容区 的每一行承载合适的字数，来提高易读性。
汉字的基本笔形与基本结构规律
宋 体
宋体是印刷字体中历史最长的字体，也是现代印刷中应用的最为广泛的一种字体，根据字形的不同又分 为“书宋”和“报宋”。宋体起源于宋代，发展完善于明代，后来传至日本并被称为“明朝体”。
宋体特点：字形方正、笔画横平竖直、横细竖粗、棱角分明、结构严谨、整齐均匀、有极强的笔画规律 性，阅读时有一种舒适醒目的感觉。
近日网络词，对一种坐姿的概括，它基本 就是“坐躺”，可视为“葛优躺“的非文 艺版，出自艺人大张伟接受电视访谈时对 北京人生性行为的描述之一，新近网友归 纳“京城四瘫”，大老师位列四瘫之首。 比较“葛优躺”，“北京瘫”更侧重对坐 姿本身的陶醉：舒坦就得，爱谁谁。
<4> 文字留白
在排版文字时，在版面需 要留出空余空间，留白面 积从小到大应该遵循的顺 序是：
ABCDEFGHI
JKLMNOPQR
STUVWXYZ
衬线体（罗马正体） Big Caslon Medium
衬
线
体
衬线体一般分为3类
1
括弧型衬线 带有缓和柔软曲线的衬线
2
极细型衬线 带有缓和柔软曲线的衬线
3
粗衬线 带有缓和柔软曲线的衬线
括弧型衬线
极细型衬线
粗衬线
无衬 线体
无衬线体即“没有衬线的字体”，发明于19世纪上半叶，后来发展成为20世纪现代字体设计最重要的字 体形式。字体简洁、朴素端正，多用于标题和道路指示牌等需要着重突出的地方。
深
弋
结 构
字体的结构就像动物的骨架，疏密有致、结构严谨。空间结构是统一和规范字体字形的方法。在汉字 中，字形可分为独体字、合体字两大类。
合体字
起森灌区
独体字
山水
结
常见的几类字体结构
构
上下结构：李、昌、炎、想。
上中下结构：曼、高、豆、享。
左右结构：颗、林、红、铲。
左中右结构：树、撒、班、街。
上下左右结构：华、唱、敷、覆。
正常
语出某宝商品文案，近时“葛优躺”成为 超级表情包，除“葛优躺”三字蹿热外， 某宝商品跟进推出“葛优躺”同款T恤，贩 售文案曰：“老司机带你感受终极颓废， 纪春生同款T恤复原开卖…穿上它，优雅地 颓废”……这则文案虽属玩笑，却也不乏 创意：将原本陷于剧情的躺姿泛华为视觉 体验中的“颓废”，并为此添油加醋。
大写字高
指大写字母从基线到字母 顶部的高度
升部、降部
升部指的是小写字母中高 于x字高的部分。 降部指的小写字母从基线 向下延伸的部分。
网页中的字体应用
文字的排版需要考虑文字辨识度和页面易读性，下面就从最佳 易读性规范和CRAP设计四原则的角度与大家分享怎样在网页 中做出精彩的文字排版。
在我们看来，好的文字排版一定有着比较棒的阅读性，文字内容在视觉上是平衡和连贯的，并且有整体的空间感。
深丨亅冫讠冖饣弋
黑 体
黑体笔画单纯，粗细一致，起笔收笔均呈方形，故又称方头体或等线体。汉字黑体是在现代印刷术传入 东方后，根据西文无衬线体中的黑体所创造的，中国四大印刷字体之一。
黑体特点：结构严谨、庄重有力、朴素大方等特点，在中文里没有衬线的字体通常称为黑体，与西文中 的无衬线体类似。黑体视觉效果强烈，适合于标题等需要重点突出的位置。
过松
语出某宝商品文案，近时“葛优躺”成为 超级表情包，除“葛优躺”三字蹿热外， 某宝商品跟进推出“葛优躺”同款T恤，贩 售文案曰：“老司机带你感受终极颓废， 纪春生同款T恤复原开卖…穿上它，优雅地 颓废”……
<2> 行对齐
排版中很重要的一个规范 就是把应该对齐的地方对 齐，比如每个段落行的位 置对齐。
文字排版的好坏考验一个设计师的基本功底，平时的功夫必不可少 希望以上内容对大家能有所启发！
一部分文字采用了与主要文字不同的另一种颜色，这种对比是增加视觉效果的有效途径 之一，突出展示了段落的重点。