《网站设计 开发 维护 推广 从入门到精通》——1.5 文字与图像版式设计

简介:

本节书摘来自异步社区《网站设计 开发 维护 推广 从入门到精通》一书中的第1章,第1.5节,作者: 何新起 , 娄彦杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5 文字与图像版式设计

文本是人类重要的信息载体和交流工具,网页中的信息也是以文本为主。虽然文字不如图像直观形象,但是却能准确地表达信息的内容和含义。在确定网页的版面布局后,还需要确定文本的样式,如字体、字号和颜色等,还可以将文字图形化。

1.5.1 字体、字号、行距
在网页中,中文默认的标准字体是宋体,英文默认是The New Roman。如果在网页中没有设置任何字体,在浏览器中将以这两种字体显示。

字号大小可以使用磅(pt)或像素(px)来确定。一般网页常用的字号大小为12磅左右。较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。

无论选择什么字体,都要依据网页的总体设想和浏览者的需要。在同一页面中,如果字体种类少,则版面雅致、有稳重感;如果字体种类多,则版面活跃、丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

行距的变化也会对文本的可读性产生很大影响,一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即字用10磅,则行距用12磅。如图1-15所示,行距太小,字体看着很不舒服,而行距适当放大后,字体感觉比较合适。


14db7b4f6412847c3a74a12d2037fd3be3935592

行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位,如line-height:20pt或line-height:150%。
1.5.2 文字的图形化
所谓文字的图形化,即把文字作为图形元素来表现,同时又强化了原有的功能。作为网页设计师,既可以按照常规的方式来设置字体,也可以对字体进行艺术化处理。无论怎样,一切都应该围绕如何更出色地实现设计目标。

将文字图形化,以更富创意的形式表达出深层的设计思想,能够克服网页的单调与平淡,从而打动人心,图1-16所示为图形化的文字。


88b0d5995d0c43086aa6c5dd2f3fa7708e5f8532
相关文章
|
6月前
|
UED
【专栏:交互与用户体验篇】网页中的色彩搭配与配色方案
【4月更文挑战第30天】网页设计中,色彩搭配影响用户体验。了解色彩心理学、搭配原则及配色方案至关重要。色彩能传达信息、影响感知,通过对比与和谐、色彩平衡和层次创造良好视觉效果。单色、类似色、对比色和互补色四种配色方案各有优缺点,需根据目标用户和网页需求选择。恰当的色彩运用能提升美感,增强网页吸引力。
127 5
|
6月前
|
前端开发 JavaScript SEO
学成在线制作【网页布局实战】
学成在线制作【网页布局实战】
103 0
html+css实战65-综合案例4-产品-文字效果
html+css实战65-综合案例4-产品-文字效果
223 0
html+css实战65-综合案例4-产品-文字效果