主Web排版

理解类型 - 并以其应有的尊重对待它 - 绝非易事,但通过对基础知识的深刻理解,可以将您的排版技能提升一个档次,并在网络上创作排版奇迹。基本原理:基本类型解剖在我们开始在网络上掌握类型之前,首先让我们回到基础,然后首先看一下构成字体的内容 - 或者更具体地说,构成每个独特字母的内容。

理解类型 - 并以其应有的尊重对待它 - 绝非易事,但通过对基础知识的深刻理解,可以将您的排版技能提升一个档次,并在网络上创作排版奇迹。

基本原理:基本型解剖学

在我们开始在网络上掌握类型之前,首先让我们回到基础并首先看一下构成字体的内容 - 或者更具体地说,构成每个独特字母的内容。

学习用于描述类型的术语使我们能够以更明智的方式谈论它,并在类型的细微之处表达自己。警告:一旦你开始欣赏这些细节,你将永远无法以同样的方式再次看到一封信!

尺寸

所有字体都不是平等创建的。有些是胖的和宽的,有些是薄而窄的,这种大小的变化意味着以不同类型设置的单词可能占用页面上非常不同的空间量。

每个角色的高度怎么样,称为'x-height'(之所以称它是基于'x'字符)?通常认为具有大x高度的字体在小尺寸时提高了易读性。当然,做得太大,它可以产生相反的效果。

Master web typography: Lost Worlds' fairs

Lost Worlds的展览会旨在展示CSS3功能和WOFF格式。此处显示的页面由Typekit的创意总监Jason Santa Maria设计

牢记这些不一致是很重要的。当配对字体时 - 比如使用不同的面来表示注意区域 - 通常明智的做法是使用那些具有相似x高度的字体。但是我们在网络上遇到了什么问题,我们必须在无法显示理想选择时声明后备字体?在这种情况下,精通类型的网页设计师应该很好地选择他们的武器。

跟踪和字距调整

Kerning描述了调整角色之间空间以创建和谐配对的行为。最明显的例子是大写的'A'与大写'V'相遇:它们的对角线笔划通常被调整,因此'V'的左上角位于'A'的右下方之上。很多人在谈到跟踪时会谈到字距调整;后者是不同的,因为它涉及所有字符的间距,因此均匀地应用。在CSS中,我们使用letter-spacing属性来控制它。

实际上,在目前状态下的网络上,我们对字距调整没有那么多的控制权;为了正确地克制某些字母,我们需要将它们包装在标签中,然后对该区域应用“字母间距”。

领导

在印刷领域,“领先”描述了每一种类型之间的垂直空间,因为在金属排版的时代,使用铅条将它们分开。在CSS中,我们使用术语“行高”,它略有不同:前导是文本行之间的空间量,行高是该值加上文本大小。

像所有事物一样,“理想”的主导价值是主观的,取决于你要实现的目标。但是对于阅读舒适的易读正文,一般规则是使您的领先值大于字体大小;任何地方从1.25到1.5倍。

在将不同类型的块与基线网格对齐时,我们可能遇到这些块包含不同大小的类型的问题。例如,如果pull-quote远大于body类型,我们就不希望匹配pull-quote的前导 - 否则文本将被压缩并且不可读。

相反,我们可以使用增量前导:这个原则说我们应该每隔一行对齐基线(或者每几行 - 它取决于上下文,但想法是通过匹配基线来实现某种平衡)。

测量

术语“度量”描述了文本块的宽度,并且对于寻求在其网站上获得最佳阅读体验的设计者来说,这是一个重要的考虑因素 - 可以在优秀设计和优秀设计之间做出区分。

作为一般规则,Bringhurst继续说,“66字符行(计算字母和空格)被广泛认为是理想的。对于多列工作,更好的平均值是40到50个字符。“但是,这应该根据字体的字符大小计算...

Master web typography: Simon Collison's site

Simon Collison的个人网站为经常被嘲笑的Times New Roman注入新的活力

破折号

如果有一个标点符号和排版区域经常被滥用,那么设计师就会使用连字符,短划线和短划线。像所有这些排版基础知识一样,每个练习都可以命令自己的文章。但为了给您提供尽可能好的概述,以下是基础知识:

