资讯频道 → Web前端
阅读更多

6顶
1踩

Web前端

翻译新闻 10 个改善网页可读性的实用排版技巧

2012-07-23 14:03 by 见习记者 车丽 评论(4) 有10675人浏览
网页 HTML5 CSS 排版
网页的排版问题常常被忽视。这挺遗憾的，如果你能改进你的网页排版，那么设计和可读性也就随之改进。在这篇文章中，介绍了10个非常有用的排版技巧，可以使你的网站看起来更好。

1. 设置正确的行高

最常见的网页排版错误之一绝对是错误的行高。行高用来定义文本行的高度，所以它必须要根据字体大小进行设置。

一般来说，当我设置文本行的高度时我总是再给字体大小增加7个像素的行间距（字体大小为12至15个像素）。 
BODY {
    字体大小：14px;
    行高：21px; / * 14px + 7px * /
}

2. 设置正确的标题间空白

另一个常见的错误是标题周围的空白。标题是与它下面的段落相关联的，它不是两个段落之间的分隔符。这就是为什么一个标题的上边缘空白应该比下边缘的空白宽。

3. 不要使用太多不同的字体

为了保证网页的可读性和专业性，你不应该使用超过3种不同的字体。使用太多的字体会给读者带来困扰，也会使你的页面看起来杂乱。

另一方面，使用更少的字体，使你的页面看起来整洁和易读。你可以让标题使用一种字体，正文使用一种字体，标语和副标题使用另一种字体。

4. 使用等宽字体来显示代码段

如果你是一个开发人员，你可能想把一些代码片段放在你的博客上。如果是这样，请使用等宽字体显示你的代码片段。那么，什么是等宽字体？这个字体的字母和每个字符占有相同数量的水平空间。

那么，在一个网站上应该用什么字体显示代码片段呢？Courier字体是目前最流行的，但是为什么不尝试使用目前最新的字体，如Consolas 或者 Monaco？如果你想选择更多的字体，你一定要看看这里。

5. 注意对比度

如果你的网站排版很好，那么另外一点要考虑的就是对比度。如果你的页面背景是灰色（#999999），那么不要使用深灰色的文本（#333333），否则你的内容可能难以辨认，尤其是老年人或者视力不好的人。

一般来说，如果你的网站是与黑客、黑帽SEO或哥特摇滚等有关，你应该使用浅色背景和深色的字体形成鲜明的对比，增强你的网站的可读性。

6. 保证有划线的文本可以链接

自从我12年前使用互联网开始，浏览器的默认链接格式是一个带下划线的蓝色字体文本。尽管蓝色常常会改变为其他颜色，下划线一直是公认的链接格式。这就是为什么有下划线的文本通常被认为是可以链接的，而不是其他的意思。否则，这将会给你的读者带来很大的困扰。

7. 创建一个样式库

让你的网站给读者带来视觉震撼的一个简单而有效的方法是为特定的用户创建特定的风格。例如，创建.warning CSS类向读者显示警告信息。

8. 标题和文本有层次感

为了提高网页的可读性，给标题、简介、段落和正文创建出层次感是非常重要的，这样你的文章非常形象的呈现给读者，他们会迅速找到感兴趣的部分。

9. 不要担忧页面有空白部分

我所知道的最好的排版建议之一是：“不要害怕页面有空白部分”。它可以使你的页面看上去整洁和专业。很多人都喜欢苹果的网站风格，原因是：网页虽然复杂精细，但页面简单并有大量的空白区域。

10. 使用正确的符号

如果你正在寻找方法改善你的排版，很重要的一点是使用正确的符号。例如，可以使用双引号（“”）来代替角秒符号（""）。或者你也可以试试HTML字符编码 &s;ldquo; „ 。

