Make font actually match height in pixels

Question

Is there a way to make text in CSS actually match the height I give it?

What I mean is, if you set a font to 14px, it's not actually 14px tall if you measure it. It's more like 10px.

Here is a JSFiddle to illustrate what I'm talking about: https://jsfiddle.net/bbtk986d/2/

Notice how the text doesn't actually touch the edges of the green areas. It's a few pixels off, even though it should be exactly right.

The problem is when trying to follow a style guide (like Google Materials), they say something like 14px, but 14px is actually too small because they mean exactly 14px. I'd love to be able to change how it renders to get it exact so I don't have to tweak every last value.

Fiddle code:

HTML:

<div>
  <span></span>
  <span></span>
  <span></span>
  <p>
    Text
  </p>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <p class="b">
    Text
  </p>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <p class="c">
    Text
  </p>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <p class="d">
    Text
  </p>
</div>

CSS:

div {
  position: relative;
  width: 300px;
  margin-bottom: 10px;
}

span {
  width: 100%;
  background: #FCC;
  height: 20px;
  display: block;
}

span:nth-child(2) {
  background: #CFC;
  height: 40px;
}

p {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .5;
  text-transform: uppercase;
  display: block;
  padding: 0 10px;
  font-size: 40px;
  line-height: 80px;
}

p.b {
  font-family: Arial;
}

p.c {
  font-family: "Comic Sans MS"
}

p.d {
  font-family: monospace;
}

You may take a look at [this](http://i.stack.imgur.com/ntg5f.png) — Peyman Mohamadpour, Jun 08 '16 at 23:30
http://stackoverflow.com/questions/18581657/how-to-deal-with-line-height-while-coding-a-pixel-perfect-design/18582190#18582190 — Krzysztof Kosiński, Jun 08 '16 at 23:36
@Trix Thanks. I knew all of that, but thought that the Google Materials guide was using px height = exact height of glyph, because my buttons looked so much different even though I matched them exactly. However, I went to measure the Google Materials button in Fireworks (where I can create boxes to get exact measures) and realized my buttons matched. My eyes were just playing tricks on me. — samanime, Jun 08 '16 at 23:51
@KrzysztofKosiński Thanks as well. My eyes were just playing tricks on me after all. — samanime, Jun 08 '16 at 23:52

score 0 · Accepted Answer · answered Jun 08 '16 at 23:59

It turns out, it's not possible.

However, the Google Materials style guide doesn't use pixels as exact glyph heights... they're using pixels as pixels. My eyes were just playing tricks on me. I measured the Google Materials button in Fireworks and it turns out that their 14px has an actual glyph height of 10px as well.

Here is the page talking about their buttons: https://material.google.com/components/buttons.html#buttons-button-types

For those interested, here is the CSS for the basic button:

@import url(https://fonts.googleapis.com/css?family=Roboto:500);

.button {
  background: #9CF;
  border-radius: 2px;
  line-height: 36px;
  font-size: 14px;
  display: inline-block;
  text-decoration: none;
  padding: 0 16px;
  text-transform: uppercase;
  font-family: Roboto;
  color: #FFF;
}

https://jsfiddle.net/jzqd56nn/

Make font actually match height in pixels

1 Answers1