排版经验.doc

OM19’sTimeTaobaoUED,专职的交互设计菜鸟和摄影匠Knownas宗羲,老包?TheNightofthecityPraying(1)?八252008字体、排版简明入门(网页设计之字体在页面排版上的完全攻略)欢迎转载,转载请注明出处因鄙人学识薄浅,难免有些纰漏,还望大家给我指出。非常感谢!AnIntroductiontoTypographyViewSlideSharepresentationorUploadyourown.(tags:字体排版)我们每天设计都在与字体打交道。但是我们一直没有认真在意他们的存在。我们没有很好地使用过他们,甚至滥用他们。这一切是因为我们不了解他们。InformationArchitects上大声喊道:95%的网页设计是排版设计(WebDesignis95%Typography)。是的,字体是排版的重要元素之一;字体设计也是设计里最深奥的一门学问之一。那么,我们开始吧:字体的类型英文字体(Typeface),分为几种大类,这是在使用英文字体的时候必须知道的基本知识:一、衬线体(Serif)这里,我们首先要解释什么是衬线。衬线(serif)就是笔画边缘的装饰部分。下图中红色标注的地方就是衬线啦。衬线设计的初衷是为了更清楚地标明笔触的末端,提高辨识率,提高阅读速度。另外,使用衬线字体会让人感觉更加的正统。所以我们常见的英文书籍,特别是论文、小说,很多都是使用衬线体来完成正文的。ia。下图左边是12px的TimesNewRoman字体,ia。在中文里,我们使用的宋体就是对应的衬线字体。二、非衬线体/无衬线体(Sans-serif)字体如果不带衬线的话,那么就称为非衬线体或者无衬线体。下图就是非衬线体啦。网页设计中常用的非衬线体相对就比较多了。有Arial、Verdana、Tahoma、Helivetica、Calibri等。下图从左到右依次是Arial、Verdana、Tahoma:在中文里,我们使用的黑体就是对应的衬线字体。值得注意的是,虽然在书籍中,衬线字体被广泛地应用,但是在互联网上,衬线字体很少被使用。由于电脑屏幕分辨率与书籍不具可比性,所以正文10~12px的衬线字体在电脑屏幕上是很难辨认的。下图是没有Cleartype时,10px的Verdana和10px的TimesNewRoman的对比。大家可以发现,左侧的Verdana可以被很好的辨识。右侧的TimesNewRoman辨认相当困难。三、等宽字体(Monospace)等宽字体事实上只针对西文字体。因为英文字母的宽度各不相同。例如i就要比m窄很多。编程时显示代码,如果字母不等宽那么排版将很难看。我们在DOS命令行中,可以看到使用的是等宽字体。编程要求的等宽字体有如下要求:所有字符等宽;简洁、清晰、规范的字符形体;支持ASCII码为128以上的扩展字符集;空白字符(ASCII:0×20)与其他字符等宽;“1”、“l”和“i”等三个字符易于区分;“0”、“o”和“O”等三个字符易于区分;双引号、单引号的前后部分易于区分,最好是镜像对称的;清晰的标点符号外形,尤其是大括符、圆括符和方括符。常见的等宽字体有Courier,CourierNew四、手写体(Calligraphy)顾名思义,手写体就是手写风格的字体。有时我们也叫它书法字体。中文的书法字体大多都比较生硬。个人更推荐使用日文的书法字体。日文书法字体跟加柔美,更人性。但时使用日文书法字体缺点就是大都都是繁体,另外很多汉字会缺少。五、符号体(Symbol)Windows里最著名的符号体就是Webdings(记得以前还在Windows95的时候蛮爱用的……)。下面是Webdings字体的几个:字体的样式常见的字体的样式分为:正常Normal、粗体Bold、斜体Italic。简单来说,粗体就是字体会更加黑,更加“粗”。斜体就是将字轴微微倾斜。他们都是用于在篇幅内强调某段文字上。在说到粗体的时候,我们很容易联想到CSS里的font-weight(字重)属性。我们知道font-weight(字重)属性值除了我们平常使用的normal,bold外,还有bolder,lighter,100~900等属性。那么这个100~900的值是什么呢?事实上,100~900并没有单位。优秀的字体会对不同的字重提供不同的设计。如果字体事先内置了不同等级的粗细程度的设计,那么这几个数值将分别对应每个等级。例如Zurich字体,就包含了ZurichLight、ZurichRegular、ZurichMedium、ZurichBold、ZurichBlack、ZurichUltraBlack六个字体。这样一来,ZurichLight对应的就是100、200、300三个数值,ZurichRegular对应的就是400也