Code: http://jsfiddle.net/5ktxukj3/
Is there a way to align the visible top part of text to the top of this image?
From inspecting the H1 the element is aligned to the top of the image, but there are blank pixels above the visible end of the text.
In a web enviornment is it possible to align these? Obvously I can add a negative margin but this doesn’t seem to work consistantly across browsers and devices.
Hi,
You can change the line height to match the font-size and that will reduce the space around the characters however you do not have ultimate control about how much space is above and below the glyph itself as all glyphs vary in their ascender and descender height and will vary between system, browser and font type also.
The easiest method is just set the line-height to match the font-size and then apply a small negative top margin.
If you were to colour the background of the line you would see that it does actual start at the top exactly but as mentioned that isn’t the height of the glyphs themselves so they will be inside the line-height.
If you want pixel perfection over the text then I’m afraid you are in the wrong business 
Brill thanks for that Paul, much appreciated!
I’m working with a designer from a print background, I did give a response this pixel perfection is not possible but wasn’t sure if there had been some advancements in this area.
Well, its slightly worse now that we have mobile displays and there is actually less control these days because of the way that text is represented on mobiles and tablets. There’s just so many minor variations on width and height of text that aligning text in respect to something else is never going to be perfect. However, I don’t expect anyone except you and the designer would notice.
Usually its not an issue until a designer comes along
Just remember to use an em negative margin and then the gap will maintain should the text be resized,
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
