原文地址/creativebloq译者/特赞Tezign文章来源/优秀网页设计今天，大多数浏览器已经默认支持Web字体，日趋增多的字体特性被嵌入最新版HTML和CSS标准中，Web字体即将迎来一个趋于复杂的崭新时代。下面是一些基本的关于字体的规则，特别适用于Web字体。印刷字体是静态的，而网页字体却是圆滑可塑的。设计师必须预测跨浏览器及终端用户的最终结果，而不仅限于学习如何实现某种特定的视觉外观。除了掌握简单的规则以外，他们一样要理解背后的原因。01 了解字体的用途第一要务是检查将使用的字体究竟能做什么。基本上所有字体的用途都是相似的，但有些字体比其它更加合适。Unicode编码的字体提供了成千上万种字形的可能性，而OpenType字体格式则支持更多的功能，例如小号大写字母，旧式风格数字，自由连字以及上下文交替等。然而，字体的质量取决于字体设计师的创造水准。如果设计者忽视了绘制所有必须的字符，或者忘记了创建相关的功能，那么排版的细节问题也就变得意义不大了。创造专业字体需要大量的时间和精力，而有些设计师并未做好充足的准备。因此，在将字体纳入页面设计前，检查其字符集和功能的工作就变得举足轻重。字体就像工具箱，有些时候工具箱几乎是空的，用途有限，就像字体只有大写、小写、数字和一些基本拼写一样；有些时候缺少的却是某些关键工具，如果有一把螺丝刀，一把锯但却没有锤子的话，一些钉东西的活就难以完成。02 巧妙的字集FF Sero by J?rg Hemker“字体回滚”（Font Fallbacks）是以单个字符为基准发生的。一旦字符在指定的字体中丢失，回滚系统就会自动从列表中的下一个字体调用这个字符，然后切换回原来的字体。灵活利用这项特性可以达到惊人的效果。举例来说，字体的字符集不具有旧式风格的数字，那么可以找到具有对应数字的字体；删减该字体，只留下所需数字，将其放入回滚列表。文本中的所有数字就会以旧式风格的方式呈现，而其余部分将会以正常字体显示。这可以使你不必对数字进行分别格式化，也摆脱了页面中多余的HTML标签。03 弄懂数字很多专业级的字体都具有几个不同的数字字符集。每个字符集都有它特殊的用途。表格式数字占据相同的空间，让它们垂直排列，而宽度比例数字与其设计相符– 举例来说，数字4要比1宽得多。一方面，旧式风格数字的设计模仿了带X高度属性，上行和下行字母的的小写字符，使其与大小写混合的文本完美融合。另一方面，内衬的数字用于数值，或与大写文本一起使用。04 切勿伪造字体FF Ernestine by Nina StoessingerCSS使你可以伪造一些事情。如果字体本身没有粗体的变体，&b&标签可以通过双重渲染+略微侧移的方式将文本人为地加粗。为没有斜体样式的字体加上&i&标签可以实现斜体效果。由此产生的扭曲字符令人惨不忍睹。更重要的是避免使用&b&和&i&标签，而用&strong&和&em&取而代之。前者只涉及字体的外观，也就是所谓的Bold和Italic. 但或许你只想通过改变颜色和大小的方式强调文本。所以明确你的目的就变得重要了– 加粗字符，抑或强调内容？使用后者赋予你通过CSS文件轻松改变文本外观的自由。一般来说，在CSS文件里定义所有的文本样式，尽可能避免局部样式定义。05 但如果你必须伪造的话，逼真些当字符集当中缺少小号大写字母时，伪造它们总会使其相较周围字体过于单薄。倘若字体样式有一个半粗体的变体，或普通和粗体的粗细程度相差无几，那么可以使用更粗的那个来调节文本的明暗程度。别忘了给小号大写字母一点额外的字符空间。06 谨慎使用复制粘贴有时候你会在页面中本应是重音或其它特殊字符的地方发现难以辨认的字符。当从文本编辑软件中复制非UTF-8编码的文本时会产生这种情况。字符编码系统将所有的字形映射至给定的字符集，以方便通过网络或存储介质传输数据(主要是文本或数字)。尽管HTML可以兼容UTF-8，但它会曲解从其它任意编码系统中直接复制的文本，将特殊字符变为随机字母和符号的奇怪组合。此外某些内容管理系统在复制文本的同时也会一并复制格式，造成不可预知的后果。要避免这种问题，最好的办法是使用简易文本编辑器将复制的内容转换为纯文字的格式，而后从那里复制并粘贴到CMS当中。07 学习HTML实体FF Spinoza by Max Phillips看看你的键盘– 你可能没有意识到可用的字符是多么丰富。它们当中的很多是被HTML实体定义的，所以熟记常用的实体是必要的– 便于页面全局排版。你不能直接使用小写的x代替乘法符号，商标符号不仅仅是一个简单的大写T和大写M，浮动的重音符也不能代替引号。08 正确的引用说到撇号，正确的形式应该是闭合单引号。一个凸显出不成熟的例子是直引号的使用，它同时也被注重形式的设计师称为‘哑巴引号’。然而，使用合适的卷曲单引号或双引号是不够的。不同的语言有不同的引号使用形式。举例来说，法语使用的引号是指向外侧的三角标识符，而在德语中引号的方向则指向外侧。09 了解破折号连字符用来连接邻接的词语，或用于长单词跨行，以及其它用途。有两种其它的水平破折号：en破折号一般为em破折号的一半长度。通常情况下我们用它来指示数值的闭合范围，表示负数，或者阐述两件事情之间的联系。em破折号一般和字体等宽，并且一般用于划定某种想法的停顿，形成嵌入句子中的独立实体。但其具体用法常常引发争论。有些人用em破折号代替en，尽管两者都应该在没有邻接空白的情况下使用，很多字体设计者宁愿加入纤细的空白来避免它们触碰邻接的字符。10 定义关系，而非绝对尺寸Web文本的最大优势之一就是它可以被用户调整。如果字体是基于像素定义的，缩放一个页面可能会引起不同文本样式间的相对大小差异，举例来说，正文字号可能会大过标题字号。用相对于标准正文字号的em来定义所有文本是非常关键的。这确保了网页中的所有文本均可产生对应的调整，尊重不同文本字号间的关系。11 控制换行FF Spinoza by Max Phillips缩放浏览器窗口会使文本框变得宽敞或拥挤，而终端用户也可以改变字体大小。这可能令你觉得换行是难以掌控的。但当你对希望达到的最终效果有一个彻底的理解以后，某些特定方面是可以操控的。换行出现在被p或div标签环绕段落的结尾。在其它情况下，很少有希望下个单词能从新一行开始而插入换行的做法，因此请谨慎使用&br&标签。最常见的原因是要将2个或多个单词放在一起。不间断式空格可以确保邻接单词永远处在同一行。可惜的是不间断式连字符尚未被定义为HTML字符实体。另外，软连字符或自由裁量连字符只应在必要时出现，当文本列过于拥挤，希望分割开超长单词时，它们就可派上用场。12 注意空格非间断空格(nbsp)并非HTML中可用的唯一一种空格字符。全角空格(em space)和字体等宽，能够形成一个完美的方形分隔符。半角空格(en space)的宽度是它的1/2。表格式文本当中最有用的是数字式空格(figure space)，和字体中的数字占据相同大小的空间；而标点式空格(punctuation space)与点、逗号的宽度相等；薄空格(thin space)可以在人名缩写中的点和下一个字母之间使用，而发丝式空格(hair space)可以将长破折号与相邻的字符分开。还有3倍、4倍、6倍于每全角宽度的空格…对于阅读体验而言，字符之间与内部的间距与字符本身同样重要。正确的层次结构是字距&词距&行距。应避免在字母之间添加空格，这会令单词隔开并影响可读性。增加字距只能保证对字号很小的文本产生影响。与之相对的是显示尺寸常常受益于紧密的排列，但同样要适度。分散对齐会对文本的外观产生不利的影响。在对齐文本使之适应行宽的时，词距被扩大，长短不一的空白分散在文本行当中。这令文本的外观变得不均衡，某些文本行中甚至会产生难看的间隔。左对齐/右未对是更易于阅读的排列方式。除了字距和词距以外，行距一样会影响可读性。过于拥挤的文本行会令文本变得不易分辨。反面来看，如果行距过宽，对于读者而言，准确找到每个换行之后的下一行将会感到困难。13 再进一步这些小贴士已经可以帮你创造出更加精细的网页字体效果，但需要学习的东西仍然很多。当你对字体原则了解更加深入，更有自信地使用它们时，你就会明白如何去尝试并拓宽自己的眼界。这方面的一本权威教程是刚刚发行不久的Inside Paragraphs: Typographic Fundamentals，作者为Cyrus Highsmith. 这本宝典和Robert Bringhurst的基础教程The Elements of Typographic Style，或 Erik Spiekermann 和 E.M. Ginger’s所著的Stop Stealing Sheep & Find Out How Type Works是绝配。UI设计导航：QQ群:　
　文章为作者独立观点，不代表微头条立场
的最新文章
Uber 如何将他们的设计哲学应用在司机端的 App 上面？今天饿了么的童凌炜同学为大家翻译了 Uber 司作者/colin.c我想网站很多的童鞋的记忆中都有过那么一台老式的黑白电视机吧？今天我们就来给自己画一台这样编者按：苹果官方人机指南技术章下篇来咯！仅仅会画图标的美工不能叫UI设计师，想尽快达到合格线，熟读苹果官方的原文地址/designschool译文地址/优设优设译文/@陈子木网页设计师总能花样百出地设计出惊艳的细节，梦想是什么？梦想不是躺在床上玩手机，就可以实现的。梦想是需要我们付出所有的努力，勇敢的追随，果断的下决定，才在模板满天飞的今天，开个博客好像是一件特别简单的事情，不是么？平台就在那儿摆着，博主只需要去发文就好了，这有文章来源/uehtml作者/4399UED团队 by 皮皮MOBA英文全称为Multiplayer Onli你身边的UI设计师都是什么星座的？我先说说我自己，我是双子座，都说双子座的人挺纠结的，的确是有，当年做设计的小编：2016年祝大家心想事成，越努力越幸运，新的一年在学UI网收获你理想的知识2016年的第一天，元旦新始2015的最后一天了，今天你该对2015的你说再见。2015也许你一事无成，也许你懒惰。你想改变么？那就从做文章来源/25学堂今天25学堂的小编跟大家来欣赏下美丽说和蘑菇街 AppStore截图设计对比欣赏。美丽说和原文地址/淘宝MIX无线设计林蔓：抢红包成为每年大促活动的标配套餐，用户对基本的红包玩法都不陌生，各大电商也文章转自/25学堂这是25学堂在国外某个设计网站看到的关于跨平台UX设计五项原则的观点，觉得说的还是有用的。原文地址/behance今天给大家带来的是来自behance大神的创意网页设计，这是Jerelo Natur文章转自/简书作者/粽小喵如果你是一枚交互设计师或者UI设计师，那么你一定知道Sketch这个强大的矢量设计今天上某酷上检索了一下gif，居然发现很多同学做的作业。突然有个想法让我自我膨胀了！想知道我想了啥么？做作业作品作者/Javi Pérez还有几天就是2016了，各位童鞋们还不努力？还不好好学习，做个好孩子？想要做好作品来自：digitalprogression 的设计师：malcolm tween今天和大家分享一套设计非原文地址/nngroup译文地址/jianshu译者/TerryFan在列表中使用缩略图，这样一个简单的需求作者/kong yunlei2015就剩最后几天了，不知道各位童鞋的今年的目标实现的怎么样了？想学UI的同学文章来源/25学堂今天25学堂的小编跟大家来欣赏下美丽说和蘑菇街 AppStore截图设计对比欣赏。美丽说和文章来源/25学堂今天25学堂跟大家聊聊APP当中最常见的一个设计元素：按钮。如今在移动app设计当中，图标快速发展的技术、千变万化的趋势、应接不暇的软件和素材，都是网页设计师需要面临的挑战。但是撇开这些一直变化的东今天是圣诞节了，小编给大家找来了圣诞卡片，一同来学习欣赏一下吧~UI设计导航：QQ群文章转自/优设网建议刚学UI的同学多看这类改版经验总结，提前学习交互设计的知识，在求职时能加不少分。习惯靠经2015年度十大网络用语出炉：重要的事情说三遍；世界那么大，我想去看看；你们城里人真会玩；为国护盘；明明可以叮叮当，叮叮当，铃儿响叮当…今天是圣诞节哦！男神首先在这里祝大家圣诞快乐~~今天我们的作业是一个APP的启动文章转自/人人都是产品经理微信公众号/thor_datou文章作者/Thor之前的文章里探讨过界面的易操作性小编：周末啦，又到了收干货的时候了。今天给大家带来的是由Adrian Chiran带来的精美的12页APP模原文地址/mindtheproduct文章转自/互联网的一些事　
设计岗位在如今科技产业中的地位越来越重，一些设计师在做了一段时间设计后，会产生困惑觉得自己的工作缺少影响力和话语权，很多人选择了转为产品经理，但我从来不觉得这是一条对所有人都适合的道路。与其把获得影响力全部寄希望于「多混几年」或者「转产品」，不如从现在就开始寻求和驱动改变。原文地址/onextrapixel文章转自/优设网优设译文/陈子木现代风盛行的网页设计圈中，不少设计师会倾向编者按：对于2016年网页设计的趋势我们已经在《再战明年！2016年最值得关注的16个网页设计趋势》这篇文章文章来源/设计之家小编：404页面越来越有特点，趣味、搞怪、创意，层出不穷，紧跟设计趋势勇往直前。今天这25原作者/Nick Slater今天平安夜，明天就是圣诞了，各位童鞋收到礼物了么？有约会么？没有的话赶紧来做作文章转自/25学堂一直以来，美食、时尚类App 非常的多，美食app开发给我们的餐饮习惯和享受美食的方式带来又到了做作业的时间了，今天我们的作业比较简单哦！就是一个gif小时钟的练习几乎没什么难点哦！提示：注意时钟的逆势生长的便利店，里头有的是洞悉人心的细致功夫。“独身、年轻、受过良好教育，新上海人。喜欢用好东西，租在市中文章转自/站酷作者/huang22shan没学过画画的菜鸟一枚，很喜欢插画做了一个公众号，就当记录一下自己的又到周一上班的时刻了，当你还在怀念周末的美好时光的时候，一波又一波的会议、邮件冲向你！此今天我们的作业是一组可爱的扁风的小动物哦！各位童鞋可任意挑选四个小动物临摹。 聪明的从大学开始制作像素表情，见证着QQ表情这一条路的发展，但始终却没有制作属于自对于视觉设计师、交互设计师来说，他们需要做的不仅仅是设计一张张静态的页面和独立的icon，他们需要将这些元素xueuiwang 学UI网是一个发布高质量设计教程和分享设计经验的UI学习平台！ 每周的萌芽专访，带来满满的正能量；每日话题讨论，和大家一起解答疑惑；每周六晚上免费的YY公开课（），给大家提供更多学习机会。热门文章最新文章xueuiwang 学UI网是一个发布高质量设计教程和分享设计经验的UI学习平台！ 每周的萌芽专访，带来满满的正能量；每日话题讨论，和大家一起解答疑惑；每周六晚上免费的YY公开课（），给大家提供更多学习机会。汉仪第二届字体之星大赛已经启幕了，大赛的启动吸引到了行业内大咖们的关注，并纷纷发来祝福。感谢大家对字体之星大赛的鼓励和支持，汉仪也将不断的努力，努力将大赛办好。了解大赛详情请长按二维码扫描，或点击“阅读原文”获取大赛邀请函。　
　文章为作者独立观点，不代表微头条立场
的最新文章
2016年上海艺术设计展于1月10日在西岸艺术中心揭幕。新人文宋、哥特汉亮相，汉仪旗黑为全展整体视觉用字。广州、深圳作为本年度字体之星大赛的最后一站，受到了非常多字体爱好者以及学生们的关注。字体之星作为专业的竞赛平台，同时也搭建一个面向专业字体设计学习和交流的平台，聚合专业与爱好者的力量，共同成长。大赛接近尾声，通过这一年的走访与交流让汉仪字库收获了更多喜爱字体的好朋友，了解了更多对于大赛的疑问与期待，让字库不再那么陌生，给汉仪字库产品的提供了更多新鲜的想法以及活力。随处可见的手写字体，伴随着微信等社交软件的成熟来到我们身边，也在互动推广领域成为了汇聚人气的利器，无论如何，你都需要它。12月19日、20日，以字体为中心的系列活动即将登陆深圳、广州，从字体设计与视觉的关系，到字体设计的名师指导。朱志伟师在西安名师工作坊中分别从书法与字体设计、字体的本质、汉字构型规律三个基本观点上，进行了经验阐述与分享。汉仪名师工作坊继北京、上海的成功举办后，即将于12月12日走进西安。朱志伟老师亲自授课（偷偷告诉你，这是开小灶！）【电影海报字体，下载】关于海报中字体的解析，更多的是得先从电影本身出发，知道电影讲的是怎样的一个故事，它想要表现的是什么。先了解了这些，自然就会对画面和文字有了准确的把握与认知。齐立老师对字体设计的深刻理解，他总结到，字体设计是通过手写或平面图形的设计方式去开拓更多新的造型的技巧，并赋予其生命。老师们从活字排印传统到具体的字体设计过程，进行了深度的讲解，作为现场的彩蛋，汉仪字库的教研实验计划，从汉仪的互联网业务分支，与院校合作、设计作品深度结合到字库产品的全线介绍。针对2月28日前截稿的字体之星大赛也做了详细的介绍。微妙细节，造就不同。工作坊现场，老师们将从细节出发，从字体的立项准则、具体的设计流程，到对字体设计每一环节分寸拿捏进行讲解及实际操作。汉仪元隆黑，用平面设计的方式做字，为版面而生。大赛的一大亮点之一，获奖作品将有机会与汉仪字库合作开发成为字库产品。字体之星大赛鼓励所有热爱字体的设计师从创新的角度出发，提出有创造力、有梦想的印刷字体设计方案。岳昕：一直以来，我将画面的“统一”和“完整”看得很重，内心深处容不得半点不和谐和“意外”，以至于在审视设计稿件、作业和作品时标准十分苛刻，被同行、同事和学生称为“魔鬼”。其实我很喜欢这个称呼，这也是对于我能力的一种肯定 。汉仪字库将在10月开始陆续在全国各地举办多场workshop，让大家和有着丰富字库开发经验的资深字体设计师们近距离交流，甚至手把手指导。更深层次的体会字体设计的魅力。论坛资讯活动主题：Typography, Presented by Hanyi and CAA活动时间：20汉仪字库通过本次学术的交流活动，将中国的汉字文化、字体设计、汉仪的产品解决方案传递到美国，同时也传递到众多在美国的华人设计师群体。与大多设计比赛反复强调创意不同，纽约ADC更尊崇艺术与工艺。1920年LouisPedlar创立纽约ADC伊一场主题为：Typography的活动，将于10月14日，在美国纽约ADC艺术指导俱乐部总部举办，西文遇上东字，这将是一场字体与文化的碰撞！！！来北京设计周一起听字文化的声音和分享~【动画祝福】值此中秋佳节，汉仪字库恭祝大家
阖家团圆！文章转自：Type is Beautiful字面和中宫，重心与行气在关于字体设计的评论中，“字面”和“中宫”这是岳昕老师与字体设计的故事，分享给你。看起来好吃，用起来好玩！【速下载！】
汉仪六字黑提醒吃货们：中秋节 is coming~！9月21日，万众期待的优质偶像，井柏然手写字体正式登陆腾讯字体商城。这也是继郭敬明以后第二位优质偶像的字体产今天，汉仪第二届字体之星设计大赛解读分享会——北京站，在中央美术学院红椅子报告厅，顺利举办，现场座无虚席。有趣多变好看好玩月圆之前与你相见9月22日，不见不散点击下方“阅读原文” 查看更多汉仪字库的精彩资讯。↓↓↓汉仪字库出品的「旗黑」系列，是一套多字重、多宽窄的黑体家族。旗黑以其匀称的间架结构、外扩的中宫、克制的字面、干净的笔形、定制的西文字符以及特殊的字重命名系统，塑造了某种鲜明的第一印象。文章将分上、中、下三期发布。我们用一款字，与你一起将文艺进行到底。多图详解当手机QQ聊天写着跟“小四”如出一撤的文字会发生什么？日前，汉仪公司邀请著名青春文学作家郭敬明亲手写就“汉仪9月8日，润圆家族，掀起你的盖头来。完美的曲线是女性的象征这个家族字，有着一发不可收拾的优雅这种存在美丽柔和。汉仪铁线黑，温暖手写感，家族黑体又一力作，6个字重，尝鲜体验。打造情人节专题没有氛围？没有抒发真爱的中文字体？由汉仪字库出品的非常适合浪漫场合的字体下载。用它书写出你对TZUK手机Z1，让选择简单点一屏呈现，精彩世界为了更好的视觉体验ZUK手机Z1选用汉仪旗黑50作为其系统字体字体家族(Font Family)一款字体(typeface)拥有自己的风格，而在这种风格下设计一系列用途不hanyifonts生于1993，专注字体设计、汉字信息技术研究，提供全面汉字应用解决方案。 汉仪字库，用心绽放文字之美！热门文章最新文章hanyifonts生于1993，专注字体设计、汉字信息技术研究，提供全面汉字应用解决方案。 汉仪字库，用心绽放文字之美！