current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 8 down vote favorite
3

Let's say we have the following test.htm:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
.testdiv, .testdivB, .testdivC {
  width: 50%;
  height: 30%;
  margin: 6px;
  border: 2px solid gray;
  font-size: 4em;
}
.testdivB {
  font-size: 12px;
}
.testdivB {
  font-size: 30pt;
}
  </style>
</head>

<body>

  <div class="testdiv">Test one writing</div>
  <div class="testdivB">Test another writing</div>
  <div class="testdivC">Test three writing</div>

</body>
</html>

I've tried testing this in Chromium, with the Developer Tools, which allows me to emulate different devices; here:

* Apple iPhone 4        : device resolution  320 x  480 , a/r 0.666667
* Google Nexus 10       : device resolution  800 x 1280 , a/r 0.625
* Amazon Kindle Fire HDX: device resolution 1600 x 2560 , a/r 0.625

the outcome is this:

chrome-test

In this example, all the devices are portrait, and have "nearly" the same aspect ratio (~ 0.6+), even if they have wildly differing resolutions.

So, in the two first cases, I'm getting approximately the same font sizes, as relative to the device screen size, which is what I want to achieve (even though, I'm confused how can testdivB also show as nearly the same size, when it should be smaller) - so that's all good.

But, in the third example, which is on a device with the largest resolution, testdivB unsurprisingly (as it is defined in px) is much smaller relative to the device screen size; testdivA is also not really surprising, since em is relative to the "computed font-size" of the browser - and that one, if I remember correctly, is also expressed in pixels.

However, I thought that pt would have taken the device screen resolution into account, but it looks like it doesn't:

http://www.w3.org/Style/Examples/007/units.en.html

In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn't seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices.

Ok, so what options do I have, to achieve approximately the same font sizes (as relative to device screen sizes) in all three cases:

  • If I don't want to use JavaScript (only HTML + CSS)?
  • If I do want to use JavaScript (I'd guess there's a way to query for device screen - not viewport - resolution, but I'm not sure if there really is one)?
share|improve this question
1  
I believe a media query would work here with Roberrrt's answer and using a class rather than ID's and using the same class name but different sizes as per Roberrrt's code so you'd end up with something like .responsive_size inside different media queries and font-size: calc(Xem + Xvmin); type of thing. This is just my "2 cents" though. – Fred -ii- 7 hours ago
    
I'm quite curious, did one of my solutions actually help/work :)? – Roberrrt 7 hours ago
    
I'm guessing that last .testdivB in your css should be .testdivC? – Teepeemm 6 hours ago
up vote 17 down vote

I've written a small tutorial / example on how to achieve this with pure HTML/CSS a while ago:

Responsive units (vmin/vmax)

#small {
    font-size: calc(1em + 1vmin);
}

#medium {
    font-size: calc(1em + 2vmin);
}

#large {
    font-size: calc(1em + 3vmin);
}
<div id="small">Small text</div>
<div id="medium">Medium text</div>
<div id="large">Large text</div>

The rule vmin is quite useful in your context. It takes vmin: 1/100th of the smallest side of your screen. Regardless of orientation. Combining it with the basic 1em in a calc() gives us a great way of applying a small custom responsive aspect on the font-size.

Alternative approach (vw/vh)

#small {
    font-size: calc(1em + 1vw);
}

#medium {
    font-size: calc(1em + 2vw);
}

#large {
    font-size: calc(1em + 3vw);
}
<div id="small">Small text</div>
<div id="medium">Medium text</div>
<div id="large">Large text</div>

If you wish to apply more control regarding the actual aspect ratio, I'd advise going with vw over vmin. Viewport width (vw) takes 1/100th of the width of your viewport.

Responsive units based on viewport aspect ratio (both vmin and vmax):

#test1 {
    font-size: calc((.4em + 1vmin) + (.4em + 1vmax));
}

#test2 {
    font-size: calc((.4em + 2vmin) + (.4em + 2vmax));
}

#test3 {
    font-size: calc((.4em + 3vmin) + (.4em + 3vmax));
}
<div id="test1">Small text</div>
<div id="test2">Medium text</div>
<div id="test3">Large text</div>

I'm quite happy with this solution, this way allows us to take both the viewports width, and it's length into account. We divide the base font size in two (.4em in this case) and multiply it with both 1vmin and 1vmax, after that- we add both values to establish the font size.

share|improve this answer
2  
Coincidentally enough, I too was going through a few articles on the same subject some time ago. Just thinking outloud here; wouldn't it also make sense if a class was used instead and then applying it to a media query depending on screen size? Since id's are unique. – Fred -ii- 7 hours ago
1  
I merely used an id for the example here. I once created a media-query based combination of these factors too. I think that should work around, could you show me a fiddle with what you exactly mean? – Roberrrt 7 hours ago
2  
Sorry, I can't provide a fiddle but I'm pretty sure you know what I mean ;-) In the end, I ended up using media queries with different font sizes. @Roberrrt but I definitely will try your method :-) – Fred -ii- 7 hours ago
2  
Combining that would make sense, let me wrap up my own website to test something. – Roberrrt 7 hours ago
2  
@Fred-ii- I usually go for a 20em/40em/80em media query breakpoint, and 'enhance' the basic font size on that, <20em calc(1em + 1vw). <40em calc(1.2em + 1vw). calc(1.5em + 1vw). – Roberrrt 7 hours ago
up vote 1 down vote

Also, you can use % sign. Just like below:

div.wrapper {
   font-size: 28px;
}
div.small {
   font-size: 80%;
}
div.big {
   font-size: 150%;
}
<div class="wrapper">
    <div class="small">Small text</div>
    <div class="normal">Normal text</div>
    <div class="big">Big text</div>
</div>

share|improve this answer
2  
Thanks @nmnsud - but as far as I can tell, the % is relative to the font-size of the parent, and ultimately the root has a "computed font-size" again specified in pixels, so I'd expect again (and that is what I get in Chromium developer tools) that the fonts on a Kindle HDX are smaller (relative to device size) than the other two cases; any way to address that? – sdbbs 7 hours ago
1  
ah! that's my bad. I've updated my answer above. – nmnsud 7 hours ago
1  
Thanks @nmnsud - but I guess I wasn't clear; I meant that even if you specify an amount in pixels as a starting font size, say 28 px, the ratio of it to the screen width for say Nexus 10 (28/800) is always going to be much smaller than the same ratio for a device with larger resolution like Kindle HDX (28/1600), and so you have a smaller relative font size on that device, and that will be propagated throughout all relative units thereafter (%, em, rem...) One could fix this, if one could query the device screen size, but vw, vh only query viewport size. – sdbbs 7 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.