Note that there are some explanatory texts on larger screens.

plurals
  1. POBottom of custom font cut off in Opera and webkit
    primarykey
    data
    text
    <p>I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.</p> <p>It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: <a href="http://www.google.com/webfonts" rel="nofollow noreferrer">http://www.google.com/webfonts</a></p> <p>It's especially clear for the lower case <code>g</code>.</p> <p>Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?</p> <p><code>line-height</code> and <code>padding</code> for example don't change anything and 20px <code>font-size</code> works fine and at the moment I am using Windows 7.</p> <p><strong>Edit:</strong> By the way, I am aware of a <a href="https://stackoverflow.com/questions/7760193/bottom-few-pixels-of-text-cut-off-help">similar question</a> here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.</p> <p><strong>Edit 2:</strong> <a href="http://www.pe.jeronimodesign.com/it" rel="nofollow noreferrer">An example</a> that at least for now shows the problem (left hand column, under the slideshow, <code>Il Cerca Viaggi</code>).</p> <p><strong>Edit 3:</strong> The problem seems to be limited to Windows although I'm not sure which versions.</p> <p><strong>Edit 4:</strong> I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.</p> <p><img src="https://i.stack.imgur.com/u02o7.png" alt="Chrome 16, Google Webfonts"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload