jQuery.FontResize

What is it

This plugin calculates dynamic font sizes according to actual window width. When the user changes the window size or rotates the device, all font sizes will be recalculated, so there's good chance that your webpage will look similar way in different sizes.

We can't promise that text flow will be the very same, but there will be no major changes in text wrapping - the amount of text reflow depends on text characteristics, and font type used. For example, this paragraph is always fits in 3 lines.

Typical use case is documentations, just like this page - let's try it, resize the window!

How to use

Your original CSS font size definitions will be applied at 800px window width, other window sizes occurs font resize. Say, you defined the font for paragraphs as 16px, so when the user stretches the window to 400px width, the paragraph font will be 8px big. That's all.

You may add following lines to the head section of your HTML file:

<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="jquery.fontresize.js"></script>
<script language="javascript">
  $.fontresize();
</script>

Of course, don't include jQuery again, when you already using it.

If you are using other elements, like tables or images, it's recommended to declare relative sizes to them. The hardest part is to choose the original size for images, which will have no problems with stretching.

Issues

There should be problems with nested tags. Explicit size declarations may help.

p > i, p > b {
  font-size: 14px;
}

Caution

This plugin does not replaces responsive web design techniques, it is just a quick-and-dirty way for make documentations look similar on different screen sizes.