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.