A Portfolio and blog for Mustafa Kurtuldu

Responsive Type

A jQuery plugin with the Golden Ratio

It seems a lot of dedication to responsiveness has been given to images and with typography ignored some what.

Design is sometimes subjective but we do have some rules that we can abide by; for example with body copy we should never have more than 100 characters per line as readers would find it harder to track the next line of text.

One tool I have used for a while now is the wonderful Golden Ratio Typography Calculator by Chris Pearson which came from an article “Secret Symphony – The Ultimate Guide to Readable Web Typography”. Using the Golden Ratio Pearson developed some formulas that allowed us to calculate the recommended type size for our text based on the width of the column it sits in. He also showed us how we could create a scale for the main copy, subtitles, titles, headers and the line-height in-between.

However as the widths of our columns are now responsive we need the font sizes, the scales and line-height to also be responsive. Sadly there is no way to change a font size according to the column the text sits in.

We do have css unit types vh, vw, vmin and vmax which will change the size of any element we choose based on the port width / height. But for type this only works if the text stretches the full screen and if it does this we could break the 100 character rule thus making out text unreadable.

The proposed solution is a jQuery plug-in I have been working on: Responsive-Type which is a prototype that sets the font-size of specific elements according to the width of column. That way we can make the column width responsive and not worry about the font size.

This is still work in progress – but you can see a demo here.

How it works

We pick our column block we want to base the font size on;

$("#container").ResponsiveType();

The first part of it is the selector you want to target. If you want the plug in to choose the font-sizes for you leave as is. If you want specific fonts for some elements then you can do;

$("#container").ResponsiveType({ h1:"10px" });

The current tags that can be specifically targeted are;

h1
     h2
     h3
     h4
     p

If you want a over all default size to be added simply add;

default:true

TODO


A min and max size as I can see that would be useful.