现代网站的网络排版最佳实践

响应式网络排版指南,涵盖所有最佳做法 & 字体样式大小规则,以确保您的网站内容可读 & 看到的喜悦.


排版最佳实践

画家有画笔。雕刻家有他们的黏土。网页设计师有他们的字体吗?正如奥利弗·里奇斯坦(Oliver Richenstein)现在 着名的:“网络上95%的信息都是书面语言。”在仔细考虑了网站的自定义图形,图标,漂亮的菜单和简洁的界面之后,然后掩盖了网络排版的重要组成部分是一种罪过.

不用担心,您不必成为主要设计师就能制作出流畅而有效的文字。通过遵循一些可靠的准则和原则,您的网络排版将以易于理解和精心设计的方式传达用户的渴望.

建立视觉层次

好的网页排版的最重要目标是创建一个 等级制度 视觉上从一个元素流到另一个元素的内容。正确区分标题,副标题和正文文本,各种字体粗细和样式以及文本块之间有足够的空白都是促进轻松阅读体验的所有因素.

印刷术视觉层次结构示例

建立强壮的身体

您的首要任务是确定网站的主要内容 身体 文字,因为这是您的访客将花费大部分时间阅读的内容。您的目标是创建自然地跨大段落的文字,激发健康的节奏,使您长时间阅读.

  • 正文文本最常见的字体大小是 16像素-或者更好, 1em (稍后会详细介绍).
  • 避免使文本居中对齐,因为两边的不平整边缘会造成视觉上的吸引力。而是设置左右 余量 文本容器的 汽车 达到更理想的效果.
  • 合理的 文字最适合报纸,而不适合网页。流畅布局的性质可能会在单词之间造成无法预测的间距.
  • 选择 低对比度 高字体。字体喜欢 迪多 对于大型标题或大幅面打印来说效果很好,但是粗线和细线之间的高对比度使在网站上以小尺寸阅读变得困难.
  • 要注意 易读性. 在许多无衬线字体中,大写字母“ I”和小写字母“ l”看起来完全相同,这可能会造成不必要的混淆。.
  • 最佳 行高 段落文字的大小介于字体大小的1.25–1.5倍之间。根据您选择的字体进行相应调整.

成功的标题

不管是好是坏,大多数读者可能会略过您页面的 标题 甚至不用担心正文。因此,至关重要的是要吸引他们的注意力,并通过确保您的标题醒目的版式来促使他们进一步阅读.

  • 标题文本的平均字体大小约为 36像素-或者,更好的是, 2.25em (我们要解决这个问题).
  • 注意应始终放在正文之前的标题上。确保标题文本不会因正文中的字体粗细而过大.
  • 确保您的头条新闻符合读者的期望。较大的文本在其子段落之间具有足够的间距表示主题已发生变化,而较小的标题则更接近段落,表明该内容是相关的.
  • 如果您的标题应该换行到下一行,请注意,最佳 行高 标题为 而不是正文.

之间的空间

分隔页面元素的空间说明了彼此之间的关系,这是不可忽视的设计原则。与白色紧密相连的较小标题相比,被白色海洋环绕的主要标题提供了截然不同的上下文(请记住,我们正在构建一个 视觉层次).

通常,最好不要在空白过多的地方犯错,而不要在空白处写错。在现代网络中首选带有大量空白的整洁布局.

排队

想象一下在高分辨率的27英寸显示器上阅读文本的过程,该文本一直延伸到屏幕的两个边缘。仅过了一段,您的眼睛就会疲劳!

重要的是,将正文的每一行限制为一定数量的字符,以使眼睛始终专注于中心点。普遍的共识是,这种神奇的措施 台式机 60–75个字符长. 对于 手机屏幕, 我们希望避免斜视和文字过于简洁的地方,这个数字位于 每行35–40个字符.

小费规模

已经写了很多 关于在“正文”和“标题”字体大小之间进行缩放的主题。如果您的正文文本为1em,那么H2的最佳尺寸是多少?幸运的是,确定正文和H1-H6标题之间最美的比例是许多印刷者已经解码的事情。此外,这些数学比例还必须根据用户的屏幕尺寸进行调整.

设计师Jason Pamental提供 有用的图表 因为他认为这是跨各种媒体设备的最佳字体大小-我倾向于同意他的看法。本质上,即使台式机上理想的H1尺寸可能是机体尺寸的3倍,但在移动屏幕上,这看起来还是过于夸张-因此必须缩小以适应较小的观看区域.

各种媒体设备上的最佳字体大小图表

快速提示: 如何判断自己的视觉层次是否良好? 蹲在屏幕上 直到所有文字变得模糊为止。如果布局显示为无定形斑点,各节之间没有区别,则您的层次结构可能会失败。但是,如果您可以轻松辨别文字,标题之间的分隔,并清楚地知道眼睛应该向何处移动,那么您的状态就很好!

保持文本响应

响应式Web设计是当今必不可少的实践,特别是随着越来越多的人将移动设备用作浏览Internet的主要手段。尽管以百分比而不是像素进行设计已经彻底改变了图像和边距适应流体宽度的方式,但不幸的是,响应式网页排版仍然是一个难以破解的难题.

在多个设备上优化字体大小可能会变得很困难,因为您必须浏览多个媒体查询以将网站上的所有文本作为目标。但是,通过快速调整选择的单位,您将更容易发现适用于任何类型屏幕的正确字体大小.

Ems超过像素

