Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Taro Kawada
Taro Kawada
1,486 Points
Posted by Taro Kawada
Taro Kawada
1,486 Points

Font size different on my macbook pro retina and 1600x900 monitor.

I'm trying to design my own website to learn web design. Things are going fine but the font size difference between 2 screens are frustrating.

On my mbp, a 14px Vollkorn font has a height of 16px. However on the 1600x900, it has a height of 19px. Any solutions?

5 Answers

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

How did you come to this conclusion that they have different pixel values and which programs you are using?

Taro Kawada
Taro Kawada
1,486 Points
Taro Kawada
Taro Kawada
1,486 Points

Hi Riku,

I have border-left on each of the li's for my horizontal menu. In the mbp, the border does not cross the element below the horizontal menu but in the 1600x900 the border seemed to have 'entered' the element below it. Then I used "Inspect Element" in Chrome to check the size of my elements.

Found out it is different. 37.016*16 in the mbp; 37.031*19 in the monitor.

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

That's interesting. And you have same browser version and OS on both displays? Do you use relative or absolute values for the location, size, margins and paddings for this element?

Taro Kawada
Taro Kawada
1,486 Points
Taro Kawada
Taro Kawada
1,486 Points

Same browser version but different oz. One OSx, the other is Win10. I used px to set my paddings and margin but what's killing the 'structure' of my nav is the font size problem. :(.

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

Hi Taro, at least finally I found a reason why Chrome shows different computed height than font-size, it's because of line-height. For example, I have font-size 14px and line-height 18px, computed height will be then 18px. But the difference between your two screens is something that I cannot help you with, couldn't find any reason for that. I suppose you have no zooming active in any of these browser?