网页设计中最基础的字体排版知识，都在这儿了【内附11个最实用的专业设计网

时间：2023-10-03 19:12:01 | 来源：网站运营

时间：2023-10-03 19:12:01 来源：网站运营

网页设计中最基础的字体排版知识，都在这儿了【内附11个最实用的专业设计网站】：随着互联网越来越普及

从事网页设计的设计师也越来越多

对于刚入门的新人而言

如何才能保证自己辛苦设计的网页

符合网页设计的要求呢？

首先对最基本的网页设计规范

要有所认知和了解

【字体的选择】

对于大多数中国人来说

见过最多的字体应该就是黑体和宋体

这两种字体是设计的基础字体

应用在生活的各个场景中

宋体

源于书法体

主要特点是横细竖粗

笔画末端带有三角状装饰

字形端庄有力

常运用在文章正文当中


黑体

字的主要特点是横竖均匀

笔画相对宋体较为粗壮

常用作文章标题，突出而醒目




但在2006年Windows发布Vista系统时

微软雅黑体就已代替宋体

成为了新的系统默认字体

why？


因为宋体是一款衬线字体

受到Windows平台字体渲染技术的限制，在小字号字体渲染方面表现略差，部分字号在显示时会产生锯齿、模糊，而微软雅黑是非衬线字体，笔画丰满、简洁，常用字号的显示效果相比宋体更为优秀同时识别度更高。

因此，从Vista时代起

微软雅黑体就作为Windows的系统默认字体

并被沿用至今

常规、加粗、倾斜字形对比




在网页设计中

为了保证有较好的显示效果

主要标题的字体可使用微软雅黑体

次要标题可选用宋体

微软雅黑体网页显示效果







文章的正文可选用宋体

也可使用微软雅黑体

宋体和微软雅黑体网页显示效果对比




如果网页设计需要展示英文字符

那么Arial、Verdana和Tahoma

这几种系统默认字体是比较推荐的

3种系统默认英文字体







【字号使用规范】




网页设计中一般选用双数字号

字号的大小并没有明确规定

但为了确保正常的阅读效果

可以参考以下参数

在网页设计中最小的字号一般为12像素；
正文常见字号有12像素、14像素和16像素；
标题常见字号有18像素、20像素、26像素和30像素。

由于显示器分辨率的不断提高

12像素的字号

在大分辨率显示器中会显得较小

对用户阅读造成一定的困难

因此12像素的字号使用频率比较低

普遍使用的是14像素或16像素

各个字号下的宋体、微软雅黑体显示效果

虽然两种都是常用字体

但宋体出现的频率并不高

实际运用得更为广泛的

是微软雅黑

因为微软雅黑在设计上

比宋体少了一些装饰性


看起来更显粗壮有力

辨识度上也更高

尤其是小字号的显示效果

视觉感更为清晰与明朗




【网页标题如何设计看起来会比较舒服？】

字体清晰疏阔

字号醒目易读

例如网易新闻

标题样式一般设置为微软雅黑体字体

36像素的字号




腾讯新闻的标题样式

一般设置为微软雅黑体字体

26像素的字号







【段落、行间距规范】

用户在网站上获取信息

主要依赖的就是阅读

因此好的阅读体验非常重要




作为信息展示的主体

漂亮的文字排版

巧妙的留白

都能为整个网页增色不少




文字排版中

段落中“行长”与“对齐方式”的设置

行长主要指段落文字的宽度，一般行越长，行间距越大，否则用户在阅读时很容易串行。在网页正文中，汉字一般以每行显示30~40个字为宜，英文一般以每行显示40~70个字母为宜。

段落对齐方式主要有4种

包括左对齐、右对齐

居中对齐、两端对齐




国内大段文字的设计

一般是根据中国用户的阅读习惯

将对齐方式设置为左对齐

段落中“行间距”的设置

行间距指段落中行与行之间的距离，作为段落中的留白，行间距让字与字之间有了可呼吸的空间。过小的行间距会使页面变得拥挤不堪，增加用户错读的可能性，而过大的行间距则会占用大量的页面空间，缺乏美感。选择适当的行间距不仅可以提升文字的易读性，也可以最大限度地利用好页面空间。

传统中文文档默认行间距一般为1.5倍

在现阶段的网页设计中

汉字一般使用1.8~2倍的行间距。

不同数值的中文行间距




英文段落一般选择1.5倍行间距




【网页设计的标注规范】

网页设计师与前端开发人员的对接关系

往往非常紧密

而设计图的标准化标注

可以提高前端开发人员的工作效率




效果图的标注一般包括以下3个部分

页面中控件的颜色、尺寸、交互效果（如按钮、表单等）。
字体颜色、字号。
页面中各个模块的尺寸和间距。

效果图标注中需特别的4个问题

保证标注的文字清晰易读。
标注所使用的颜色应与背景色区分。
标注应尽量在空白区域，不要对原图造成视觉干扰。
标注信息应条理清楚，同一模块的标注应摆放在同一位置，适当留有间隙，方便开发人员阅读。

某视觉设计稿的效果图标注





标注工具有很多种

MarkMan（马克鳗）

支持Windows和Mac双系统操作

界面简洁，使用简单易操作

非常适合设计初学者使用




MarkMan启动界面







MarkMan操作界面










【专业设计网站推荐】




国内网站




站酷（Zcool）

站酷网是一个人气设计师互动平台

聚集中国大量的专业设计师

包括平面、网页以及插画设计师等

涉及艺术创作、交互设计、影视动漫

时尚文化和广告创意等领域







花瓣

花瓣网是一个类似Pinterest的网站

为用户提供简单的素材采集服务

帮助用户将自己喜欢的图片重新组织和收藏

设计师可以从中寻找设计灵感和设计素材







UI中国

UI中国的前身为 Iconfans

是一个专业的界面交互设计平台

主要为设计师们提供交流学习和作品展示

会员均为职业UI设计师，专业性较强

因此也是UI设计师人才流动的集散地







Uehtml

Uehtml是优艺客

（原韩雪冬网页设计工作室）

旗下的设计师交流平台

专为网页设计和界面设计而生

拥有较多创意精美的网页设计作品







优设
国内比较专业的网页设计师交流学习平台

有许多关于设计师的职业理念

和从业经验的收集与分享

另有好用的设计小插件可供下载




国外网站


Dribbble

面向创作家、艺术工作者、设计师等

是创意类作品分享的平台

提供作品在线服务

供网友在线查看已经完成的作品

或者正在创作的作品的交流网站







Behance


Behance 是一个设计社区

在这里创意设计人士可以展示自己的作品

欣赏别人分享的创意作品

还可以通过评论、关注、站内短信等方式

与这些设计师进行互动







模板下载网站

Freebiesbug

一个免费PSD资源下载平台

包括APP设计、icon设计

Web展示模板、前端代码

以及字体等素材资源







PSD REPO

大量精品PSD源文件下载平台

涵盖目前设计主流方向

如icon、移动端设计、按钮设计等

且均可免费下载







365PSD


有付费和免费两大类资源可供下载

种类繁多，方向划分较为详细

包括建筑、广告、Logo、动物等




MaterialUp

包含iOS、Android、Web等

平台的相关设计资源

各类素材与当下潮流趋势紧密贴合