Is there any way to remove the in-font space before (or after) [sans-serif] text?

Question

See the example code:

span {
  font-size: 150px;
  background: lightgray;
  margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif { font-family: serif; }

<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>

I'm assuming the extra space is "built-in", but is there a way to remove it somehow?

I'm trying to left-align some huge page titles with the much-smaller subtitles underneath.

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself.** NB - **Please don't abuse the code blocks to get around this requirement**. — Paulie_D, Sep 11 '15 at 18:57
Can't you understand you need to post the code in the question and not link JSFiddle? Don't you have the basic sense about it? Yes I am rude, because in spite of the editor having given you an advice, you did a work-around. Seriously, you will never be a good developer. — Praveen Kumar Purushothaman, Sep 11 '15 at 18:59
What you're trying to do is adjust the kerning of the font. This has been asked about before on StackOverflow plenty of times. [Here](http://stackoverflow.com/questions/3848715/adjusting-kerning-in-css) is the most appropriate duplicate I found. — jaunt, Sep 11 '15 at 19:12

score 0 · Answer 1 · answered Sep 11 '15 at 18:27

0

You could add a minus margin-left. See here: https://jsfiddle.net/mna56yf9/5/ But if you're planning on having a background color, you might have to apply it to a wrapping div.

span{
  margin-left: -20px;
}

answered Sep 11 '15 at 18:27

amespower

907
1
11
25

The text sticks out of the background a bit, doesn't it? – yaakov Sep 11 '15 at 18:55
Play with the number. 20px was just for demo. – amespower Sep 11 '15 at 20:19

score 0 · Accepted Answer · answered Sep 11 '15 at 18:56

This has no correct way, because, it is the font that displays that way. Consider the below example:

span {
  font-size: 150px;
  background: lightgray;
  margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif      { font-family: serif; }
.serif2     { font-family: Times; }

<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>
<br>
<span class="serif2">Done</span>

The above image has different layout if it is a serif in my computer. So, it is a trial and error basis and you have to make sure what you are doing is fine in all computers and browsers. The Times font fits perfectly and the serif font has some space. This is why I said it is a trial and error method.

The only hacky solution is to use a negative margin for the content, based on the font and you cannot generalize it.

Is there any way to remove the in-font space before (or after) [sans-serif] text?

2 Answers2