Remove space below the text baseline with CSS

Question

Lately I've been working with Japanese text, and I've found a rather annoying property. In Japanese, unlike English, glyphs do not extend below the text baseline. This example should show what I mean:

div {
  font-size: 72pt;
  display: inline-block;
  text-decoration: underline;
  border: 1px solid red;
  margin: 10px;
  text-align: center;
}

<div lang="ja">日本語</div>
<div lang="en">English</div>

Notice how the "g" in "English" extends below the underline, but none of the characters in 日本語 do. This is typical of Japanese text. Despite this, space is still reserved below the underline, and in fact on my screen the Japanese text reserves more space than the English text does. My question is this:

Is there a way to remove this space with CSS which is reliable across changing fonts and font sizes? I can see at least two possible approaches:

Remove the space below the baseline directly.
Move the baseline to be at the bottom of the containing box.

Juan Ferreras · Accepted Answer · 2016-08-10T15:01:01.937

12

You need to reset the line-height so it's not bigger than 1. The initial value is normal which depends on the User Agent of the browser, on the font-family and on the font-size, but it's some number between 1 and 1.2 in general. Here's more information if you're interested.

div {
  font-size: 72pt;
  display: inline-block;
  text-decoration: underline;
  border: 1px solid red;
  margin: 10px;
  text-align: center;
  line-height: 1;
}

<div lang="ja">日本語</div>
<div lang="en">English</div>

edited Aug 10 '16 at 15:01

answered Aug 10 '16 at 14:51

Juan Ferreras

2,801
2
13
16

Interesting, I didn't realize that the default value for line-height was larger than the font size. – Rose Kunkel Aug 10 '16 at 14:57
@RoseKunkel I think it's the "right" size for the font, but the space typically gets used for descenders (not 100% sure I'm using the term correctly), which this (and presumably other) fonts do not make use of. – Nic Jul 19 '21 at 21:34

andreas · Answer 2 · 2016-08-10T14:57:37.090

Just set the line height to the same size as the font size: line-height: 72pt. This normalizes the space that's taken for the font height. Of course you can take every value for the line height that you like, to adjust that space. More information to line-height at MDN.

div {
  font-size: 72pt;
  line-height: 72pt;
  display: inline-block;
  text-decoration: underline;
  border: 1px solid red;
  margin: 10px;
  text-align: center;
}

<div lang="ja">日本語</div>
<div lang="en">English</div>

Remove space below the text baseline with CSS

2 Answers2

Related