Why the font is big for non responsive site?

Question

It's just interesting for me why the font size is big for non-responsive site (with no <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag) on small screens? I want it to be smaller and able to zoom it in.

HTML (just two columns with some text):

<div class="s">
    <div>
        <h2>...</h2>
        <p>..</p>
    </div>
    <div>
        <h2>...</h2>
        <p>...</p>
    </div>
</div>

CSS:

body {
    font: 100%/1.5 Tahoma, Geneva, sans-serif;
}

.s {
    display: flex;
    margin: 50px auto;
    width: 1000px;
}

.s div {
    background: #eee;
    flex: 1 1 100%;
}

Demo is here https://jsfiddle.net/infous/3hjmc9o0/embedded/result/. You can test it with F12,Ctrl+Shift+M (device mode) in Chrome.

Demo #2 https://jsfiddle.net/infous/3hjmc9o0/3/embedded/result/ with some text in <body> that is scalable as I want.

I'd like all the text to be like in the red border above in the image.

The code you provided in that JSfiddle is simply browser standard sizing for headlines and paragraphs. What exactly do you mean with "big"? — Marco Hengstenberg, Aug 19 '15 at 12:27
There are several options for you to choose from. Explaining all of them here would take a bit too long. May be you should have a read for yourself: https://css-tricks.com/viewport-sized-typography/ http://webdesign.tutsplus.com/tutorials/the-lazy-persons-guide-to-responsive-typography--cms-22822 (with example and demo) — Marco Hengstenberg, Aug 19 '15 at 12:32
@MarcoKunz can you check demo #2 https://jsfiddle.net/infous/3hjmc9o0/3/embedded/result/? where there's "Text in body." that is scaled as I wanted. But other text isn't scalable.. — starikovs, Aug 19 '15 at 12:45

score 0 · Accepted Answer · edited May 23 '17 at 12:14

Well, the reason of this effect is because of "Mobile Text Size Adjustment" algorithms, details is here https://drafts.csswg.org/css-size-adjust/. If you don't use responsive mode, browser tries to adjust text in paragraphs, headings etc.

Theoretically, there's text-size-adjust CSS rule to control the behaviour, but it does't work property in browsers.

Fortunately, somebody found out this hack/workaround:

p {
  max-height: 5000em;
}

This max-height disables "Mobile Text Size Adjustment" algorithms, I think. And you'll get all the paragraphs zoomed out, in this example.

AleshaOleg · Answer 2 · 2015-08-19T13:09:28.363

-1

You have fixed width: 1000px and thats why you browser set text in div bigger. Browser should must contain all text in the same width and that's why it make font-size larger. If you set width: 100%, everything would working fine!

.s {
    width: 100%;
}

<div class="s">
    <div>
        <h2>Test one</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ex quis perspiciatis commodi reiciendis tempore autem vel provident alias cupiditate accusamus dolores hic aperiam, blanditiis quia animi, suscipit sunt mollitia.</p>
        Text without &lt;p&gt;
    </div>
    <div>
        <h2>Test two</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ex quis perspiciatis commodi reiciendis tempore autem vel provident alias cupiditate accusamus dolores hic aperiam, blanditiis quia animi, suscipit sunt mollitia.</p>
        Text without &lt;p&gt;
    </div>
</div>

Text in body.

edited Aug 19 '15 at 13:09

answered Aug 19 '15 at 12:29

AleshaOleg

2,171
1
15
29

The site isn't responsive and I don't want to use media queries. It's just interesting for me why in some cases the font size is smaller and in other cases it isn't scaled.. – starikovs Aug 19 '15 at 12:36
BTW, can you look at the demo #2 https://jsfiddle.net/infous/3hjmc9o0/3/embedded/result/ where I have some text in which is scalable as I want. – starikovs Aug 19 '15 at 12:39
@starikovs absolutely same demos, really – AleshaOleg Aug 19 '15 at 12:40
Not really, another one has "Text in body." at the bottom of the page. – starikovs Aug 19 '15 at 12:42
@starikovs yeah, I mean `font-size` same – AleshaOleg Aug 19 '15 at 12:43
@starikovs ahh, understood you. It's because you have fixed width:) For exmaple iPhone 4 have resolution 320px in width, but you set width 1000px and this width must be set by browser. So, you make fixed markup, and test it in mobile. Updated the answer! – AleshaOleg Aug 19 '15 at 13:09
Nope, I don't need 100% of sheet width.. and the font size is still big. Look at https://news.ycombinator.com/news in responsive, the font size is scaled to smaller and you can zoom it in if you what. – starikovs Aug 19 '15 at 13:24
@starikovs I sad you a reason why text so small, if you want make it bigger just make it bigger. – AleshaOleg Aug 19 '15 at 13:28

Why the font is big for non responsive site?

2 Answers2