「整理」线上字体总结

文字是图形记忆的衍生记载方式。不同的字体呈现出不同的表达方式,更会反映出品牌的风格形象。字体设计的价值:1.信息传递,文字传递信息最直接最清晰的方式,而字体则直接决定了文字信息能否清晰、准确的传达;2.情感传达,字体在文字信息传达之前首先给人以情感冲击。3.个性塑造,不同的字体样式给人呈现不同的风格,圆润的字体传递出可爱风格,纤细的字体传递出高贵的感觉,选择正确的字体样式塑造品牌个性。

字体结构

一.字体选择

1.移动端:由于线上的字体受系统影响大,我们在选择字体时候是受限制的。因此规定,在ios系统中,中文字体使用苹方,英文字体使用 San Francisco,而San Francisco 有两类尺寸: 文本模式(SF UI Text)和展示模式(SF UI Display)。 文本模式适用于小于20 points的尺寸,展示模式则适用于大于20 points的尺寸。当你在你的app中使用San Francisco时,iOS会自动在适当的时机在文本模式和展示模式中切换;在安卓系统中,中文字体使用思源黑体,英文使用 Roboto;与此同时,数字采用 Helvetica Neue 这一跨平台的字体。

注:在ios中,如果你使用诸如Sketch或Photoshop的工具来进行设计,那么当你设置的字体大于等于20 points的时候,你需要切换到展示模式。iOS会根据字体大小为San Francisco自动调整字间距。

ios与andriod


不同font size在ps与sketch中的间距大小

2.web端:微软雅黑系列:使用最频繁的一种字体;方正正中黑系列:中黑系列的字体笔画比较锐利而浑厚,一般运用在标题文字中。但这种字体不适用于正文中,因为边缘相对比较的复杂,文字一多会影响用户的阅读;方正兰亭系列:整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁,这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合,不仅能保证字体的统一感,还能很好的区分出文本的层次。

web端常用字体

二.字号规范

文字的大小决定了信息的层次,整齐而又分明的层次会让整体的设计变得清晰有序。在iPhone,iPad,iWatch 中设置的Body字体不应该小于11pt,这样才能被正常阅读。我们推荐的Body文本大小应该在15-18pt。

1.移动端:

移动端字号规范

例子:

支付宝字体运用1
支付宝字体运用2

2.web端:web端的字体最小为12px。常用内容文字大小为12px、标题与页头文字大小为14px、16px,大标题文字大小为18px、20px。如有特殊字号的特殊处理。

web端字号与字重

三.行高规范

参考 w3c,眼睛到屏幕的距离25cm,目前通用的做法是,西文的基本行高通常是字号的1.2em上下,而中文因为字符密实且高度一致,所以一般行高需要更大,1.5em至1.8em之间是一个比较好的视觉阅读效果。

行高公式「字号*1.5em至1.8em」

四.行高规范

字重是指字体笔画的粗细,一般在字体家族名后面注明的Thin / Light / Regular / Book / Bold / Black / Heavy等都是字重名称。红色部分为轻的字重,蓝色部分为重的字重。

字重

不同的字重会有不同的效果,纤细的字体会给人轻盈、欢快的感觉,厚重的字体会给人庄严、严肃的感觉。

适用场景

但适用场景并不是一成不变的,还需自己探索,实用合适才是最重要的

总结

小小一枚ui设计师,初入设计行业,经验有限,总结或许有些浅显,内容有参考借鉴,不足之处还需努力。

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