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

6顶
1踩

Web前端

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

2012-07-23 14:03 by 见习记者 车丽 评论(4) 有10629人浏览
网页 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张静态图片作为指示。页面的主要功能是选择有舱位的座位。页面中的静态图片通过调整颜色、位置和大小来反映不同类型的飞机和座位。...

  • 基于Qt开发的截图工具- 支持全屏截图， 支持自定义截图，支持捕获窗口截图，支持固定大小窗口截图，颜色拾取，图片编辑

    基于Qt开发的截图工具.zip 截图工具（QScreenShot） Qt编写的一款截图工具。 特点 - 支持全屏截图 - 支持自定义截图 - 支持捕获窗口截图 - 支持固定大小窗口截图 - 颜色拾取 - 图片编辑 - 图片上传到wordpress 环境 Qt6.2 QtCreate 8

  • 毕业设计&课设_ 校园活动管理系统，优化校园活动组织流程，涵盖多方面功能模块的便捷平台.zip

    该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。

  • 毕业设计基于ASP.NET技术的班级展示网站构建(源代码+论文).zip

    基于ASP.NET技术的班级展示网站构建资源，是一套针对教育机构或学生团体，旨在通过ASP.NET框架开发班级风采展示平台的指导资料或教程。此资源详细介绍了如何利用ASP.NET的强大功能，快速搭建一个功能完善、界面友好的在线班级展示平台。 该资源涵盖了从需求分析、数据库设计、前端页面制作到后端逻辑实现的全过程。通过实例演示，指导用户如何设置班级信息、学生风采展示、活动公告、图片上传与浏览等核心功能模块。同时，结合ASP.NET的MVC架构，实现了前后端分离，提高了代码的可维护性和可扩展性。 此外，该资源还提供了丰富的代码示例和注释，帮助开发者深入理解ASP.NET框架的工作原理，掌握如何运用其强大的数据库操作、用户认证与授权等特性。对于初学者来说，这是一份难得的入门教程；而对于有一定经验的开发者，则是一份提升技能的参考资料。 总之，基于ASP.NET技术的班级展示网站构建资源，是教育机构和学生团体实现班级风采在线展示的理想选择，也是开发者学习ASP.NET框架应用的宝贵资源。

Global site tag (gtag.js) - Google Analytics