1

Using the Google font Mr De Haviland, I've noticed that the letters of this font overlap, especially the capital letters. One glyph extends into the next. I'm sure this is intentional, as it create a nice cursive writing effect.

However this also makes parts of the letters extend past the barrier of a div or table cell. How can I make the container contain the entire letter, so they do not extend beyond the div into the margin, or get cut-off. Example

Adding padding is not the answer I'm looking for, because the amount of padding needed appears to vary depending on the letter.

1
  • Upon further research, this behavior is apparently called font kerning, and there is a CSS3 property "font-kerning: none" to prevent it, IF the font supplies kerning information. See caniuse.com/#feat=font-kerning
    – Monospace
    Commented Aug 9, 2017 at 15:55

1 Answer 1

0

You could apply a small amount of padding-left and padding-right to all text containers that use this font, like

h1, h2, h3, h4 {
  padding: 0 0.2em;
}

(Adjust that value to whatever really fits by trying different values in the browser tools)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.