为了简化网站的版式,请放弃像素并开始使用 EMS. 借助EMS,您可以更轻松地了解网站字体大小之间的缩放比例,并且较小的单位比两位数的像素更易于管理。.

更重要的是,对于ems,一切都与父容器有关。如果您设定 行高 将容器的高度调整为1.5em,那么即使您要更改该容器的字体大小,行高也会保持正确的比例。使用像素时,您必须不断调整容器的line-height属性,以使其字体大小的每一次更改都能保持视觉一致性.

这个原则适用于 余量, 填充, 字母间距, 以及您应用于网站文字的大多数其他样式。每次媒体查询时,您都无需为内容填充中的像素做些改动,只需将其初始状态设置为ems,它就会自动按照原始比例进行调整!

使用Ems

首先要做的是设置网站字体大小的基本参考。在你的 样式表, 输入此:

身体 {
字体大小:100%;
}

这将确定您网站内容的相对字体大小,以 1em, 大多数浏览器都将其解释为 16像素. 现在,您所有的航向大小(2.25em,1.5em等)都是基线1em的直接倍数.

重要的提示: Ems是 级联-表示其大小是相对于其父项的既定值而言的。例如:如果您将Body的字体大小设置为1.25em,然后将子容器的字体大小设置为1.25em,则两种字体的大小将不一样!而是,子容器的文本将是原始1.25em父字体大小的1.25倍.

网页排版的更多技巧

以下是一些出色的网络排版技巧:

不要过度

您应该将网站的版式限制为 2–3个字体 最多。通常,这将是用于标题的字体,用于主文本的字体,以及如果需要的话可能是副标题字体。使用过多的字体可能会造成混乱且不集中的布局。您的网站的加载时间也会受到影响,如下所述.

仅嵌入您需要的内容

仅考虑对您的站点最必要的内容,而忽略其余的内容。如果您知道自己需要 定期, 胆大斜体 给定字体的样式,然后仅嵌入这些选择并排除 , 黑色 样式。加载不必要的样式可能会严重影响您网站的资源,因为每种样式都是单独的服务器请求.

如果您不想在设计阶段限制自己的创造力,那就继续吧!只记得在网站上线之前删除多余的样式.

如果您看不懂,请不要使用

这是一个大家伙。虽然花香 手写字体 可能会很想使用它,即使是“ g”或“ y”有一点点困惑,那就不要使用它!对读者来说,最令人沮丧的莫过于努力破解难以辨认的字体.

在“ Lorem Ipsum”上偏爱真实文本

每个设计师都依赖 lorem ipsum 计划项目布局时使用虚拟文本填充空白内容区域。但是,您可能会惊讶于使用实际内容会对版式的外观和感觉产生多大的影响。 “ Lorem ipsum”完全没有情感,而且在智力上是空心的;它没有提供真正的线索来显示您的单词和个性如何通过字体表达。因此,在完成网站设计之前,请尽快将实际内容插入您的网站.

与背景对比

纯白色背景上的深色字体将始终提供最佳的可读性。如今,深色或模糊图像上的白色文字也变得越来越流行。请注意,您的背景不太复杂或太详细,这会压倒前景文本.

文本背景上的文本的错误排版示例使用“文本在文本”背景的不良印刷习惯的示例.

配对字体–喜欢吸引喜欢

将字体与完全不同的个性配对会引起混乱的信号。两者可以在风格上形成对比,但在情感上它们应该传达相同的信息.

字体配对–保留在家庭中

最简单的解决方案通常是最好的。有时最好的配对来自同一字体家族中的变体(粗线,替代粗细,平板).

超连结

常见和预期的做法是 强调 链接并删除悬停事件下划线。在执行此路线时,请确保您强调的文字是斜体或 粗体 而不是强调以避免混淆.

但是,这些天来,锚定文本通常是彩色的,悬停时会应用过渡效果。从设计的角度来看,这无疑是更好的选择,但请记住保持一致!

一些CSS要知道

这会影响字母之间的距离。有助于强调标题.

字母间距:x.xxem;

这会影响单词之间的距离:

字距:x.xxem;

这为大写字母提供了另一种强调方式。缩写也有用.

font-variant:小写;

这将大写您的所有文本.

文本转换:大写;

这将大写文本的第一个字母.

文本转换:大写;

这将在文本上加上删除线.

文字装饰:直行;

这可以改善现代浏览器中字体的显示:

文本渲染:optimizeLegibility

了解字体文件类型

最好嵌入多种文件类型,以确保字体可以在各种浏览器中正确加载。这些是您应该最关心的:

TrueType

TTF是Mac和Windows上最常见的格式,所有主流浏览器都支持TTF。.

OpenType

OTF也得到了广泛的支持,并且无需嵌入单独的字体即可添加小写字母和替代字符等附加组件.

嵌入式开放式

EOT仅受Internet Explorer支持-除非您担心旧版本的IE上的用户,否则最好将它排除在外.

Web开放字体格式

WOFF及其后续产品WOFF2是该镇的新国王。它们在主要浏览器中的支持和压缩能力使其成为现代文件类型的选择.

需要转换文件类型?

您可能会遇到一种情况,即您只有一种字体文件,需要以某种方式将其转换为另一种字体文件。. 字体松鼠Font2Web 提供可以做到这一点的在线工具.

结论

你已经知道了 内容 是您网站上最重要的方面。精心制作的内容值得精心排版。不要用难以阅读或结构混乱的文字使网站访问者失望。通过精心计划的视觉层次结构并遵循印刷最佳实践,您的创意也可以被创造性地呈现。快乐打字!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map