术语x-height是指给定字体中,任何给定尺寸下小写字母x的高度。 它提供了一种描述任意字体一般比例的方法。

在印刷中,x-height是一行文字的基线与小写字母(即不包括上升笔画或下降笔画)的主体顶部之间的距离。x-height更精准的定义是基准线(baseline)与字体中小写字母的中线(mean line)之间的距离。这是字体中字母x的高度(术语的来源),也是字母v,w和z的高度。 (由于过冲[overshoot],弧形的字母,例如a,c,e,m,n,o,r,s和u倾向于略微超过x高度。) 作为字体最重要的尺寸之一,x-height用于定义小写字母与大写字母的相对高度。 x高度是字体识别性和可读性的一个因素。

在网页设计中使用

在计算机技术中,x-height的一种使用方式是作为网页中的度量单位。 在CSS和LaTeX中,x-height称为ex。 但是,在对象的尺寸标注中使用ex比在跨浏览器中使用em更加不稳定。 例如,Internet Explorer中计算ex尺寸正好为em的一半,而Mozilla Firefox计算ex的尺寸更接近字体的实际x-height,并相对于字体的当前像素高度进行了四舍五入。因此,如果确定的值四舍五入到最接近的整数,那么ex与em的确切比率也可以根据浏览器的字体大小而变化。 例如,浏览器在10像素高的字体上计算x-height的45%时,可以舍入为4像素或5像素,或者将其保留为4.5像素。

磅值有别于x-Height

字体的磅值基本上是对字体总体高度的度量,即从基线上方最高字符的顶部到基线下方最长下降笔画的高度。 但是,由于所有阅读的拉丁字母中,超过95%是小写字母,并且比例因字体而异,因此它们的x-height是影响文字清晰度和可读性的重要因素。 它提供了一种非常实用的方法来对读取的绝大多数字符的大小进行分类。

x-height

看起来相似的字体实际上可能具有非常不同的x-height比例。 例如,Gill Sans字体族的小写字母明显小于ITC Avant Garde Gothic字体族的小写字母。 Plantin字体系列中的小写字母被认为具有相对较高的x高度,而Bernhard Modern系列中的小写字母通常被认为很小。

大号x-height

大号x-height(font-size:large;)通常会使字体在任何给定的大小下都更加可见。 因此,用非常大的小写字符的显示,传达清晰和强调的信息。 包含大号x-height的文本字体通常这样做是为了提高易读行和可读性。 Spartan Classified字体设计的字体非常小巧,其x-height比使用Futura字体大得多,该字体用于普通的字体磅数范围内的文本撰写。

x-height因字体而异

小号x-height

尽管在某些情况下大号的字母可能是可取的,但较大的字母并不总是更好。 这种可见性通常是有代价的。 随着x高度的增加,字母的上升笔画和下降笔画的长度减小。 极端地说,这会降低字母的可读性。 由于这个原因,例如,像Antique Olive这样的字体很难以小尺寸阅读。

Antique Olive(左)和Gill Sans(右)设为solid。

大号x-height的字体也比小号x-height字体占用更多的空间。 例如,在任何给定的度量标准下,使用Perpetua这样的字体可以比使用ITC Legacy Serif这样的字体多节省10%的空间。 需要考虑的重要结果是,将书本或广告文案的长度增加10%,将其缩小至适合页面的10%。

ITC Legacy Serif (左) 比Perpetua (右)占用更多空间

小号x-height的字体也可以通过其他方式节省空间。 如果将复制行设置为没有额外的行距,则x-height较短的字体的上升笔画和下降笔画呈比例增长,并且将在该类型的行之间形成更大空白的错觉。

与大多数排版设计一样,关于选择具有各种x-height的字体的固定规则很少。 在任何给定情况下选择x-height合适的字体时,考虑到听众,阅读环境和排版设计应用始终是一个合适的起点。

参考资料:

http://wikipedia.moesalih.com/X-height

https://typedecon.com/blogs/type-glossary/x-height/

https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/x-height

X-Height的更多相关文章

  1. [PyData] 03 - Data Representation

    Ref: http://blog.csdn.net/u013534498/article/details/51399035 如何在Python中实现这五类强大的概率分布 考虑下在mgrid上画二维概率 ...

  2. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

  3. height:100% 布局

    常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...

  4. 页面width与height使用百分比来划分不起作用解决办法--记录六

    有时候你写 <div style="width:80%;height:100%;border:1px solid red"></div> <div s ...

  5. Canvas的width,height 和 样式中Canvas的width,height

    控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...

  6. Canvas设置width与height 的问题!

    最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...

  7. [LeetCode] Queue Reconstruction by Height 根据高度重建队列

    Suppose you have a random list of people standing in a queue. Each person is described by a pair of ...

  8. [LeetCode] Minimum Height Trees 最小高度树

    For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...

  9. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  10. document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度

    背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确 ...

随机推荐

  1. oracle 11g linux 导入中文字符乱码问题解决

    1. 涉及的字符集 这个可以分成三块,数据库服务器字符集(server).实例字符集(instance), 会话字符集(session) 2. 乱码的原因 session 的字符集和 server 的 ...

  2. nginx安全:配置ssl证书(https证书)

    一,配置https证书的意义 https协议是由SSL+http协议构建的安全协议,支持加密传输和身份认证, 安全性比http要更好,因为数据的加密传输,更能保证数据的安全性和完整性 例如:不使用ht ...

  3. centos8平台使用pidstat监控cpu/内存/io

    一,安装pidstat: 1,安装 [root@localhost yum.repos.d]# yum install sysstat 2,查看版本: [root@localhost ~]# pids ...

  4. centos 开机启动服务 systemctl

    systemctl 实现开机自启服务 转载起一个好听的名字 最后发布于2018-06-26 13:49:06 阅读数 13473  收藏 展开 systemctl是RHEL 7 的服务管理工具中主要的 ...

  5. JavaScript数字与字母相互转换

    数字 转换为 字母: const num = 'a'.charCodeAt() // num = 97 字母 转换为 数字: var str = String.fromCharCode(97) // ...

  6. Linux终端 terminal

    终端 一个可以进行人机交互的界面 物理终端 设备终端:键盘.鼠标.显示器 终端类型 控制台终端: /dev/console 串行终端:/dev/ttyS# 虚拟终端:tty:teletypewrite ...

  7. 一口气看完45个寄存器,CPU核心技术大揭秘

    序言 前段时间,我连续写了十来篇CPU底层系列技术故事文章,有不少读者私信我让我写一下CPU的寄存器. 寄存器这个太多太复杂,不适合写故事,拖了很久,总算是写完了,这篇文章就来详细聊聊x86/x64架 ...

  8. codeforces#426(div1) B - The Bakery (线段树 + dp)

    B. The Bakery   Some time ago Slastyona the Sweetmaid decided to open her own bakery! She bought req ...

  9. 攻防世界-mfw

    打开题目,让我们看看about这个链接是什么,我们看到了这个 他说他写这个站点用了git.php.bootstrap这很容易就能让我们想到,git源码泄露,这我们直接掏出githack, python ...

  10. 使用Volley获取验证码

    时间紧张,直接上代码 public class MainActivity extends AppCompatActivity { private RequestQueue queues ; Strin ...