中文网页排版设计建议
使用哪种引号
在《标点符号用法》（ GB/T 15834—2011 ）中规定的双引号和单引号分别为 “” 和 ‘’，这组引号起源于西文，且称作国标引号。另外，在《重订标点符号手册》中规定的双引号和单引号（横式）分别为 『』 和 「」，这组引号又被称为直角引号。
需要注意的是，国标引号和直角引号的单引号、双引号使用方式是相反的：国标引号，外层使用双引号，内层嵌套使用单引号；直角引号，外层使用单引号，内层嵌套使用双引号。例如：
他说：“引号的正确用法是‘这样’的。”
他说：「引号的正确用法是『这样』的。」
如果上面的句子在你的浏览器中使用了微软雅黑字体渲染，你会发现国标引号的只有半个汉字宽度，且外形上无法区分左右引号。
几乎在所有的计算机系统中，汉字都被当作等宽字体处理。然而，国标引号在不同的字体中宽度却不一致，甚至在某些字体中，国标的左、右引号以及西文引号在外形上十分相似，用肉眼很难区分。直角引号在各种字体中的宽度都和普通汉字保持一致，在网页中使用直角引号会让排版更加美观。因此，在网页中推荐使用直角引号。
段落首行缩进
段落首行缩进的方式起源于西文排版。以前，由于排版技术限制，段落间距和行距是一样的。段首缩进是为了方便读者区分段落。而在网页中，可以很将段落间距设置得比行距更大。读者可以很容易地将段落区分开。因此，无论是中英文，这种缩进都是没有必要的。
在网页编辑器中，应该明确区分换行和分段。比如，使用 Enter 表示分段，使用Shift+Enter 表示换行；还可以在每个段落的末尾显示段落符号（ ¶ ）来明确段落的结束位置。禁止在段首手动输入全角空格或英文空格来实现缩进。即使要在排版中使用段落首行缩进，也应该通过 CSS 的 text-indent 来实现。
中英文混排
当中文排版中出现英文（或其他使用空格分隔的书写系统文字）时，汉字和英文字母之间应该保留一个空格的间隙，英文区块中仍使用英文的标点符号。特别地，对于出现在中英文交界处的标点符号应采用「亲近原则」：如果标点亲近中文，则使用中文标点；如果标点亲近英文，则使用英文标点。此外，中文标点和英文字符之间也应该保留一个空格的间隙。比如下面的例子：
爱因斯坦曾说过：「 The state is made for man, not man for the state. 」
句子中的双引号显然亲近中文，所以使用中文直角引号；而英文句子末尾的句号显然亲近英文，所以使用英文句号。
字体选择
英文字体可以分为衬线字体（ Serif ）和非衬线字体（ Sans-Serif ）两种。类似的，中文印刷体也可以分成宋体和黑体两大类。宋体也称作明体或明朝体，该字体横细竖粗，笔画末端有装饰衬线。仿宋体、细明体都可以视作宋体。黑体笔画粗细均匀，无装饰衬线。圆体、微软 Gothic 都属于黑体。
当分辨率不足或者字体过小时，宋体会变形，不易辨认。因此在计算机系统中通常使用黑体作为默认字体。不过宋体给人一种在阅读印刷物的亲切感，这种阅读体验是黑体所无法给予的。如果要在网页中使用宋体，必须保证字体大小足够。此外，Windows 内置的宋体和仿宋体字形都不太美观，建议使用 Web Font 技术在网页中嵌入开源的思源宋体。下面的代码展示了如何在网页中嵌入思源宋体：
HTML<style>
@font-face {
font-family: "思源宋体";
src: url("./fonts/clipped.woff2") format("woff2"),
url("./fonts/clipped.woff") format("woff"),
url("./fonts/clipped.ttf") format("truetype"),
url("./fonts/clipped.otf") format("opentype"),
url("./fonts/clipped.eot") format("embedded-opentype");
}
</style>
<style>
.serif-cn {
font-size: 22px;
font-family: "思源宋体";
writing-mode: vertical-rl;
}
</style>
<p class="serif-cn">
梦江南<br>
昏鸦尽<br>
小立恨因谁<br>
急雪乍翻香阁絮<br>
轻风吹到胆瓶梅<br>
心字已成灰
</p>效果如下：
梦江南
昏鸦尽
小立恨因谁
急雪乍翻香阁絮
轻风吹到胆瓶梅
心字已成灰
由于中文字体文件很大，在网页中加载耗时耗流量，用户体验会很差。上例中使用了裁剪字体的方法，字体文件中只保留了用到的字形，因此字体文件很小，仅在 10KB 左右。还有一种方法是利用 Web Font 的 unicode-range 特性，将单个字体文件切割成多份小文件逐个加载。优点是小尺寸的字体文件会被浏览器缓存，下次打开网页时渲染速度会很快，缺点是第一次打开页面时，由于字体文件是逐个加载的，同一瞬间网页上的文字会字体不一致，加载字体还会导致页面抖动。这个网站便使用了第二种方式，大家可以体验一下这个过程。
除此之外，网页中偶尔也会使用楷体。然而楷体属于书写体，在屏幕上显示的效果并不是很好。通常作为标题使用，而不应在网页中大范围使用。
章节标题
在网页中可以使用 <h1> 到 <h6> 来表示六个等级的章节标题。一般来说，在同一个网页中只能存在一个一级标题，用来表示该网页的标题，正文章节标题从 <h2> 开始。但在某些特殊情况下，也可以出现多个一级标题。比如，同一个网页中包含了多篇文章，那么每篇文章的标题都可以作为一级标题。
在浏览器默认样式下，六个等级的标题的字体大小依次递减。然而，当排版到第四、第五等级的标题时，已经很难通过字体大小来区分标题的等级了。一种方案是给每个标题加上编号，但是对于不支持自动编号的编辑器，手动添加编号过于繁琐，且容易出错。另一种方案是用不同的标记把不同的等级的标题区分开。
首先，排除使用缩进来标识标题等级，因为层次不齐的标题实在有碍观瞻。其次，排除用数字来表示标识标题等级，会和标题编号混淆，给读者造成困扰。本站使用上下划线的方式来标识不同等级的标题：二级标题无上下划线、三级标题一道下划线、四级标题两道下划线、五级标题两道下划线加一道上划线、六级标题两道下划线加两道上划线。
H3 三级标题
H4 四级标题
H5 五级标题
H6 六级标题
行宽
如果一行文本字数过多，容易造成阅读时串行；如果一行文本字数过少，会因频繁换行而打断阅读的连续性。根据本人的体验，每行文字数量控制在 30 至 60 字会有比较好的阅读体验。不过这只是一个经验数字，并没有任何统计数据支持。具体可视情况而定，但是不可忽略行宽这一影响阅读体验的重要因素。