连字符号

连字符用于将单词连接在一起(硬连字符)或指示跨行分割的单词(软连字符,无可否认在网络上很少使用)。

冲破

比连字符略长,但只有一半长,短划线通常用于时间(例如:2001-2005)和地点(例如伦敦 - 悉尼)之间。在HTML中,它可以被引用为&endash, - 或 - 。

Em Dash

em破折号可以执行括号的作用 - 表示切线 - 或者当某些东西没有完成时,例如语音被其他人物理中断(例如:“但我认为 - ”)。 em破折号还执行与冒号类似的角色,连接内在链接的句子的两个部分,但重要的是要注意不同的样式指南每个都有自己的约定。在HTML中,它可以被引用为&emdash, - 或 - 。

Master web typography: Dash comparison

破折号不仅仅是破折号。连字符,短划线和短划线之间存在细微差别,知道何时使用每个连字符都很重要

层次结构和规模

我们几乎不考虑网站上的层次结构:标题很大,子标题较小,体型仍然较小。当然,还有更多的尺寸变化。

层次结构告诉我们在哪里看;重要的是什么;如何阅读。为了帮助我们确定如何适当地调整我们的类型,我们有一个滑动尺度,在16世纪形成。

当然,尺寸不是定义印刷层次结构的唯一方法 - 我们可以用颜色,间距和重量来实现 - 但尺寸仍然是最明显的技术。

Master web typography: Kyle Meyer's portfolio

Kyle Meyer的投资组合将标题放在大黑圈中,以表明它们的重要性。其他更微妙的处理也有助于等级,如大写,无法加工的'ROLE'和'YEAR'标题

格式

各种各样的字体格式及其在网络上的支持可能看起来令人困惑,但好消息是我们现在处于一个好位置,对新的WOFF格式的支持越来越多:支持浏览器技术,以及支持类型设计行业的支持。以下是目前使用的各种格式的快速浏览:

TTF

TrueType字体格式可能是最广为人知的,已经使用了很多年。它是用户计算机上安装的字体的标准文件格式之一;另一个是OpenType。

不幸的是,与OpenType一样,格式是不受保护的,因此放在Web上的任何TrueType字体文件都可以轻松下载到用户的计算机上。

OTF

OpenType技术的引入意味着可以在字体文件中存储更多的字形,这在很大程度上取消了对包含连字,小型大写等的单独文件的需求。

与TrueType字体格式一样,代工厂不愿意将OTF格式用于商业Web使用,因为它可能是盗版的,并且它仍然是一种更适合桌面的文件格式。

EOT

微软专有的EOT格式可以防止非法下载,因此对那些热衷于保护其知识产权的代工厂更具吸引力。它还意味着使用此格式从版本4开始在IE中支持@ font-face。与WOFF一样,EOT在技术上是一种包装而不是一种格式。

WOFF

由Jonathan Kew,Tal Leming和Erik van Blokland提出,Web Open字体格式是最有希望的:如果文件是下载的,就像EOT一样,它不能像常规字体一样安装(因为它是一个包装器)对于OpenType字体),但该技术是开放的,基于标准的。与EOT相关的复杂过程相反,文件也相对容易生成。 WOFF正在被标准化为W3C的推荐,并且许多字体传送服务以这种新格式传送字体。它支持Firefox,Chrome,IE9和WebKit的开发版本。

SVG

目前,SVG是我们可以使用的唯一格式,用于在iPhone和iPad的Mobile Safari上运行Web字体。它是相对基础的:不支持字母间距,也不是我们期望从字体文件中获得的基本字距调整信息。与所有尖端技术一样,谨慎使用。

一种字体的解剖

在Mark Boulton的书“网上设计实用指南”中找到的类型解剖图的改编版本

Master web typography: anatomy of a font

  1. 顶尖
  2. 衬线
  3. 顶尖
  4. 计数器
  5. 帽高
  6. X-高度
  7. 底线
  8. 下行线
  9. 马刺
  10. ASCENDER
  11. 交叉开关
  12. 上升高度

有关类型术语的更多信息,请查看什么是排版?发布在我们的姐妹网站上Creative Bloq



翻译字数超限