跳到主要内容

网络类型的终极指南

在今天的数字时代,排版不再仅仅指白纸上的黑色墨水或其变体。事实上,许多人在网上阅读的时间比从印刷书籍,杂志和报纸上花费的时间要多 - 现在大多数人都可以通过数字方式访问。我们都知道网络上的类型与印刷品有很大不同,但它的不同之处和原因,以及它如何影响网站的设计和观看方式往往被误解。一旦理解了基本原理,它实际上并不像看起来那么复杂。

网络排版的特征

尽管印刷中良好印刷术的基本原则也适用于网络,但这些原则可以而且应该应用的方式各不相同。网络上的类型在外观,行为和应用方面都不同,所有这些都必须被理解,以便创建良好的网络排版,从而形成强大而有效的网络存在。

两种媒介之间的主要区别在于,网络上的类型不是固定的,可预测的和可控制的,因为它是印刷品;相反,基于观看者的操作系统,浏览器,安装的字体和屏幕分辨率,网络上的类型的外观和特征因用户而异。

Web安全字体与Web字体

在最近的开发和可用性之前网络字体,(将在第2部分中讨论),网站上使用的字体必须安装在观众的计算机上才能被所有人查看;如果没有,该字体将默认为用户系统上的其他内容,这可能会产生意外且通常不合需要的结果。

Web安全字体是几乎存在于所有个人计算机上的字体,通常用于Web设计,以便访问者能够以设计者或Web开发人员指定的字体查看内容。即使Web字体越来越流行,Web安全字体仍然是Web上最常用的字体。

这是大多数Mac和PC浏览器中最可靠的Web安全字体列表。

无衬线字体

  • 宋体被认为是最易读的网络安全字体。这款无衬线系列具有高x高,宽舒适和开放字母间距,专门设计为可在屏幕上以小尺寸读取。
  • 投石机MS是另一种无衬线字体,在小尺寸下保持清晰度和可读性。它比Verdana略窄,允许更多的副本适合同一个空间。它的曲线笔划和不寻常的小写'g'赋予它更多个性。
  • 宋体虽然不是专门为网络设计的,但它是一个相当可读的无法在网络上运行良好。它在宽度和间距方面与Helvetica类似,但是通过轻微的字符修改,在帽'R'中最明显。

The differences between all five web-safe fonts can easily be seen in this quotation by Clement Mok

Clement Mok在此引文中很容易看出所有五种网络安全字体之间的差异

衬线

  • 格鲁吉亚是专门为网络设计的,作为Times Roman的替代品。它具有开放的字形和间距,使其清晰,清晰,易于在网上阅读,特别是在较小的尺寸。
  • 英语字体格式一种是专为打印设计的,而不是网页,虽然常用,但在网络上阅读并不是最容易的,特别是在较小的尺寸上。如果您(或您的客户)喜欢时代的外观,请尝试格鲁吉亚。

字体大小

选择字体大小时,请记住,无论您指定的大小,观看者实际看到的内容都会有所不同。即使选择了所谓的“固定”点大小,所看到的也取决于观众的平台和操作系统,浏览器和版本,以及监视器和屏幕分辨率。请注意,默认屏幕分辨率和浏览器字体大小因用户而异,并且可以通过一两次点击轻松更改,使得选择网站的字体大小最多只是一种猜谜游戏。

另一个要考虑的因素是Mac和Windows操作系统可以以不同的方式显示类型。通常,在Windows浏览器上以给定大小显示的类型可能比在Mac上大10-20%,特别是在某些旧版浏览器上。在设计Web时,这是一个重要的考虑因素,在选择字体大小时应该考虑到这一点。再次考虑您的目标受众的受众特征,并相应地进行操作。

列宽/行长

在设计网站时,列宽可以设置为固定宽度(以像素为单位),也可以设置为可变宽度(以百分比表示)。无论您选择哪种方式,都不要使文本列太宽或太窄,这两者都会大大降低可读性。尽量保持每行60到70个字符或350到500个像素的行长,以获得最大的可读性。避免跨越页面总宽度的类型,这也会降低可读性;两列和三列文本网格是一种安全的方法。

对准

坚持向左冲洗(也称为左对齐)以获得大块正在运行的文本,以获得最佳可读性。因为不同类型的大小和缺乏连字通常会导致巨大的文字空间和白色空间的河流,因此避免在网络上进行辩护。虽然合理的设置在一个人的监视器上可能看起来不错,但对于计算机和浏览器以不同大小显示类型的查看器,它可能会发生巨大变化。

Justied type on the web should be avoided, as varying type size and lack of hyphenation often result in huge word spaces and rivers of white space for some viewers. Quote by Kevin Mullet and Darrell Sano

应该避免在网络上使用Justied类型,因为不同类型的大小和缺乏连字通常会导致一些观众的巨大字空间和白色空间的河流。引自Kevin Mullet和Darrell Sano

换行

