Fluid Font Sizes


I am designing a fluid grid website.

It is a practice and experiment project.

I wonder if there is any good way to have fluid font sizes, to maintain proportions of the presentation throughout screen resolutions.

Naturally, this is not something that would be useful for small screens, thats why it would be good to also be able to set a minimum font-size. On the other hand, it might be just easier to have a separate style for handhelds. Any possibility to achieve fluid font sizes without scripting?

Or should I send a request to w3?

Can’t be done with native CSS or HTML.

Eric Meyer’s S5 does it, resize the browser window and you’ll see the text size change. Uses javascript though.

As Jules said, not unless you use JS. But if you size everything in ems (text and elements), then the font size will always stay in proportion to the layout, so that’s a good CSS option.

EDIT: by “the font size will always stay in proportion to the layout”, I mean that you’ll have the same number of words per line no matter how big or small the page looks.

The other option is to do it as a PDF and set the initial view to “Fit to width” :cool:

PDFs are good like that. But some browsers don’t display the pdf, though, but just download it. The discussion is about web pages. :wink:

It is about web pages, yes, but sometimes the answer to a question is “you’re asking the wrong question” :stuck_out_tongue:

I’m not saying that Alle should use PDFs, I’m saying it’s an alternative to consider given the unusual design requirements and that these cannot easily be resolved in HTML, CSS and Javascript.

Actually I disagree, it is entirely possible to accomplish with CSS if you know how. Had you considered using CSS3 media queries (for example)? You could set some explicit at-rules so that if (for example) the width was 400px, the font size would be 1em, if it was 800px wide, it would be 2em. Granted it wouldn’t scale on a pixel by pixel event (so it may not be as glamorous as with JavaScript) but you could certainly use media queries to scale the text (and the design with it) depending as to what space is available within the browser viewport… and it would validate, work without scripting (plus it’s easy to implement). :slight_smile:

Heh, I saw a demonstration of media queries on steriods at an HTML5 presentation by Anne van Kesteren a while back. He had a combination of some of the new transforms stuff, coupled with background colours and media queries setting widths… so as you played with the browser width, stuff not only moved around the page (for browsers understanding transforms etc), but the pages also “faded” into other colours (I think he used CSS for the fade, otherwise I believe it would be an abrupt change in colour). I can’t remember what he used that was specifically HTML5 markup for the effect, if any, but the pages were all written in HTML5 (more than just the trendy doctype).

So, yeah, if this page is totally experimental and fun, that’s an option: using media queries and CSS3 for some neat effects. Of course, won’t work in IE. Will not work exactly the same between the rest of the browsers either but will be close enough.

Actually CSS3 media queries (due to the likes of the iPhone) has managed to gain mainstream support pretty effectively, while of course it’ll need to degrade for IE 8 and below, all the other browsers seem to support it without any major differences and IE 9 supports it fully. I would say that it’s worth using purely on the basis that it won’t hurt an already existing design and for mobile devices is the preferred implementation. :slight_smile:

PS: Isn’t Anne Van Kesteren a female (I assumed by the name Anne)… if not I feel really embarrassed because I’ve spoken to them via email in the past :blush:

Heh heh, I’ve seen people corrected on this before. Obviously not a female name in some countries.

Anne is a bit old-fashioned, but you see it now and then for boys. Van Kesteren is definitely a guy : ) He used to have that after his angry Standards Suck guy in the sidebar of his site. After a while, he took it off. You say it “AHnneh”. The last “e” is pronounced.

You can name a girl Anne but more likely she will be Anna or Annike.