第3章 网页文字设计

CompanyLOGO第3章网页文字设计网页设计教程——美工与技术第3章网页文字设计在网页设计中，字体的处理与色彩、版式、图形等其他设计元素的处理一样非常关键。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。本章介绍动态网页文字设计创意与编排方法。动态网页设计教程——美工与技术第3章网页文字设计网页设计教程——美工与技术3.1网页字体与字体编排13.2网页文字编排的创意23.3网页文字设计的技术33.4网页文字设计技巧43.1网页字体与字体编排在网页设计中，文字既是信息传达的重要媒介，是传递信息最直接、最通用、最容易沟通的方式，也是具有直观诉求力的重要的视觉传达要素，是网页美工设计中重要组成部分之一。动态网页设计教程——美工与技术3.1.1网页字体的使用在网页设计中准确选择字体，是每个网页设计师首先要考虑的问题。动态网页设计教程——美工与技术3.1.1网页字体的使用1.中文字体（1）规范字体如宋体、仿宋体、黑体、楷体。它们通过粗细变化可以变成粗宋体、中宋体、细宋体、粗黑体、中黑体、细黑体，如根据饰角变化又可变成综艺体、圆线体等。动态网页设计教程——美工与技术3.1.1网页字体的使用1.中文字体（2）手写体（书法体）手写体分为两种，一种来源于传统书法，如隶书体，行书体，另一种是以现代风格创造的自由手写体，如广告体，POP体。手写体只适用于标题和广告性文字，长篇文本段落和小字体级数时不宜使用，应尽量避免在同一页面中使用两种不同的手写体，因为手写体形态特征鲜明显著，很难形成统一风格，不同手写体易造成界面杂乱的视觉形象，手写体与黑体宋体等规范的字体相配合，则会产生动静相宜，相得益彰的效果。动态网页设计教程——美工与技术3.1.1网页字体的使用1.中文字体（3）美术体（装饰字体）美术体是在宋体、黑体等规范字体基础上变化而成的各种字体，如综艺体、琥珀体。美术体具有鲜明的风格特征，不适于文本段落，也不宜混杂使用，多用于字体级数较大的标题，发挥引人注目，活跃界面气氛的作用。国内电脑字体根据字库文件不同稍有区别，如常用的方正字库、文鼎字库、华康字库等，动态网页设计教程——美工与技术3.1.1网页字体的使用2.西文字体----拉丁字母组成动态网页设计教程——美工与技术3.1.1网页字体的使用2.西文字体（1）饰线体此类字体在笔画末端带有装饰性部分，笔画精细对比明显，与中文的宋体具有近似形态特征，饰线体在阅读时具有较好的易读性，适于用作长篇幅文本段落。代表字体是新罗马体（TimesNewRoman）。动态网页设计教程——美工与技术HelloEveryone3.1.1网页字体的使用2.西文字体（2）无饰线体笔画的粗细对比不明显，笔画末端没有装饰性部分，字体形态与中文的黑体相类似。由于其笔画粗细均匀，故在远距离易于辨认，具有很好的识别性，多用于标题和指示性文字。无饰线体具有简洁规整的形态特征，符合现代的审美标准。代表字体是赫尔维梯卡体（Helvetica）。动态网页设计教程——美工与技术3.1.1网页字体的使用2.西文字体（3）装饰体即通常所说的“花”体，由于此类字体偏重于形式的装饰意味，阅读时较为费力，易读性较差，只适合于标题或较短文本，类似于中文的美术体和手写体。代表字体是草体（Script）。动态网页设计教程——美工与技术3.1.1网页字体的使用无论选择什么字体，都要依据网页的总体设想和浏览者的需要。在网页文字设计中，选择两至三种字体的视觉效果较好，这样会显得整体而又不觉得凌乱。具体应用时可以拉长、压扁、倾斜、加粗、变细，这样同样能产生丰富多彩的视觉效果。同一页面中字体应尽量在同一字族中选用，以保证界面具有明确、统一的风格特征。动态网页设计教程——美工与技术3.1.2网页文字的编排1.文字的大小文字大小决定网页形象，文字标题的大小控制了网页的形象。放大标题会给人有力量、活跃、自信的印象；缩小则表现出纤细和缜密的印象。另外，文字大小的对比也会左右印象。标题文字的大小与正文之比叫做跳动率。跳动率越大，画面越活跃；反之，越稳重。文字大小可以用不同的方式来计算，例如磅(point)或像素(pixel)。因为网页文字是通过显示器显示，所以建议采用像素为单位。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。一般情况下，网页正文可以使用12-16像素大小的文字。动态网页设计教程——美工与技术3.1.2网页文字的编排2.文字的粗细网页设计者可以用字体更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，界面雅致，有稳定感；字体种类多，则界面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。动态网页设计教程——美工与技术3.1.2网页文字的编排字体细显优美，粗显有力。将标题文字变细，就会显得十分优美。宋体也好、黑体也罢，哪一种字体变细都会产生优美的意味。将文字变粗，效果增强，粗字则传递了强而有力的印象。动态网页设计教程——美工与技术3.1.2网页文字的编排粗字宜用做标题正文不宜粗细变化动态网页设计教程——美工与技术3.1.2网页文字的编排3.字距与行距行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10：12，即用字10点，则行距12点。适当的行距会形成一条明显的水平空白条，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强界面的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣，但要注意行距一般不超过字高的200%。加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强界面的空间层次与弹性，表现出独到的匠心。动态网页设计教程——美工与技术3.2网页文字编排的创意形式网页中文字的设计主要在于一些网页广告、图片和标志中，文字创意设计的方法总结起来有以下几种：动态网页设计教程——美工与技术3.2.1鲜明对比主要通过笔画大小、笔画的形态、笔画色彩等的强烈对比使各自的特征更加鲜明。动态网页设计教程——美工与技术3.2.1鲜明对比动态网页设计教程——美工与技术3.2.2笔画共用动态网页设计教程——美工与技术笔画的共用主要通过相关、相似、相近的笔画间的共用来组成文字间的关系。3.2.2笔画共用动态网页设计教程——美工与技术3.2.3笔画突变动态网页设计教程——美工与技术笔画突变是指在局部的某个或者某些笔画上采用不同于正常笔画的形态造型，突出文字内涵和特征。3.2.3笔画突变动态网页设计教程——美工与技术3.2.4形象添加动态网页设计教程——美工与技术添加形象主要是通过在汉字局部笔画上添加与汉字表义相关的图像或图形来增加汉字的表意功能。3.2.4形象添加动态网页设计教程——美工与技术3.2.5笔画相连动态网页设计教程——美工与技术笔画相连是通过一组文字笔画上的连贯来表达文字间的关系，增强一组文字的视觉感染力。3.2.5笔画相连动态网页设计教程——美工与技术3.2.6会意象形动态网页设计教程——美工与技术会意象形是指通过对所设计的汉字字意的深刻内涵加以挖掘，以象形或者会意的形态来传达文字的信息。3.2.6会意象形动态网页设计教程——美工与技术3.2.7表面装饰动态网页设计教程——美工与技术字体的表面装饰是通过对文字笔画的局部或者整体装饰，来增强文字传达的效果和感染力。3.2.7表面装饰动态网页设计教程——美工与技术3.2.8线条中分动态网页设计教程——美工与技术通过在文字或字母的笔画中间贯通白线，形成统一的视觉效果。3.2.8线条中分动态网页设计教程——美工与技术3.2.9点圈变化动态网页设计教程——美工与技术将一些文字或字母的点进行变化，如字母i的变化。3.2.9点圈变化动态网页设计教程——美工与技术3.2.10边框背景动态网页设计教程——美工与技术将文字放在圆框或方框中也是一种比较简单的设计字体方法。3.2.10边框背景动态网页设计教程——美工与技术3.2.10边框背景动态网页设计教程——美工与技术好丽友好多鱼、蘑古力的设计中采用背景与边框的方式，效果活泼，显得特别突出。3.2.10边框背景动态网页设计教程——美工与技术3.2.11质感纹理动态网页设计教程——美工与技术结合主题，将文字添加质感或纹理，以突出其品质、性能等主题。3.2.11质感纹理动态网页设计教程——美工与技术3.2.12空间立体动态网页设计教程——美工与技术通过立体的文字，形成空间感，应用于主题，可以实现很强的冲击力。3.3网页文字设计的技术在网页设计中准确的选择字体，是每个设计师首先要考虑的问题。字体的最大特点就是每种字体给人带来不同的情感和风格属性。字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。网页里的正文部分是由许多单个文字经过编排组成的群体，我们要充分发挥这个群体形状在界面整体布局中的作用。理解不同编排形式有助于我们进行网页文字的灵活编排。动态网页设计教程——美工与技术3.3.1文字字体与大小1.字体的选择从加强平台无关性的角度来考虑，正文内容最好采用默认字体。因为浏览器是用本地机器上的字库显示页面内容。网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而我们指定的其他字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。正文建议用宋体另外从平台无关性方面考虑，应该提供文字大小的设置，要对浏览器文字大小的设置进行考虑，一般情况为了实现不同用户设置下文字大小的一致性，一般采用CSS样式进行网页字体编排，同时提供字号更改的选择。动态网页设计教程——美工与技术3.3.1文字字体与大小1.字体的选择动态网页设计教程——美工与技术3.3.1文字字体与大小2.特殊字体应用一些网站设计者喜欢使用特殊的字体，虽然可以在网页中使用特殊的字体，但是如果浏览者计算机上没有安装相应的字体，则显示效果无法预料，显示的网页可能非常糟糕。为了避免你所选择的字体在访问者的计算机上不能显示，通常的方法是在的确有必要使用特殊字体的地方，如导航、栏目、标题等地方将文字设计成图像，然后插入页面中。动态网页设计教程——美工与技术3.3.1文字字体与大小2.特殊字体应用动态网页设计教程——美工与技术3.3.1文字字体与大小3.文字图形化在一定的条件下，确实不能用电脑中提供的字体，必须要自己创造。这也是汉字魅力所在的地方。所谓“文字图形化”是为了实现文字的字体效果，将文字笔画做合理的变形搭配，使之产生类似有机或无机图形的趣味，强调字体本身的结构美和笔画美，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体实行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。动态网页设计教程——美工与技术3.3.1文字字体与大小3.文字图形化动态网页设计教程——美工与技术3.3.1文字字体与大小4.文字与图形的叠置在图形上叠加文字，图形就成了背景。文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。文字置于图形上，会产生视觉的杂音，影响文字的可读性，但能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统的平面设计，在网页设计中也被广泛采用。动态网页设计教程——美工与技术3.3.1文字字体与大小4.文字与图形的叠置动态网页设计教程——美工与技术3.3.2文字排版的样式