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
James Page
9,621 PointsType, units of measurement and high-res displays
I understand the use of ems over pixels as units of measurement for type, but I'm uncertain about what the effect is on devices with high resolutions (now or in the near future). If type is specified at 1em in a stylesheet, I understand that it will likely display at 16px in a browser. That seems fine for normal resolutions up to 1920*1080 on a 15" display, but what about resolutions that are double that and on similarly-sized displays? Or even the forthcoming 4K displays? How is type meant to scale for those kinds of display?
3 Answers
Andrew Hill
8,934 PointsTo my knowledge this is vaguely touched on in CSS Values and Units when they mentioned the Reference Pixel which differs from the Hardware Pixel.
Think of it this way, 1em = 16 reference pixels, and those 16px will always display "the same" across different screen resolutions due to a new standard for the reference pixel. To my understanding, the only difference to been seen in 4K displays would be in the clarity of the text as the pixel density has been increased.
A great example of this would be the iPhone which has a Hardware Resolution of 640px - 960px but a "Reference Resolution" of 320px - 480px in the browser.
Feel free to read up some more on the reference pixel on W3C website. I am most likely not 100% correct with this answer so anyone else who happens upon this thread please feel free to add or correct what I have said. I too am still learning :)
Rick Rakin
6,531 PointsThough I don't know an answer I was reading up on ultraHD earlier today. The standard will offer 7680x4320 or 3840x2160 at up to 120fps. Moving the content to the screen is going to need use of the ATSC 3.0 standard, which isn't scheduled for release until 2015. So we've got time.
Your question probably is more relevant to now devices like the Google Nexus 10 (2560x1600 resolution on a 10 inch screen). I'd like to know too.
James Page
9,621 PointsThis /sort of/ looks relevant: http://www.teehanlax.com/blog/density-converter/ - although, I'm still a little bit unsure. So along with high resolutions, designers need to contend with increased variations between pixel densities.