与打印不同,您无法完全控制线条在网络上运行文本时的中断位置,主要是因为字体大小和样式因用户而异。另一个影响因素是大多数当前浏览器不支持连字(尽管此功能正在进行中)。因此,换行和产生的色板碎布最多是不可预测的。因此,不要像印刷中那样进行手动换行或添加手动连字符来控制抹布,或者某些观看者会收到一些非常短的线条,或者在一条线的中间形成一个连字符 - 我们都是看到了!

颜色

在网上选择颜色的三个最重要的因素是对比度,对比度,对比度。开玩笑说,虽然颜色一致性不像过去那么严重,但它仍然可能因计算机而异,具体取决于观众的平台或设备,浏览器和版本,显示器,校准和颜色配置文件。

为了补偿这种变化,要在类型和背景颜色之间留出足够的对比度,以允许观察者到观察者的颜色变化。对于较小尺寸的较长段落文本尤其如此。不要将小文本从黑色或颜色接近的值中删除,这会使其难以阅读。保持您的调色板最小化,并为最重要的元素保存颜色突发。少即是多了......色彩。

网上智能标点符号

同样可接受的印刷排版约定也应适用于在网上输入。这包括正确使用“智能”报价(也称为印刷工人的或“卷曲”引号)和素数(也称为英寸和英尺),以及en和em破折号。遗憾的是,它们在网络上被广泛忽视,通常是不熟悉正确的排版惯例的开发人员和程序员,或者是那些不知道这些实践可以并且应该被合并到网站中的设计者(包括您自己的博客) !)。

解决此问题的第一步是确保原始副本包含印刷正确的标点符号,以便您和/或程序员知道哪个标点符号位于何处。 (请注意,虽然不是打印的要求,但在网络上的en和em破折号之前和之后添加单词空间是明智的,以允许更多的换行选择。)

在某些情况下,智能引号必须手动编码,而其他情况允许自动转换。不幸的是,有些环境根本不支持使用智能引号,或者使得大规模实施过于繁琐;这些包括一些内容管理系统(通常称为CMS)以及一些电子邮件营销系统,因此请事先仔细研究。

在准备和/或向程序员或开发人员提交副本时(如果不是您),请调出智能标点符号的存在,以便他们能够找到相关站点的最佳解决方案。

在推送之前始终要仔细校对。

The use of

应尽可能避免在网上使用“哑”标点符号

输入图形

图形是大多数网站的主要组成部分,也是显示类型的另一种方式。从类型创建图形允许您完全自由地选择徽标,导航栏,标题或子标题或其他字体特定图像所需的字体。图形允许无限创意,使文本与图像,纹理,图案以及软件可以实现的众多特效相结合。

如果图形太棒了,为什么不用图形图像创建整个网站呢?不幸的是,有些网站只是这样做,但有很多原因导致这不是一个好主意:

  • 大型和/或众多图形加载缓慢;此外,用户的互联网连接越慢,所需的时间越长。
  • 搜索引擎不会将图形识别为具有关键字的内容,因为它们会显示文本,因此全图像网站不会注册任何内容,也不会为查找您网站的查看者搜索。
  • 图形不易编辑,因此更正或更新网站非常耗时。

将图形的使用保存在可以实现最大目标的类型中,并产生最大的影响。并且在将类型转换为图像时,请记住尽可能使用最小的图像文件,同时保持清晰度,清晰度和色彩。

These headers from Mark Simonson's website were created by overlaying his own typefaces on images, and converting to graphics

Mark Simonson网站的这些标题是通过在图像上叠加自己的字体并转换为图形来创建的

排版层次结构

虽然在网络和印刷品上建立良好信息(和印刷)层次结构的概念基于相同的原则,但具体考虑因素和实际执行情况各不相同。第一步是建立内容排版元素的层次结构,即您希望查看者在第一,第二,第三等位置查看的位置。然后按照这些指南来吸引和维护您的受众:

  • 保持最重要的信息高度可见,也许“首屏”,这意味着无需滚动即可查看;对于导航元素尤其如此。
  • 使用类型大小,样式,大小写,位置和颜色来建立和强化层次结构。
  • 使用小标题和其他“分块”技术(例如项目符号列表和锚定大纲)来分解冗长的副本,并将内容组织成小的,易消化的位。
  • 检查用于强调的粗体和斜体的外观(特别是如果您使用的是网络安全字体)以确保它们足够突出,因为它们的外观和重点可能因字体,大小和大小以及监视器和监视器而异。
  • 除了链接之外,不要使用下划线。
  • 避免大量文本的所有上限设置,因为它会降低可读性并使人眼前一亮。
  • 并且不要忘记尽可能多地查看不同大小的显示器,屏幕和设备上的内容。

在网络上进行类型设计需要结合理解介质的技术能力和局限性,以及一些良好的常识 - 设计感,即!永远记住要注意观众的人口统计和需求,并考虑到他们的设计。并且不要忘记网页设计的基本规则,即在Mac和PC以及适用的设备上检查网页在尽可能多的浏览器上的外观。



翻译字数超限