<i>PLEASE</i> do not use this.<p>Yes, the ideal ("most legible") width for a column of text is ~60 characters, no question. But that's <i>only once you've chosen the most legible font size</i>.<p>You're supposed to adjust your column width to fit an appropriate number of characters, not adjust the font size to your column width! Adjusting the font size is completely backwards, and worst of all, <i>it's breaking my browser zoom</i>, so it's terrible for usability.<p>This is a cool demo, but absolutely <i>not</i> something to be used in production. (Sorry to be so negative about it, but the whole project seems based on a misunderstanding of an important design principle.)
I don't know why all the negative comments here. Just because this solution doesn't fit any of your use cases, it doesn't mean it's a bad solution.<p>There was once I worked on a web app, which was supposed to be viewed on viewports as small as a laptop to viewports as big as a four 57" TVs strung together. Back then, I had to come up with something similar to this to make the content of the TVs visible from a distance. This library would have come really handy back then.
The line-height part of this is unnecessary / duplicates css behavior. No need to use px. Just set the line-height to the ratio you want in css.<p><pre><code> p { line-height: 1.45; }
</code></pre>
and you're done.
This is entirely the wrong solution to a problem that doesn't even exist. In actual fact the problem is fonts are too small on my mobile devices so I'm constantly zooming in... why would I want my on screen text to start off a couple of pixels high?<p>Also, the whole notion (and seemingly a sub-trend of responsive design) of page content (fonts/images) scaling to try and maintain structure when the page is resized is naive to the point of being ridiculous.
So on small screens this will make the font even smaller.<p>This is the wrong solutions.<p>There is a reason why 16pt is the standard font-size. And its no problem to design a responsive website with columns that use 'between 45 and 75 characters per line'.
I think this is pretty cool (and I like the slider-demo!), but it's clearly developed for laptops and mobile devices. On a bigger monitor the website is essentially unreadable. A 29px font for the body copy is a bit outrageous.<p>I like the idea, but I don't think fully automatic font scaling is the way to go. Mapping resolution to font size (which is essentially what the Javascript magic does) doesn't work because resolution doesn't mean much anymore. An HD tablet and a 27" monitor have the same resolution but demand completely different text sizes because you sit so much farther away from a desktop monitor.<p>So for the time being I think the best way to go is to create a mostly fluid layout and to write custom CSS for manual adjustments to make sure it looks good on smartphones, tablets, laptops and desktop monitors.
The script can be extremely useful and the concerns raised regarding readability can be overcome using the min and max width. If you adjust line height in conjunction with font-size and font selection, text can be readable from 12pt and up, even at 10pt.
Why this kind of functionality hasn't been part of the HTML standard from day one boggles the mind. There are many good use cases for this. You don't have to use it for everything, btw, even just having it adjust a header could be useful.
> Ideally, the most legible typography contains between 45 and 75 characters per line.<p>The demo impressively shows, that this is not the case for narrow viewports.
However, the idea is great.
Another solution in search of a problem that doesn't exist. If your viewer has a small screen REDUCE YOUR CONTENT. You probably have lots of waffle you don't need anyway. Conversely if they have more screen real estate than brain cells and expand their window to 2000px+ they are stupid. Don't encourage them.
Love it. This is great for some very specific use cases (thinking about wall displays / large dashboards). It is definitely NOT for accessibility or for the bulk of text on most web pages.<p>Not every library / tool has to be universally applicable to be useful.
This would be a nice user script / bookmarklet, but I don't think websites (except for Readability-type apps) will ever need this. Proper responsive design and usability testing are the correct solution, not this... "hack". But since we're at HACKernews after all, cool effort and props for a very comfortable + practical landing page! Kudos!
This is nice, but you'll see some alphabets or words would get wrapped into new lines when the <i>element</i>(.demo-type) is resized. It's a minor but subtle effect.<p>You might want to revisit how the font-size (and line-height) do not always remain in perfect sync to the element-width. What we've here is the ratio of font-size over width-of-the-element. Since font-size doesn't depict width of the font accurately, a percentage change in it doesn't reflect proportionally to revised width of the element(.demo-type). Hope this helps.<p>We call this <i>resolution stationary rendering</i> internally and use it in our product: <a href="https://bubbleideas.com/letters/the-tiger-by-sir-william-blake" rel="nofollow">https://bubbleideas.com/letters/the-tiger-by-sir-william-bla...</a>