网页设计字体注意事项
当前位置:贝知网>知识分享>平面设计>网页设计字体注意事项
网页设计字体注意事项
时间:2022-11-08 平面设计

网页设计字体注意事项

网页设计字体注意事项

网页设计中,字体大小的选择是用户体验中的一个重要部分,在制作网页的时候,我们可以根据文字在网页中的不同位置和不同等级来分别使用不同大小的字体。下面介绍网页设计字体注意事项,希望可以帮助到大家。

1、字体的大小

网页设计中,字体大小的选择是用户体验中的一个重要部分,过大过小都会影响用户体验。在制作网页的时候,我们可以根据文字在网页中的不同位置和不同等级来分别使用不同大小的字体。相对来说,内容标题可以使用较大的字体,而内容小标题可以采用次一号的字体,而内容正文则可以采用正常大小的字体。

在CSS中,最常用的描述字体大小的单位有两个,即em和px。通常认为em为相对大小单位,而px为绝对大小单位。但从实际应用中来讲,px像素有时也像是一种相对大小单位。比如,在一块15寸分辨率为800×600像素的屏幕上,10px大小的文字,要比一块10寸分辨率1024×768像素的屏幕上的10px大小的文字显得更大一些。px为像素单位,20px表示20个像素大小,在现在的网页设计中,常被用来表示字体大小,方便且直观。比如12px,14px就是用px作为字体大小,而16px为中等字体,18px为较大字体,12px为偏小字体。em为相对大小单位,它表示的字体大小不固定,根据基础字体大小进行相对大小的处理。浏览器默认的字体大小为16px,如果一段文字指定1em,那么就是代表16px大小,而2em就是32px大小。相对大小单位有很广泛的用途,由于它的相对性,对跨平台跨设备的字体大小处理上很有优势,只是无法直观的看到大小。

2、字体的选择

网页字体的使用一般选择宋体等比较常用的字体。不要出现生僻字体,防止用户因没安装对应字体造成显示错误。windows另外自带了40多种英文字体和5种中文字体。这些字体,你也可以在网页里自由使用和设置。凡是使用windows操作系统的浏览器都可以正确显示这些字体,但在其它操作系统里,如unix则不能完全正确显示。

不同操作系统都有不同的字体系统,但既然是字体,总有一些比较经典老牌的字体共同存在于各个系统中。例如无衬线的Arial字体,它产生的时间比较早,同时价格低廉,所以从早期就被windows操作系统使用,在其他的操作系统中,也会有较好的不同于默认字体的显示效果。

3、特殊字体的设置

如果你需要用一种特殊的字体来体现你的风格,那么特殊字体或艺术字体最好以图片的方式置入网页。需要用这种字体的地方用图片代替,以保证所有人看到的页面是同一效果。

4、字体的颜色

通常来说,文章都是白底黑字,黑色的。所以网页中的文字,通常使用黑色,或者浅灰色,这样更加符合大众的口味。如果不是一些很有创意的设计,请不要随便的使用颜色。

网页设计中,要避免一些特殊颜色,比如蓝色。蓝色代表着网页中的超链接,如果网页中有一段蓝色的文字,会让人误以为是可以点击的超链接。所以这种颜色如无特别必要,要尽量避免。

总之,灵活设计字体的类型、样式、大小和颜色,才能使整个网页中的字体富于变化,给人们以美的享受,我们在网页设计过程中,必须要高度重视。

网页设计中最常用的字体

英文字体

Sans-serif

Helvetica:被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。

Arial: Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常

Lucida Family: Lucida Grande是Mac OS UI的标准字体,属于humanist风格,稍微活泼一点。Mac下的显示要比Win下好。

Verdana:专门为了屏显而设计的字体,humanist风格,在小字号下仍可以清楚显示,但是字体细节缺失严重,最好别做标题。

Tahoma:也是humanist风格,字体和Verdana有点像,但是略窄一些,counter略小,曾经是Windows的标准字体,Mac 10.5之后默认也有安装。

Trebuchet MS:为微软设计的一个humanist风格字体,个人觉得个性太过突出,用得不好会不搭。

Verdana,是一套无衬线字体,由于它在小字上仍有结构清晰端整、阅读辨识容易等高品质的表现,因而在1996年推出后即迅速成为许多领域所爱用的标准字型之一。

Serif

Georgia:基本上适合正文屏显的衬线字体,非Georgia莫属了。笔画粗重,衬线明线,轮廓较大,小字体显示也很清晰,同时细节还算OK。