英文原文：10 useful typography tips to improve your website readability
6
顶
1
踩
评论 共 4 条 请登录后发表评论
4 楼 jAmEs_ 2013-01-09 16:07
3 楼 mfkvfn 2012-07-25 09:12
第一个，行高应该用em吧，比如1.5em。而不应该用21px这样。
2 楼 奥义之舞 2012-07-24 15:33
还可以
1 楼 juedui0769 2012-07-24 01:12
太简洁了。无语

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • HTML5UI横向排列,5个实用的UI排版技巧，让你的作品更细致

    5个实用的UI排版技巧，让你的作品更细致6月 3, 2020发表于: 视觉设计.评论Sponsor在UI设计中，排版同样十分重要，我们如何突出有用信息，处理不必要的元素。这些都需要我们在设计的时候学会调整，一个好的设计风格...

  • 20个改善网站设计的简单技巧

    英文 |https://uxplanet.org/10-easy-tricks-to-improve-your-website-design-part-2-fde7f4ef41cd翻译 ...

  • 20 个改善网站设计的简单技巧

    点击????方“逆锋起笔”，公众号回复视频教程领取大佬们推荐的学习资料英文 |https://uxplanet.org/10-easy-tricks-to-improve-your-webs...

  • 【译】改善 CSS 的 10 个最佳实践

    这是 CSS 的 10 条技巧 —— 可以帮助你从样式中获得最大收益的最佳实践。1. 你真的需要框架吗？首先，确定你是否真的需要使用 CSS 框架。现在有许多轻量级的方法可以替代繁重的框架。通常，你不会使用框架中的每个...

  • 干货：PHP代码20个实用技巧

    在这篇文章中我们将看看一些关于PHP开发有用的提示和技巧，可以用来改善和优化您的PHP代码。 1.不要使用相对路径  常常会看到： 该方法有很多缺点：它首先查找指定的php包含路径，然后查找当前目录，因此会...

  • PHP代码20个实用技巧（转）

    在这篇文章中我们将看看一些关于PHP开发有用的提示和技巧，可以用来改善和优化您的PHP代码。 1.不要使用相对路径 常常会看到： 该方法有很多缺点：它首先查找指定的php包含路径，然后查找当前目录，因此会检查...

  • 如何制作电子邮件而不是一团糟：实用技巧

    测试可能会大大改善这种情况，但是实际上不存在用于测试电子邮件系统的材料。 Mail.ru regularly interacts with its users by email. In our projects, all the components responsible for generating emails and...

  • 20 个新的且值得关注的 Vue 开源项目

    Vue 相对不于 React 的一个优点是它易于理解和学习，且在国内占大多数。咱们可以在 Vue 的帮助下创建任何 Web 应用程序。 因此，时时了解一些新出现又好用的Vue 开源项目也是挺重要，一方面可以帮助咱们更加高效的...

  • Android产品研发（一）-->实用开发规范

    * 编码规范可以改善软件的可读性，可以让程序员尽快而彻底地理解新的代码 * 如果你将源码作为产品发布，就需要确任它是否被很好的打包并且清晰无误，一如你已构建的其它任何产品 1.2 开发规范的作用 * 减少...

  • 谷歌云指南_Google材料设计指南的10个重要要点

    幸运的是，Google提供了一个方便的工具，可帮助您在制定下一个排版指南时节省时间和沮丧的工作-材质类型比例生成器使生成段落，标题，按钮等的字体大小变得非常容易。 6.使用英雄的声音和触觉唤起情感React (6. Use...

  • 【技巧和案例分享】引导页如何设计，才能把用户顺利“引进门”？

    而且，优秀的文案设计之所以“优秀”，除了能够高效传递的产品信息和内容之外，还取决于其视觉呈现方式，例如选用的外在样式和字体排版、背景，甚至文本位置等，所有这些因素都会影响到界面文案的可读性。...

  • 六个从优秀到卓越的网页设计细节

    一般人可能无法解释说明卓越的设计的具体差别，但他们可以找到自己喜欢的网页设计作品。优秀设计和卓越设计之间的区别是比较小的。通过对照一下几个优秀作品，我总结了一下作为卓越设计的几个细节差别。 内容摘要...

  • 掌握SEO核心技巧：深入了解搜索引擎优化

    前端SEO是指通过优化前端代码和内容，提高网页在搜索引擎中的排名和可见性。它包括合理的HTML结构、语义化标签、良好的页面加载速度、响应式设计等方面的优化。通过使用合适的关键字、优化页面标题和描述，以及创建...

  • 网页设计从优秀到卓越的6个细节

    通过对照一下几个优秀作品，我总结了一下作为卓越设计的几个细节差别。 内容摘要 1、合理使用渐变 2、留白 3、网格布局 4、提高字体应用 5、明确而有效的导航 6、设计漂亮、有用的页脚 介绍 优秀设计和...

  • 网页简介

    网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用

  • Designing User Interfaces: Principles and Patterns 本文将涉及的内容范围广泛，包括信息结构、视觉语言、交互性、动效、触感反馈、模拟人机交互等

    4.2 飞机座位选择页面的设计 飞机座位选择页面是一个纵向排列的页面，该页面共有10张静态图片作为指示。页面的主要功能是选择有舱位的座位。页面中的静态图片通过调整颜色、位置和大小来反映不同类型的飞机和座位。...

  • 基于SpringBoot+Vue的“智慧食堂”设计与实现（Java毕业设计，包括源码、数据库、教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：html、javascript、Vue 后台框架：SpringBoot 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html （无前台不需要输入）

  • 历届奥运会奖牌数据（1896-2024年）.xlsx

    本次分享的数据为1896年-2024年（从雅典到巴黎）间奥运会奖牌数据，包括年份、届次、国家地区、名次、金牌、银牌、铜牌等数据，含免费下载链接 ## 一、数据介绍 数据名称：历届奥运会奖牌数据 数据范围：世界各国 样本数量：1877条 数据年份：1896年-2024年 数据说明：包括届次、国家、名次等数据

  • 基于SpringBoot+Vue的实习管理系统（Java毕业设计，包括源码、数据库、教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：html、javascript、Vue 后台框架：SpringBoot 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html （无前台不需要输入）

Global site tag (gtag.js) - Google Analytics