2024年网页设计的排版板式 篇1
在网站设计中其实存在非对齐设计，虽然不常见，因为这确实会让用户觉得网站整体很乱，让人不舒服。但是有些网站设计师为什么还是要是用非对齐设计呢？主要原因有一下几点：
首先就是突出造型，网站采用非对齐方式，也许是为了某一个造型，所以给人的视觉重点不是在图片上，而是图片组成的造型上。
第二点是为了突出内容，有些网站设计为了突出某一块内容会采用非对齐方式，凸显出来，因为人的视觉总会被某一个不一样的东西吸引，比如说一张白纸上有一个黑点，我们的视觉就会一下子找到那个黑点，而不会关注周围白色部分。采用非对齐方式也是这样，把用户的视线移到这一块上来，而非那些对齐的东西上。
第三点在采用非对齐方式会突出网站整体的个性化，避免网站与其他网站相似，采用非对齐方式设计的网站以韩国网站最多，这点你可以在搜索一下网站鉴赏看看。
采用非对齐方式对设计师的要求很高，主要是体现在排版上，既不能给人杂乱的感觉还要个性化，需要设计师花费很大时间，但是现在我国制作网站的市场价格普遍都在五千以内，这点价格谁还会去花心思采用非对齐设计呢？这也是我国使用非对齐方式设计网站少的主要原因。
2024年网页设计的排版板式 篇2
想要做好网页设计，需要掌握的软件和技术还挺多的，但不建议都把这些技术掌握的很精通，毕竟人的精力是有限的，可以选择其中的一项技术来认真钻研，并达到熟练掌握运用。
一.视觉方面
如果你是设计专业或者对视觉有很浓厚的兴趣，那就可以选择做这个方向的网页设计，也就是通过设计软件，根据原型图或者草图制作高保真效果图。要做这方面的网页设计，需要掌握的设计软件有photosho,illustrator等视觉设计软件。
ps主要用来设计网页效果图和对效果图进行切片以及一些网页小元素的处理和制作，用处可以说相当大，学好PS就完全可以制作出精美的网页了。illustrator主要是处理一些矢量图形或者图标，辅助PS进行网页设计，这要看你哪个软件掌握的熟练，就以哪个为主。
掌握了基本的网页设计软件，下面就要多学习一些网页的基本知识，比如网页尺寸，网页布局排版等规范，这些需要长时间的练习和积累，要多看多想多做，慢慢你就会发现自己水平提高了，设计的网页也越来越专业和漂亮。
二.网页前端
这个方向的网页设计，需要掌握和精通前端html代码以及css样式js这些，也就是通过这些把ps设计好的效果图实现成可以通过浏览器浏览访问的网页页面。对代码有兴趣的朋友可以朝这个方向发展。
推荐使用的软件是Dreamweaver，方便易学，可以快速进行网页布局和css，当然随着学习的深入，你会知道其他很多前端设计软件，这里不再一一介绍。
上面介绍的是网页设计的两个方向，当然也可以两者都掌握，那就是全能型网页设计师了，很受欢迎。最好精通其中一个，另外的技术适当了解。
2024年网页设计的排版板式 篇3
在日常生活中，人们周围充斥着各式各样的图片信息，主要包括图形、图像等，这些视觉要素具有独特的表现能力，以非常直观的形式向人们阐述主题，通过对图片类型进行选择，来赋予文字乃至整个版面以情感的表现力，并以此打动观赏者，使其产生共鸣。
角版图片又称方形图片，这些图片在外形上呈现出正方形或矩形的样子，是我们生活中最常见的一种图片形式，它拥有规整的外形结构，并能维持版面结构的平衡关系，因此常被运用到书刊、杂志等商业领域。
在版式设计中，将规格不同的角版图形投放到同一个版面中，利用图片在外形上的对比关系来增添版面的变化效果，并进一步打破呆板的版式格局，从而提高观赏者对版面的感知兴趣。
由于角版图片具备简洁的外形，因此能极大限度地突出图片中的视觉信息。在版式的编排设计中，为了进一步强调图片的内容，我们将外形完全相同的角版图形组合在一起，以规整的形式编排到版面中，利用整齐且直观的编排方式来提升画面的统一感。
出血线即在进行成品裁剪时，通过将版面中的有效信息安排在出血线内，以确保色彩覆盖了版面中所有要表达的区域。除此以外，还可以利用印刷中的出血线来进行创作，以此打造出具有独特魅力的版式效果。
出血线的标准是经过精密计算得来的，在印刷中不同规格的纸张有着不同的出血标准。对图片进行标准的出血剪裁，去除多余部分的图片，从而将有价值的视觉信息保留在版面中，从而提升图片要素的表现力。
在对版面的编排设计中，可以在出血线以外的区域加入其他的视觉信息，从而丰富图片的边缘结构。例如：在出血线外加上黑色的边框，利用该边框元素来加强图片内容的表述能力，与此同时还使画面四周达到整洁、美观的效果。
去背图片又称褪底图片，是指将图片中的某个视觉要素沿着边缘进行剪裁，以此将该要素从图片中“抠”出来，从而形成去背图片的样式。在图片处理中通过对图片进行褪底处理，使该图片的视觉形象得到提炼，并使图片要素变得更加鲜明与突出。
褪底图片能使主体物的视觉形象变得更为鲜明，为了进一步增强图片在版面中的表现力，将做过褪底处理的图片与常规图片组合在一起，利用错乱的图片结构关系来打造出具有视觉冲击力的版式效果。
在进行图片的去背处理时，务必要做到严谨与细心，以保证主体物彻底地从背景中抽离出来，从而确保去背图片的美观性。在实际的版式设计中，去背图形能有效地突出其内容，并将观赏者的视线集中在该视觉要素上，使主题信息得到完美的展现。
通过对图片的特定区域进行剪裁处理，将有价值的视觉信息保留在版面中，并利用该要素来帮助画面完成对主题信息的阐述。在实际的设计过程中，虽然图片的剪裁方式有很多种，但我们剪裁图片的目的只有一个，就是突出图片中与主题有直接关系的视觉要素。
首先，可以利用剪裁图片来完成对视觉要素的缩放，并强调版面中的主体物。例如：在一个有人有风景的图片中，为了放大人物在画面中的视觉形象，就需要通过剪裁背景画面来缩小版面中风景要素的面积，使人物要素得到强调。
除此之外，还可以对版面中的主体物进行剪裁，并将该主体物的局部放置在画面中，以构成风格独特的视觉效果。最常见的剪裁对象有人物、动物和建筑等元素，结合特定的剪裁与排列方式，该类图片还能在视觉上形成切入式的构图样式。
在处理版面中的图片时，通过对图片进行剪裁还能控制画面中各视觉要素间的大小比例，并根据物象间的比例关系来区分版面信息的主次关系，从而提高图片表述主题的能力。当剪裁图片时，一定要时刻保持清晰的思路，以免因失误而将与主题有关的视觉信息删除。
①整体感。所谓整体感就是指版面各视觉要素之间能够形成恰当而优美的联系，各要素不孤立存在，而是相互依存、互为条件。版面的整体布局应统筹规划使局部服从整体，在突出个性同时也要保持风格一致，达到多样统一的视觉效果。
②中心感。版面多数以主大图做为版面的视觉中心，能够左右观者对版面认识的核心元素。视觉中心越明显、越强势，越有利于实现整体的传播效果，人的视觉中心常常位于版面自下而上5/8的区域 ，中心偏上位置。但是也有特殊的情况可以利用版面的四个边角，形成具有动感的视觉中心。
③平衡感。图片在版面中的均衡是指图片在版面上的分布在上与下、左与右取得面积、色彩、重量等量上的大体平衡，这种结构自由生动，具有不规则性和运动感。
④和谐感。版面色彩多且杂、重、乱，版面多重色调会破坏版面的秩序，也容易引起色彩的不和谐感，这显然违背了人的正常视觉心理，没有层次、秩序混乱的版面只会令观者无所适从。
运用色彩时应该注意所有临近的颜色要相互配合，通过色相对比来区分版面的层次，增加版面的活力，从而突出重点丰富视觉表情。强调突出色调的倾向，或以色相为主，或以明度为主，或以纯度为主，抓住某一重点，使其占主要地位。
2024年网页设计的排版板式 篇4
您好！很高兴回答您的问题！
一、平面
平面设计是这三种设计里最“古老”的专业了，可以说平面设计是一切设计的鼻祖，学任何设计都绕不开它。因为所有的设计理论比如配色，排版，字体等都是平面的基础也是设计的基础。同时平面设计也是比较复杂的，因为除了要了解基本的设计技巧以外也要了解材质，工艺等，不同的工艺和材质出来的效果也是千差万别，甚至在预算上都会差出好几个层级。
1.1载体
平面的载体在三类专业中算是比较多的，最常见的就是纸了，当然纸也分为了很多种，最常用的是铜版纸。铜版纸又根据克数的不同用途也有所区别。用到纸质的设计有画册，单折页，海报，杂志，名片等。这里关于名片多说一句，很多人说名片那么小的尺寸，如何才能有设计感？加的内容和装饰多了会显着很乱很拥挤，加的内容少了又给人的感觉没有设计感，这个问题如何解决呢？最简单的方法就是简约的设计+高档的纸+恰当的印刷工艺。不过这里所说的名片是比较高档的名片了，在公司里也是处于中高管理层的，一般的业务员因为分发的名片量比较大，所以就用最普通的纸就可以了，控制成本。
平面设计中还会用到的载体是喷绘和灯箱片用到的一种类似塑料的材质。此类材质的设计手法与其他设计无异，关于此类材质多说一句就是设计时的分辨率设置。一提到平面设计的分辨率很多人的第一反应就是300，这是个绝对的误区，其实在平面中也会用到150，72，甚至30。那这是如何划分的呢？最简单的一种解释方式就是阅读距离。一般捧在手上看的设计分辨率为300，比如杂志／单折页／画册等，因为阅读距离很近，如果分辨率比较低，会出现很明显的不清楚情况。
再有海报的设计一般是挂在墙上的，我们阅读时是有一些距离的，所以分辨率设置为150到200即可，很多人会问设计成300可不可以？当然可以，但有几个前提，首先你能找到那么大尺寸同时是300分辨率的素材图片，再有就是你的电脑是不是都能够带起来这么大尺寸同时分辨率又很高的文件，还是建议大家不要尝试了，结果一般比较惨。
再有还有72和30的分辨率，此类分辨率会用在阅读距离更远的设计上，比如马路上的大型围挡，商场大厦外面的五六层楼高的大型海报。
最后要提的一个材质是最近几年流行起来用的比较多的就是电子屏，在商场大厅，电梯墙壁，写字楼前台等地方现在都会用到电子屏来展示一些海报／通知／活动等。此类材质的好处就是更新内容方便，节省印刷成本，最重要的是没有印刷后果。印刷的风险比较大，因为印刷不可逆，印刷出来后出现了问题，基本没有补救的措施，而电子屏则没有这个风险。当然它的缺点就是没有很强的流通性，一般只能在固定的一个地方进行展示。
1.2用途
平面设计包含的品类是比较多，常见的画册／海报／单折页／名片／书籍装帧甚至包装等传统设计基本都是平面设计师的工作。除了这些印刷品以外还有logo设计，VI设计等工作。平面设计的品类就是比较多，所以想做一个优秀的平面设计师没有个几年的历练是很难达到的，这也是最初平面设计师转UI设计师和电商设计师比较容易比较多而网页转平面不容易的原因所在了。
平面设计师设计出来的内容很多，刚才提到了logo，VI我们统一称为品牌设计。画册，海报，包装我们统一称之为物料设计。两类设计统一归放到平面的名下一定是有原因的，品牌设计是用来宣传企业品牌的，规范企业的设计视觉，统一企业的宣传口径。
画册，海报，包装等物料是用宣传企业产品的，使自己的产品在原有的基础上更具商业价值。最具代表性的就是包装，我们经常会看到很多普普通通的产品包裹上漂亮的包装后，价格就会成倍的增长。所以不管是品牌也好还是物料也好都是用来做“宣传”的。这也是平面设计师最鲜明的特点，设计出来的东西用来做宣传。这个东西本身并不是产品，也不具备什么商业交易价值，都是为了公司为了产品服务的。
1.3技能
因为平面设计师需要做的内容涵盖的比较多，所以对于技能方面的要求也比较全面。比如除了最基本的PS／AI／ID等设计软件以外，还有了解到排版印刷工艺，材质使用，字体设计等。如果各位将来是做平面设计的话，印刷材质是关键，就像刚才说名片时提到的，同样的设计，如果材质不同给人的感觉也是完全不一样的。所以这一块除了看书学习以外，更直接的方式就是泡在印刷厂里，跟着老师傅走几遍流程，学到的东西会受益匪浅的。
二、网页设计
网页设计在现在的工作中又分成了两个工种，一种就是常规的网页设计师，设计企业的官网，或者是一些具备功能性的网站。另一种是电商设计师，在五年前，这个工种依然不被人看重，即便是现在也有很多电商企业称自己家的设计师为美工，这也就造成了很多设计师会不愿意来做电商设计，更不想承认自己是美工。但实际上做的好的电商设计师工资也是非常可观的，尤其是在一些大型的店铺，此类店铺的视觉自然也是能够在圈里数一数二的了。
2.1载体
网页的载体比较单一，在之前就主要是在PC端运用，后来移动互联网的流行与普及，使得网页在手机上也流行起来，还有平板等。为了保证能够多端正常显示，在html5和css3的帮助下流行开的一个名词叫着“响应式设计”，也就是使我们的网页能够在任何平台上都正常显示。
2.2用途
刚才我们说平面设计时提到了一个名词就是“宣传”。如果给网页也用一个名词概括的话，我觉着就是“载体”。没错，网页本身就是载体，企业站乘载了公司的产品信息，企业文化，品牌宣传等，是普通人了解一家企业的最基础入口。而类似于天猫淘宝此类的功能性网站，也是将网页作为了一个平台一个载体，来进行产品的销售的。网页本身是一个“容器”，里面“装”的内容决定了一个网页的价值。
2.3技能
在说平面时我提到了平面设计师转网页设计师是比较好转的，因为网页设计师同样需要具备对于色彩，排版和字体的敏感度。软件除了要会PS和AI以外还要需要了解Html和Dw。这里一定要跟大家强调的是网页视觉设计师不用对代码有非常深入的研究，因为在一家健康的运行公司里网页视觉设计师和前端工程师是两个工种。对于代码的态度是了解基础即可，深入了解如虎添翼。如果是做电商设计的话，从现在的趋势和2016年双十一的店铺设计来看最近一年是3D轻质感的天下，所以有心的设计师一定要会一款3D软件，市面上很多，3D MAX／MAYA／C4D等，给大家推荐的是C4D，出效果易上手。
三、总结
设计这个行业是一个充满了很多无奈的地方，表面光鲜，后面因为客户、资金、想法等所经历的坎坷只有自己体验了才知道。之前说过一句话，如果是因为看到了这个行业挣钱就来这里做的话，可以，没有问题。但是如果你很难使自己喜欢上设计的话，那还是奉劝各位需要慎重啊。因为如果不是真心喜欢的话，挣在再多钱也很难坚持下来，半途而废虎头蛇尾的事在这行里很常见的。
最后我一直跟人分享的一句话就是师父领进门 ，修行在个人。作为设计师你需要了解的是这个世界上最新的东西，紧跟时代，任何新东西的产生没有设计师是出不来的。所以无论是科班出身还是专业培训，一直都要做的就是自学。不要想着通过喷几句大品牌的设计来凸显自己的逼格更高，你自己的专业度和审美是无法和苹果几百人的团队来比拼的。喷Instagram的图标丑的都是没有用过的人。有心的人能谦虚的去看比自己优秀的作品，找出好处加以学习使自己进步。
最后说一句设计这个行业对于学历没有特别的门槛，你可以没有学历，但不能停止学习。
2024年网页设计的排版板式 篇5
字体排版绝不仅仅是使用字体那么简单，它包括了关于文字”看上去会是怎么样？”的所有事情——例如文字的大小，行高，颜色甚至文字间留白这样的细枝末节的小事。一个好的文字排版会为你所写的内容定下情感基调，并且可以帮助读者更好的理解其内容和语境。
为了让你使用起来更像是在看一本参考书而不是说明书，本文将会非常精简清晰，如果你想进一步的了解更多细节，可以点击查看在每一章中的”扩展阅读”去深入了解。
这本手册将会在GitHub上开源，并且会持续更新一些最佳实践的范例，希望你们喜欢！
字体排版设计视觉层次
视觉层次是一种理念，它意在传达页面中的元素应该依照其重要性进行组织排版，以便读者可以很容易的通览整个页面，找到相关的内容。一个好的视觉层次可以引导读者在阅读时候的视觉流向。视觉层次被广泛运用于文字排版中，它构成了文字排版设计的理论基石。
请看下图的”爱丽丝梦游仙境”的字体排版设计，它展现了一个清晰的视觉层次：
点击这里 查看网页上的实际效果
视觉层次可以被分成以下4个部分：
字体大小 & 字体重量： 设置字体大小和字体重量是两种构建视觉层次的最简单的方式。他们可以很容易地告诉读者什么地方是最重要的，引导读者的目光落到这里的内容上来。只是简单地为文字加上这两种样式，文章的重点便一目了然了。
定位： 元素定位是另外的一种构建视觉层次的方式，就像上图中，文章的标题和作者信息通过置顶和居中表明了它们的重要性。
字体： 通过使用有对比度的字体可以提高不同元素之间的辨识度，从而构建视觉层次
颜色： 为重要的文字设置不同的颜色也是一种非常简单的构建视觉层次的方式。然而使用这种方式的时候一定要小心，因为颜色的滥用可能会造成重点部分辨识度的降低。
扩展阅读：
Visual Hierarchy： How Well Does Your Design Communicate?
Creating Exciting And Unusual Visual Hierarchies
字体排版中的格式塔原则
格式塔原则， 或格式塔法则， 是一种构建感性认知的规律。当我们观察这个世界的时候，我们通常会意识到，一个复杂的场景是由多个在某些背景之上的物体构成的，而这些物体则是由更小的一些物体构成的，依此循环下去。
在字体排版中我们需要理解的两个很重要的格式塔原则就是”距离原则”和”相似原则”。.
距离原则
为了更好地掌握元素定位的方法，了解距离原则是很重要的。距离原则表明，人们会将靠得近的物体视为有关联的物体，反之，隔得比较远的物体将会被看成属于不同类别。
点击此处查看原图
在字体排版设计中，”距离”指的是通过设置行高、内间距和外间距所制造出来的留白空间。在两段不同的段落之间应该留有明显的并且易于区分的留白间隔，请看下面的例子：
注意啦，你觉得应该把内容相关的部分都挤到一个很小的空间中去吗？当然不是这样，自由随意的留白也是很重要的。距离原则告诉我们，只需要为那些没有关系的段落之间额外的加上一些易于区分的留白就可以了
相似原则
格式塔的相似原则告诉大家，看起来很像的东西会被认为是一类的东西。举个例子，如果所有可点击的文字被设置为天蓝色，那么读者就会认为文章中所有天蓝色的文字内容都是可以点击的。
在字体排版中，相似原则就意味着，拥有同样功能的元素应该在样式上保持一致。如果两组元素的功能相似的话，那么它们也应该看起来很像才对。例如，两篇同为博客帖子的文章应该看起来很像。而相反的，两个功能不相同的元素也应该看起来不像。
扩展阅读：
Gestalt Theory in Typography & Design Principles
Proximity， Uniform Connectedness & Good Continuation
字体选择字体
选择字体是一个具有创造性和情感的过程。不同的字体可以传达不同的情感，你可以尽情挑选一个合适的字体让你的文字感情变得丰沛起来。
首先为你的文字的正文挑选一个合适的字体，当你需要搭配不同字体的时候，记得要保持正文字体的不变，然后试着依据这个字体选择和它相搭配的其他字体。
使用一些例如TypeTester 和 TypeCast 这一类的工具会让你进行字体选择的时候轻松一些。
从他人处获得灵感! Fonts In Use提供了大量的优秀的字体搭配范例。
有些字体本来就是为用作大标题而设计的，而有些字体天生就只适合那些小屏幕，你要依照每个字体的”天性”去使用它们。你可以在WebType 上面找到对于不同字体而言合适的尺寸。此外 TypeKit也标明了其上的字体是适合标题或者是正文。
为了达到最大程度上的兼容，我们建议使用上面列出的格式。或者，只使用 woff2 和 woff也会支持大部分的现代浏览器。
你需要为每个列出来的格式提供一个相应的字体文件。推荐使用 Transfonter 或者FontSquirrel’s Web Font Generator，这样你就可以在只有一个字体文件的情况下，将其转换成不同的文件格式。
尽可能的压缩你的字体文件。 点击这里 查看更多信息。
将多个同源字体文件（细体、常规、半粗体、粗体等等）合并成一个font-family， 尽量不要为每个字体都起一个新的font-family的名字。
或者，你也可以通过线上字体资源服务，如Google Fonts 或者 Typekit引入你想要的字体。
扩展阅读：
Further Hardening Of The Bulletproof Syntax
FontSquirrel： How To Use The Generator
加载字体
在你引入的字体被渲染出来之前，他们需要先进行加载。下面是三种在加载的时候可能会发生的事情：
引入的字体没有被识别出来，字体应用了备用字体。
引入的字体虽然被识别出来但是没有加载，他需要在下载完成之后才会被应用。
引入的字体被成功识别并迅速应用。
场景1只发生在你尝试使用一个不存在的字体，或者声明时候的src指向了一个坏链， 这种情况可以并且应该彻底避免。接着我们跳到场景3，这种情况通常在字体被正确的缓存的时候发生，也是我们喜闻乐见的。场景2中包含着字体加载的过程，字体加载通常是难以避免的（至少是在第一次请求的时候），下面是几种处理方式：
1. 文档样式闪烁方案 （FOUT）
FOUT是指网页会在切换到合适的网页字体之前，使用默认或者备选字体显示文字。这种情况的出现是因为只有当HTML和CSS都被下载完成之后，字体请求才会发出。这就意味着，在HTML被显示出来而字体文件没有被完全下载下来中间存在着一段”空档”时间。 FOUT 算是对大部分的网页而言的最佳选择，主要是其他的选择也许更糟。如果使用得到的话，FOUT 很难被用户察觉出来。
2. 不可见文本闪烁方案（FOIT）
很多年前，一些现代浏览器开始使用一种新的技术来处理字体加载的问题 — FOIT. FOIT是指当浏览器检测到字体正在加载的时候，隐藏应用这段字体的文字，直到字体完全下载完才将其显示出来。 然而我们应该避免这种做法虽然这样做从理论上看起来还不错，但是这会带给那些网络速度比较差的用户十分糟糕的体验。有可能会在最初的FOIT后出现FOUT， 最坏的情况可能会是这段文字将永远看不到了。
3. 白屏方案
即在字体加载完成之前，整个网页都处于不可见的状态，或者也可以采用显示一个进度条.我们只推荐当FOUT 严重影响用户体验的时候使用这种方法。 我们通常在一个网页需要大面积显示一个特定的字体的时候使用该方法，否则，FOUT 总会我们的第一选择，因为”内容至上”。白屏方案与 FOIT很相似， 但对于你来说，你拥有控制在什么时候给用户展示你的内容的自由，这种感觉会似乎更棒一些，不是吗？而且在FOIT方案中， 不可见的文本有时候会给读者带来困惑，而彻底的白屏（或者一个进度条）会让人很自然的觉得是一个正在加载的信号。
不管你是打算使用 FOUT 方案或者白屏方案， 我们都推荐您使用Web Font Loader这个JavaScript库. Web Font Loader 可以让你对 @font-face加以控制， 而且你也为字体加载的体验添加控制事件。
注意： 有一个W3C 字体加载 API也会实现同样的功能，但是它现在的 支持不是很好_
异步地使用 Web Font Loader 很重要，只有这样做才不会延误页面其他部位的渲染。
写样式的时候，让你的备用字体尽可能近的靠近你的实际字体，这样才能最大程度的减少 FOUT造成的影响.点击 这里你将会看到一系列的备选字体. 使用 这个工具你将很容易的看到备选字体和你引入的字体的对比效果.
白屏方案
在这个例子里面，备选字体不需要和你引入的字体看起来很像，因为我们不会用到 FOUT. 依照你自己的喜好去选择备选字体吧。
如果你想要用一个进度条取代白屏，你可以使用Pace。这种方法在用户体验上效果会更好一些，特别是当字体文件很大的时候。
扩展阅读：
Type Study： Choosing Fallback Fonts
FOUT， FOIT， FOFT
Web Font Optimization
OpenType 的特性
OpenType 的特性可以被视为文字进行字体排版时的可选项，它们被用来加强文字的表现和易读性。
p { font-kerning： normal; font-variant-ligatures： common-ligatures contextual; -moz-font-feature-settings： "kern"， "liga"， "clig"， "calt"; -ms-font-feature-settings： "kern"， "liga"， "clig"， "alt"; -webkit-font-feature-settings： "kern"， "liga"， "clig"， "calt"; font-feature-settings： "kern"， "liga"， "clig"， "calt"; }
OpenType 特性被放置于字体之中，这就意味着对于不同的字体，会有不同的特性，在使用这些特性之前，我们需要看一看我们的字体是否支持这些特性。
使用 font-feature-settings来激活 OpenType 特性. 由于目前对于这个属性的支持不好，我们需要在属性之前加上前缀。
Kerning kern， ligatures liga， contextual ligatures clig， 和 contextual alternatives calt这四种适用于所有字体中 ######( 译者注：font-feature-settings这种属性仅支持拉丁文语系的字体使用，并不支持中文哦！ )
Web Style Guide相对大小
尽可能的使用相对大小。
html { font-size： 100% } p { font-size： 1em } @media (min-width： 64em) { html { font-size： 112.5%; } }
font-size： 100% 与浏览器的字体大小设定保持一致而不是去覆写它，根据大多数的浏览器的默认设置，这里也可以用1em 代替表示 16px.
通过改变html 的 font-size会影响到所有单位为 em和rem 的元素.如果是对于响应式设计的网页，这样做还是比较实用的。
用户的选择也很重要，所有不要偏离 font-size： 100%和1em太远.
对于font-size建议使用rem 和 em.
对于一些元素定位如margin， padding等等，建议使用 rem， em， 或者 % 。
对于媒体查询中尺寸建议使用em.
对于一些大的标题字或者配有图片的字，可以使用FitText来实现标题的缩放。尽量避免使用vw 和 vh因为现在的支持还不是很好，难于精确的配置，并且对于一些浏览器的字体和缩放设置并不适配 。
扩展阅读：
Type Study： Sizing The Legible Letter
5 Useful CSS Tricks for Responsive Design
REM vs EM – The Great Debate
PX， EM or REM Media Queries?
容器
容器，或者称为包装，指的是用来包裹一个或者多个元素的HTML元素。它将元素分组，从而更好进行语义化、修饰以及布局。
html { box-sizing： border-box; } *， *：before， *：after { box-sizing： inherit; } .container { max-width： 67rem; padding-left： 1.5rem; padding-right： 1.5rem; }
强烈建议使用 box-sizing： border-box. 点击这里 查看更多信息。
左/右内间距与最大宽度联合使用可以很容易地创建一个移动端友好的容器。
要为容器选择一个合适的宽度，既不能太大（因为太大的话读者的眼睛难以聚焦）也不能太小（这样读者的眼睛需要经常移动才可以看清）。永远记住，在进行网页字体排版的时候，没有一个适合所有字体、尺寸、行距和分辨率的铁律，你需要自己来做决定。
扩展阅读：
* { Box-sizing： Border-box } FTW
StackOverflow： Ideal Column Width For Paragraphs Online
字体大小
使用 缩放模块 可以帮助你决定在你的元素上面应用怎样的font-size .缩放模块指的是依照其内容安排的一系列比较合适的字体大小的数值。
缩放模块的说明. 点击此处
我们可以在编写CSS的一开始使用缩放模块，将它作为一个参考。
值的注意的是，尽管不同的字体有着不同的大写字母高度和x字母高度，可是大多数的模块化缩放工具都没有将这些考虑在内。
在你的样式表中，建议将你所使用到的缩放模块工具的配置信息写在注释之中。
响应式的缩放模块
只使用单独的一个缩放模块方案并不一定适合所有分辨率的设备，为了解决这个问题，你可以依据用户的设备的分辨率的不同提供不同的缩放方案
垂直距离
文字间的垂直距离是由 line-height， margin， 和padding构建出来的.
line-height 不应该带有单位。比较宽的容器里面文字的行高会大一些，而那些比较窄的容器里面行高相对来说小一些会比较合适。
为那些具有单方向的文本元素添加margin属性，建议使用margin-bottom.
要遵循距离原则.
垂直节律
垂直节律是指元素之间的垂直间隔要保持一致性。这一点十分重要，它可以带给读者视觉上放松的享受，给他们一种亲近的感觉。
Image source建立垂直节律很简单。首先，确定你使用的基础垂直内间距和基础垂直外间距的数值。然后，为你的容器，文字性元素或者其他相关元素的单方向的外边距（或者内边距）应用这个数值。如果你需要制制造更大的间隔的话，应用这个数值的倍数就好啦!
将基础间距的数值设置成与行高相同的数值，这样你的文字就像写在一个条格纸上那样整齐，就像我们传统的印刷字体设计的那样。然而，想要文字拥有垂直节律不一定需要按照上面的方法来做，只要你设置了一个基础间距，并且使得其他间距都是由这个间距成倍的得来的，那样就可以了。
文字底部对齐基线网格
文字底部对齐基线是垂直节律的一个更为严格的实现。在网页中，文字通常在line-height间居中对齐.但对于较大的文字来说会比较讨厌，因为这样做会导致在顶部和底部留有太多的空间。在传统印刷的时候，这个问题一般会通过让文字对齐基线网格的底部得以解决。
我们也可以通过为较大的文字添加一个负的margin-top和一个较小的margin-bottom，不需要使用基线网格而解决这个问题。
图片资源为不同的字体样式、字体大小和分辨率添加一个底部对齐的基线网格并不是一个很容易的方式，所以强烈建议你使用一个字体排版基线库例如 Sassline 或者 MegaType.
注意，垂直节律只是一个建议，而且基线网格也只是想象出来的。所以我们不需要在每个使用场合都遵循这个规律，也不用在每个元素中都去追求像素级别的完美。
扩展阅读：
Why is Vertical Rhythm an Important Typography Practice?
Aligning type to baseline the right way using SASS
Is Web Typography Completely Broken?
Single-direction Margin Declarations
颜色
颜色可以很大程度上的增加视觉辨识度，是字体排版中一个重要的组成部分。
不要随心所欲的挑选颜色，建议使用颜色板，建议你使用 Material Design colors 和 Flat UI colors 中提供的颜色板进行颜色选择.
不要过度滥用一个颜色，因为这样会造成辨识度的降低，同样也不要使用很多完全不同的颜色。
遵循相似原则.
不建议使用纯黑 #000 作为你的正文颜色，你可以选择一个非常灰的颜色如#333.
有时候，使用透明颜色比使用浅色会更好一些，如果你深入的了解，可以点击这里 。
确保文字和背景有较大的对比度，你可以使用 这个对比度检测工具 帮助你进行选择.
####扩展阅读：
Magic Of CSS： Color
Google Style – Color
下划线
在印刷品里，永远都不要使用到下划线，因为这样做会影响文字的阅读，重点是，它很丑！Practical Typography
一般的来说，在网页中下划线也会看起来并不美好！幸运的是， background-image 就包含一个方法，它可以使得下划线变得好看一点。 下面是Adam Schwartz使用Sass实现的下划线的例子 ：
SmartUnderline 是一个简化这个工作的库。建议你只在有链接的地方使用下划线，这是大多是网站都遵循的规律，如果不这么做的话，可能会引起误解。