Times: Times是为了报纸而设计的,特点是可以在有限的空间塞进去更多的文字,笔画较弱,小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文,被骂得很惨之后换成了Georgia。

有些偏艺术类的网站的大字会使用lobster。更艺术的网站就搜索free font,或者font freebie吧,出现的名字格式为“X种免费网页设计字体”的博客文章,都进去看一眼,挑一个就好。

Trebuchet、Georgia、Times New Roman、Arial、Lucida等字体在26px或更大像素时效果是比较好的,非常适合作为正文的标题。

中文字体

中易宋体:Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。

微软雅黑:Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。

华文细黑:Mac下的默认中文。

Droid Sans和衍生的WenQuanYi Microhei:Andriod中的中文,也是Linux绝大多数发行版本的默认中文,,当然也有用WenQuanyi Zenhei的,不过比较少了。

如果是中文字体,设计的时候最好使用微软雅黑。微软雅黑配上h3比较好看。

因为前端工程师在实现网站的时候,能够使用的中文字体局限于一下几种:

宋体、微软雅黑、Lucida Grande(苹果官方网站使用的中文字体)。

为什么?

电脑系统有自带的字体,PS有自带的字体,浏览器也有自带的字体。然而浏览器自带的字体很有限。这又是为什么?英文字体,26个英文字母+数字+符号就可以了。然而中文汉字的数量是非常庞大的。导致文件的体积也很大。

另外前端可以使用@font-face调用一些其他的字体库,弊端是,用户在访问的时候要去下载这个文件,所以会影响整个网站的效率。

如何把握视差滚动网页设计

通过视差滚动技术对网页进行设计,有着多方面的特点。一般的情况之下,网页是由分辨率较高的图像元素进行重新组合而成的,其中,不同颜色和不同组成元素之间的相互交叉,会使得图像呈现出新的面貌。另外,在网页设计之中还应当对视频以及动画等文本形式进行重新设计,以图像为文本的相关内容,并不是对传统文本的摒弃,而是通过对其他文本的内容进行重新融合,形成一个依附于图像文本的次文本形式。

一、视差滚动网页设计特点

通常情况之下的网页设计,一般采用的是单一化的页面排版形式,此种排版的形式舍弃了传统的子网页设计理念,以一种全新的尺寸,来进行页面的重新排版,进而产生出一种强烈的视差滚动设计效果,可以增强页面的艺术性,增强页面设计对于观看者的感染力。

二、视差滚动在网页设计中的应用细节

根据上文针对当前现代化的网页设计工作之中视差滚动相关技术的应用进行综合性的研究,可以明确视差滚动技术操作应用过程当中应当注重的技术原理和技术要点,同时也可以明确视差滚动技术特点。下文将针对技术应用原则进行细致的研究,旨在不断促进现代化网页设计工作的进步与发展,更好的完善基础环节,促进整体设计效益的增强。尽管视差滚动的应用还存在很多弊端,但这丝毫不减观者对此类网页的浏览热情。因为相对于被动接受型的观看方式来说,观者更倾向于互动探索型的观看方式。

首先是平面与立体的相互结合,平面与立体的相互结合,可以形成一种独特的三维和二维空间,而通过视差滚动技术的应用,也可以使得一个全新的三维空间得到展示,形成独特的背景层,另外,将前景层以及贴图层进行重新的设计,则可以成为全新的三维展示空间。在鼠标滚动的同时,也是一种相互独立的整体,在静止之时,则可以形成独立的二维空间结构,与三维空间形成有机的整体,上述特性的相互结合,则可以展现出非常特殊的设计效果,给予独特的视觉体验。总的来讲,在网页的设计之中,视差滚动的应用有着相当重要的应用,实践中还应加强技术的分析和探讨。在今后的工作当中,还应当重点的对视差滚动网页的特点及形成原因进行探讨,以更好的深入研究技术核心点,最终促进视差滚动在网页设计中应用的水准不断提高,为新时期的网页设计工作稳步向前发展作出必要的贡献。

三、结语

视差滚动作为一种新型的、应用在网页设计之中的视觉技术,通过相关技术的应用,可以给观众带来一种独特的视觉触感以及虚幻的感受,可以使得观众从一个全新的角度对网页进行审视,进而提升整个网页设计的艺术性,综上所述,根据对现代化网页设计之中视差滚动相关技术的应用现状以及技术应用过程当中应当注意的几点问题进行细致的探讨,同时对视差滚动的技术原则、技术原理及特点原因等进行了综合性的研究,对视差滚动应用过程当中应当特别注重的问题进行了综合性的探讨,旨在不断促进现代化网页设计工作的发展,促进行业的不断进步及改良。

