This is exactly what I've been looking for a number of times before but was too stupid to hack together myself. Makes sense to me.
FlowType: font-size and line-height based on element width
21–30 of 55 posts
Re: FlowType: font-size and line-height based on element width
#22> Ideally, the most legible typography contains between 45 and 75 characters per line.
The demo impressively shows, that this is not the case for narrow viewports. However, the idea is great.
Re: FlowType: font-size and line-height based on element width
#23PLEASE do not use this.
Yes, the ideal ("most legible") width for a column of text is ~60 characters, no question. But that's only once you've chosen the most legible font size.
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, it's breaking my browser zoom, so it's terrible for usability.
This is a cool demo, but absolutely not 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.)
Re: FlowType: font-size and line-height based on element width
#24Nice hack, but a accessibility failure. Now the users with poor sight can't increase the font size.
I had to bump the demo site up to about 200% to start to see increases, but was definitely able to increase the text size.
Re: FlowType: font-size and line-height based on element width
#25PLEASE do not use this. Yes, the ideal ("most legible") width for a column of text is ~60 characters, no question. But that's only once you've chosen the most legible font size . 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, it's breaking my browser zoom , so it's…
I commented on this elsewhere, but this didn't break my zoom at all — although I did have to bump it up to around 200% to start seeing increases. You could argue this is inconvenient, but not quite broken.
Re: FlowType: font-size and line-height based on element width
#26I 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. 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…
Agreed, I'm not sure why all the negative comments. Not something you'd use for responsive design, but there's plenty of other use cases
Re: FlowType: font-size and line-height based on element width
#27> Ideally, the most legible typography contains between 45 and 75 characters per line. The demo impressively shows, that this is not the case for narrow viewports. However, the idea is great.
Don't forget it has "Thresholds" param.
Re: FlowType: font-size and line-height based on element width
#28So on small screens this will make the font even smaller. This is the wrong solutions. 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'.
What exactly makes you say 16pt is the standard font size? For instance, the comment threads on HN are at 12px (9pt), and are entirely legible for me.
Not for me on a 1080p 27-inch monitor from a reasonable distance. I have to browse Hacker News at 125%, and Reddit at 110% - although almost all other websites work fine.
Re: FlowType: font-size and line-height based on element width
#29This is nice, but you'll see some alphabets or words would get wrapped into new lines when the element(.demo-type) is resized. It's a minor but subtle effect.
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.
We call this resolution stationary rendering internally and use it in our product: https://bubbleideas.com/letters/the-tiger-by-sir-william-bla...
Re: FlowType: font-size and line-height based on element width
#30> This is difficult to accomplish for all screen widths with only CSS media-queries.
Couldn't you do it with viewport units?