第八期字体-中文字体

中文字体

关于叫法:有衬线体,印刷体;无衬线体,黑体字

衬线体:

  • 宋体

古书说:刻字刻书,宋体为方体字,楷体作为软体字。
结构饱满、端庄典雅、整齐美观
财经类杂志刊头最频繁,教育类杂志刊头最少

  • 楷体

楷书技术上规范出一种字体,与手写体相近似
流畅和谐,富有韵味
用于正文及说明性文字。新闻类杂志的刊头频繁,娱乐、女性、情感杂志运用最少。


GUI:图形化用户界面。字体即界面,好听点叫用户体验,不好听叫界面端排版设计师

UI字体注意:

1. 可读性:字母形状区分度。

  • 辨识度:清晰、可辨认
  • 低调:不喧宾夺主、为方便完成任务,不增添认知负担
  • 灵活度:不同媒介设计用户体验。
  • 宽比例:宽比值越大,识别度越好,小屏体验越好。瘦长有设计感识别度差

2. 易读性:行文排版的一切,包括字号、字色、字距、行距、行宽、文本灰度、对齐方式和段落排布等等。

  • 字号:偶数,例外是15px(5的倍数);多端设计时,要考虑显示的比例及设备显示距离。
    • 电脑显示器阅读距离50CM最佳角度为0.3,14px字体;
    • 移动端阅读距离20CM-30CM,受限于屏幕尺寸,字号不能小于11px。长文阅读字号适当增大,减轻阅读压力。
  • 字色:
    • 对比度最小对比度4.5:1(AA级)、3:1;最大对比度7:1、4.5:1。
    • 字号与字色 :字号≥24px normal/19px bold,白背景上最浅纯灰色是#959595;否则小于此字号的话,最浅纯灰色是#767676(如再灰色背景上应该更深)推荐软件:Contraste
  • 行间距:1.5-2倍
  • 行宽:整除?对齐?(网格对齐)
  • 中西文字体差异:中文是固定宽度,除上下对齐、字间距没有调整空间;西文比例宽度(字母间距、单词间距)
  • 对齐原则:印刷对齐:两端对齐;UI排版设计对齐:左对齐即可;英文左对齐;
  • 层次感:行间距、端间距
  • 每行字数:MD指出移动端,英文每行40-60;中文字号14px,字数18-24字
  • 字距:特别是运营排版标题,字距小的字要拉近
  • 符号标点:中文的全角半角,中文与英文交接处用半角(中文),为了遵循双方排版习惯,作为过渡和衔接。数字与单位之间:度、斜杠、百分号与数字之间不需要加空格,自动会有空格
  • 字体单位:em/rem(开发会用到,设计用px,于是有了pt)
    • 1倍图:1pt=1px;
    • 2倍图:1pt=2px;
    • 3倍图:1pt=3px;

  • 苹方

改进自“华文黑体”,去掉了喇叭口增加了些字重。

  • 华文细黑

Mac OS 9之前版本中文默认字体,身份证字体。

  • 兰亭黑

方正兰亭黑衍生于齐立为微软雅黑

  • 微软雅黑

微软委托方正设计

  • 华文黑体

同样是Mac OS 9之前版本中文默认字体,也是iOS 8之前的中文字体。iOS developer编程默认中文字体(Heiti SC)
而OS developer在Ps设计时使用的是黑体-简或Heiti SC,并设为西体,浑厚。

  • Droid

Android4.4之前的默认字体,中文部分由华康完成。

  • Roboto Adobe称为:Source Han Sans

谷歌于Adobe一起委托一个工作室开发。Android系统、中文Noto字族(思源黑体)、Gmail

  • Segoe

微软Vista用字

  • 冬青黑

Mac OS X 10.6雪豹系统用字。日本设计字体,锤子手机冬青黑+Helvetica。

  • 小米兰亭

就是方正兰亭,18个月委托方正改一改,还不如原版

段子:如果你要成功,必须要被雷总拒绝一次,拒绝收购很多大佬。

  • 汉仪旗黑

网易新闻使用

头条于2014年进入市场,在这之前最大的是网易与凤凰新闻。

  • 明兰

早期“极限社区”活跃于论坛。


推荐常用字体

  • 白舟大髭书体:
    日本制作,广泛用于综艺节目、宣传、海报推广
  • 方正清刻本悦宋:
    运营作品中banner、专题页、插画作品中用到
  • 汉仪小麦体:
    白茶的插画作品、手绘作品
  • 文悦古典明朝体:
    古朴、神秘。转折多,方框。
  • 文悦新青年体:
    现代互联网、几乎成了banner标准用字。设计感、很简洁。
  • 造字工房劲黑:
    设计感,力量感。keep、设计类网站

字体测量

找相关行业的竞品截图,Sketch测量,字体、字号、颜色、字间距、行间距等

栅格化设计

  • 网格的基本概念:“列”
  • PC端一般12列;移动端一般6列
  • 结构分析:屏幕间距、水槽、内容模块、组合区域
  • 行:行间距。黄金分割比例(话术:斐波那且数列、专业工业制图法)
    • 1.设定最小设计单位:阿里系最小单位是3;airbnb、亚马逊、Pinterest是5、6。定好后,界面中所有间距一定是最小单位的倍数。
    • 2.定边距和水槽大小:
    • 3.定横向间距

字体设计概论

  • 西文字体基础:

    • 基线:包含X字母高度——小写字母主体高度
    • 大写高度
    • 上伸部分
    • 下伸部分
  • 汉字原理

    • 结构:左右、左中右、上下、包围...
    • 字体原理(重心):物理中心、视觉中心。重心:重心线、中心线、字身、骨骼、中心点;
    • 重心高:文艺、女性、稳重、端庄、力量低;重心低...小米兰亭字重心没有起伏

    小窍门:笔画堆积的地方,差不多是重心所在的区域

    • 中宫
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容