Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

FlowType: font-size and line-height based on element width

simplefocus.com

Post reply on HN
Print view View original

11–20 of 55 posts

Re: FlowType: font-size and line-height based on element width

#11

Post by gizmo »

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.

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.

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.

Re: FlowType: font-size and line-height based on element width

#12

Post by akx »

ohwp wrote: post #7

So 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.

Re: FlowType: font-size and line-height based on element width

#14

Post by MRSallee »

de_dave wrote: post #10

Seems like a reasonable solution until vmin/vmax/vh/vw are more widely supported.

They're pretty well-supported now, I did my blog's entire CSS in vw units.

The only major browser that apparently doesn't support vw is Android stock browser (Chrome on Android does support it). Even my PS Vita browser supports the units.

However, not all CSS styles support viewport units. border-width, a few others. But you can define the doc's font-size in vw (font-size: 1vw;) and then use rem units everywhere to get around those few compatibility issues. (It works.)

Re: FlowType: font-size and line-height based on element width

#16

Post by taf2 »

akx wrote: post #12
ohwp wrote: post #7

So 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.

cmd+ cmd+ cmd+ cmd+ cmd+

oh yeah, you're right 9pt is very readable for me too.

Re: FlowType: font-size and line-height based on element width

#18

Post by felipellrocha »

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.

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.

Re: FlowType: font-size and line-height based on element width

#19

Post by ohwp »

akx wrote: post #12
ohwp wrote: post #7

So 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.

I was referring to the default font size in browsers.

Re: FlowType: font-size and line-height based on element width

#20

Post by ronaldx »

akx wrote: post #12
ohwp wrote: post #7

So 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.

Great for you! I am reading this comment at 16pt.
Post reply on HN