网页设计中视觉传播的必要性

信息传达是对数据的解析,良好的交流基于信息交换,视觉元素是视觉对象的外观表象,点、线、面、体不仅仅是概念中的元素,也是视觉元素是组成信息的不同单元,通过不同的设计手法出现在不同的载体之上,构成视觉对象的空间、形态、肌理、光色等。

1、网页设计中的视觉信息传达

其中点是一幅图像最基本的形态组成元素,它在视觉信息传递的过程中有提示及引导视线的作用,是图像中最细小的成分,其表达方式按照其原理可以表述为集和散、起和终的含义;在这些元素中,我们最常使用的线条是概念的,通常意义上说视觉元素中的线是点移动的结果,而我们从视觉直观上就能看到,线是有长度的,而且在它本身的属性中,是宽度则很狭小,它在自然形态中并不存在,它可以指示方向及位置,并形成面的边线为面规定范围,借助线条的状态及性质,在网页设计中,我们会发现它可以表现出不同程度的视觉感受,这样,在整个网页布局上,这种性质必须会影响视觉形象的观感。所以在考虑设计中,设计师对线的考虑要注意当很多线在同一方向不断重复,在视觉上就会形成聚集在一起,从而在整个形式中会形成占有一定面积的面。当不同的面在不同的方向并在边缘的位置连在一起,便形成体。

视觉语言是由视觉基本元素和设计原则两部分构成的一套传达意义的规范或符号系统,视觉语言是沟通设计与用户之间的桥梁,视觉语言的语言方式具有多重性。视觉元素作为传达各种信息的符号,使设计发挥它的认知功能,构成了现代设计中的视觉语言,设计师通过视觉语言来传达自己的意图,视觉语言包括造型语言、色彩语言和文字语言等。视觉语言的逻辑与规律受到视觉习惯的制约和影响,人们浏览时的视觉习惯一般是有规律可循的,为了使网页获得最佳的视觉传达效果,设计时由空间的中心位置向四周过渡,确定各种视觉构成元素之间的关系及秩序。

网络媒体的信息传达。信息传达是视觉传达的本质与目的,使讯息让用户接受,也就是译码的过程,视觉信息的识别是接受信息的重要一环,视觉信息的意义,主要是依靠人的视觉经验和联想等心理活动,才能被理解和接受,在整个视觉信息的传达过程中,需要传达者有意识地从接受者那里获取,信息的反馈是整个传达过程的结束,也是下一个阶段的开始。

2、提高网页设计中视觉信息传达有效性

网页设计在遵循基本的设计原则和方法的前提下,要做到网页主题定位明确、鲜明突出,网站内的全部信息在进行完整表达时,必须根据主题进行选择、鉴别和整理。只有全面考虑网页的视觉信息效果,才能吸引对本站点有需求的人的视线,网页结构清晰、层次简洁,使用户明确自己身在何方,网页整体形象统一、风格一致,并通过页面的构图、文字、色彩、图像的运用来实现。使网站整体形象统一,风格一致,网页也是遵循着统一的设计规范完成,加强用户对网站的印象。设计目的明确、形式鲜明,不同内容的网页要用不同的形式来表现。另外,优秀的网站必须与使用者有良好的互动性,它需要一些设计上的技巧与软硬件的支持,提高浏览者接受信息的主动性和参与信息反馈的积极性,加上个人技巧、经验累积,成功有效地传达信息。信息即时、更新及时,避免滥用技术。

随着网页商业化的普及,要巧妙处理效果与速度的矛盾关系,在明确用户要求和期待基础上,在允许的范围内把图像压缩到最小的程度,制作出具有等待价值的网页,速度是网页设计中美学的基本要素,但是强调速度的同时,要正确处理它们之间的矛盾关系;要提高网页中的人文优化,网页的优化工作是由很多方面组成的,信息设计是网页设计的重点,要精心进行构思,让用户都能够理解网站,方便快捷的使用网站,设计全过程都要围绕主题进行展开;综合高效地运用多媒体技术,通过多种技术和设计手段来满足和丰富浏览者提出的更高的要求,不断地创新,以提高网页交互设计的有效性,使产品有效使用并使人愉悦。

另外,随着网络环境和软件环境飞速发展,还要增加体验设计互动性,提高用户的参与性,使得用户体验变得立体化和全方位,可以发挥个性和想象力的空间,更能够充分调动人的参与性,从而更好地实现网页设计中网络文化的传播。