Advertisement

Help with CSS and fonts

Started by May 28, 2015 12:55 AM
3 comments, last by Sik_the_hedgehog 9 years, 8 months ago

And this is when I wish we had a web design forum ?????

Trying to test some new fonts I'm designing by rendering them into a page, but I have a problem. Using them as-is, I get some more gap than needed since line-height is not 1em by default, alright. But using 1em doesn't work either, because there's some extra spacing above the ascent that isn't taken into account as part of the em calculation. Highlighting the text does show that the browser sees this extra spacing properly (the highlight covers the exact spacing I want), however, so the font definitely has the correct configuration.

Here's the question: is there a reliable way to get the line height to match exactly the font's height (full height, not just 1em) or do I have to specify this manually for every font?

EDIT: oh and before I forget, the kind of people who'd be more likely to look at that stuff are also most likely going to have their browsers up to date or nearly up to date, so if it's something that relies on new CSS features it's usually OK (as long as it doesn't require enabling some setting in about:config or something like that).

Don't pay much attention to "the hedgehog" in my nick, it's just because "Sik" was already taken =/ By the way, Sik is pronounced like seek, not like sick.

I mess with CSS a bit and I can't think of anything that would set the font size automatically. Since the line height is separate from font family, you would have to set the font size/line height every time you set the font anyway, unless all your fonts used the same line height.

Advertisement


And this is when I wish we had a web design forum ?????

Which begs the question: wouldn't you be better asking this on a web design forum? Maybe on Stack Overflow?

if you think programming is like sex, you probably haven't done much of either.-------------- - capn_midnight
Are you looking to fix the font itself or just how it's rendered on the page? If the former, adjust the font metrics as shown here: https://developer.apple.com/library/mac/documentation/TextFonts/Conceptual/CocoaTextArchitecture/Art/glyph_metrics_2x.png. Disclaimer: I've never built a font before.
Otherwise, adjust the line-spacing property as needed.

The latter :/ It seems there's no way to make the browser use any property from the font besides the em height anyway.


Which begs the question: wouldn't you be better asking this on a web design forum? Maybe on Stack Overflow?

I don't feel like creating new accounts just for a single question, especially when I know I'm likely to find an answer in one of the places I'm already around (this is a forum full of tech people, somebody should know at least something).

Don't pay much attention to "the hedgehog" in my nick, it's just because "Sik" was already taken =/ By the way, Sik is pronounced like seek, not like sick.

This topic is closed to new replies.

Advertisement