Scale text with a minimum size using pure CSS

Creating a responsive design is best done without unnecessary reliance on toolkits, frameworks and the like, especially where basic formatting can be controlled by CSS instead of JavaScript. The set of tools in CSS3 is of course limited compared to that in JavaScript, but one aspect of responsive design–scaling text–can often by performed satisfactorily in pure CSS.

One part of the puzzle is to scale text smoothly according to the size of the viewport. For this, the oft-overlooked vw unit can work wonders. However, without a min-font-size property available in CSS3, simply scaling to zero wouldn’t work in a wide range of situations, and a pure percentage-based scaling without a foundation might also not scale appropriately. In general, for usability purposes it’s best to use the smallest size of text that satisfies both the readability requirement and relative size requirement at the smallest viewport size, and scale up from there.

Luckily, by using the CSS calc() function, we can supply a floor value for font sizes and scale up from there. This provides a functional equivalent for the missing min-font-size, since the vw-based component of the calculated size can safely go to zero, approaching the limit of the constant base size. Using this approach, one might create some classes to apply standard font sizes as in the following, apply them to heading tags, etc.

Try it for yourself! Note that the linked demo includes a moderate amount of viewport height in the calculation as well, to theoretically better fill a proposed space, and also includes the viewport height in scaling the line height for each font size (again above a safe minimum).

.fontSizeXXSmallScaled { font-size:calc(.8em + 1vw); }
.fontSizeXSmallScaled { font-size:calc(.8em + 1.2vw); }
.fontSizeSmallScaled { font-size:calc(.9em + 1.4vw); }
.fontSizeMediumScaled { font-size:calc(1em + 1.5vw); }
.fontSizeLargeScaled { font-size:calc(1.25em + 1.6vw); }
.fontSizeXLargeScaled { font-size:calc(1.5em + 1.7vw); }
.fontSizeXXLargeScaled { font-size:calc(1.75em + 1.8vw); }

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s