By
With responsive web design, the temptation can be to concentrate on the overall layout, and which divs do what as the viewpoint changes, but what about your text?
People have arrived at your site to read what you have to say and if they don’t find it easy or enjoyable they simply won’t stay. If you want your website to be responsive and effective then you really need to know a little about responsive typography.
As with many other web design disciplines you’ll have to deal with browser compatibility issues, and as you venture further, you’ll appreciate the diversity of the issues you need to consider and the refinements that are possible. You can achieve a great deal with CSS only but there are also a few handy jQuery plugins too. It’s time to focus on the typography.
The measure of it
For optimum readability your line length (or measure) should be 45-75 characters. Within sensible limits, select your font and the width it is to occupy. You can then set the font-size of your body text. In this case the size is set to 18px in the root element ‘html’.
001 @import url(http://fonts.googleapis.com/
css?family=Droid+Serif|Quando);
002 * {
003 margin: 0;
004 padding: 0;
005 }
006 html { font-size: 18px;
007 font-family: ‘Droid Serif’, serif;
008 background-color: #e7bb4a;
009 color: #333;
010 }
011
Keep it relative
Using rem units (as in h2 here) enables the relative size of the element to be fixed according to the root element. You might have several dozen rem-sized elements in your document and simply changing the font-size in your html element will automatically change their size.
001 h2 { font-size: 2.8rem;
002 margin-bottom: 15px;
003 font-family: ‘Quando’, serif;
004 color: #a2422a;
005 }
006 p {
007 line-height: 1.45;
008 margin-bottom: 20px;
009 }
010
Manage your widths
Remember that maintaining suitable column widths is essential in achieving good readability. On a desktop screen, if you have only one column of text you’ll need to allow plenty of negative space around the text block to ensure a good user experience. The img element shows an example of using rem units to set a relative size to the bottom margin.
001 #page-wrap {
002 width: 60%;
003 margin: 100px auto;
004 }
005 img {
006 max-width: 90%;
007 margin-bottom: 2rem;
008 box-shadow: 0 0 8px #333333;
009 }
010
Breakpoints
Decide on the breakpoints to use for your site. Using ems means your breakpoints will be respected even if the user changes the text zoom in their browser. At each breakpoint you have the opportunity to tweak the factors that will affect the readability of the text at that screen size.
001 /* ===== == = 20em (320px) = == ===== */
002 @media only screen and (min-width : 20em) {
003 html {font-size: 12px;}
004 #page-wrap { width: 85%; margin: 1rem
auto; }
005 }
006 /* ===== == = 30em (480px) = == ===== */
007 @media only screen and (min-width : 30em) {
008 html {font-size: 14px;}
009 #page-wrap { width: 80%; margin:
1.5rem auto; }
010 }
Subtle and small
On smaller screens the difference between your largest heading and smallest text should be reduced, so you will typically use smaller rem values. You will also tend to use much narrower margins to enable you to make the most of the available screen space.
001 /* ===== == = 37.5em (600px) = == ===== */
002 @media only screen and
(min-width: 37.5em) {
003 html {font-size: 16px;}
004 #page-wrap { width: 75%; margin: 2rem
auto; }
005 }
006 /* ===== == = 48em (768px) = == ===== */
007 @media only screen and (min-width : 48em) {
008 html {font-size: 18px;}
009 #page-wrap { width: 65%; margin: 2.5rem
auto; }
010 }
Large and bold
At larger sizes you’ll really want to make use of impressively sized headings and large margins to give each element its own space.
001 /* ===== == = 56.25em (900px) = == ===== */
002 @media only screen and (min-width :
56.25em) {
003 html {font-size: 20px;}
004 #page-wrap { width: 60%; margin: 3rem
auto; }
005 }
006 /* ===== == = 68.75em (1100px) = == ===== */
007 @media only screen and (min-width :
68.75em) {
008 html {font-size: 22px;}
009 #page-wrap { width: 55%; margin: 3.5rem
auto; }
010 }
011 /* ===== == = 81.25em (1300px) = == ===== */
012 @media only screen and (min-width :
81.25em) {
013 html {font-size: 24px;}
014 #page-wrap { width: 50%; margin: 4rem
auto; }
015 }
016
Width=device-width
Switching to the HTML, you’ll need to set how ‘width’ is handled. This enables you to determine how the page is scaled rather than leaving it to the device to decide. Without this tag, smartphones will tend to ‘zoom out’ in an attempt to show the whole page.
001 <!DOCTYPE html> 002 <html> 003 <head> 004 <title>Responsive Typography</title> 005 <meta charset=”UTF-8” /> 006 <meta name=”viewport” content=”width= device-width, initial-scale=1”> 007 <link rel=”stylesheet” href=”css/style. css”> 008 </head> 009
Using FlowType.js
User experience brand firm Simple Focus developed this plugin to simplify the process of maintaining optimum line length using jQuery and without the need to use media queries. First you’ll need
to link to jQuery and the plugin in the head of your HTML document.
001 <script src=”js/jquery-1.11.0.min.js”> </script> 002 <script src=”js/flowtype.js”></script>
Max mins
After the HTML content you call the FlowType script and set several variables. The minimum and maximum values are the threshold at which the plugin stops resizing text, and the minFont and maxFont the smaller and largest size in pixels that the plugin will use.
001 <script>
002 $(‘body’).flowtype({
003 minimum : 500,
004 maximum : 1200,
005 minFont : 12,
006 maxFont : 40,
007 fontRatio : 45
008 });
009 </script>
Font ratio
Each font is different and the fontRatio variable enables you to tweak the font size to achieve your desired result. Increase the value to make the font smaller, and vice versa. It should go without saying that you need to check how your page looks at different widths.
Media queries again
FlowType does a great job of managing line lengths to optimise readability but it won’t make the other tweaks that you will want to make to reflect the needs of smaller and larger screens. You’ll still want to use smaller margins on tiny screens and larger margins on big ones so a simplified set of media queries can be used.
001 @media only screen and
(min-width : 20em) {
002 #page-wrap { width: 85%; margin: 1em
auto; }}
003 @media only screen and
(min-width : 30em) {
004 #page-wrap { width: 80%; margin: 1.5em
auto; }}
005 @media only screen and
(min-width: 37.5em) {
006 #page-wrap { width: 75%; margin:
2em auto; }}
007 @media only screen and
(min-width : 48em) {
008 #page-wrap { width: 65%; margin:
2.5em auto; }}
009 @media only screen and
(min-width : 56.25em) {
010 #page-wrap { width: 60%; margin:
3em auto; }}
R for root
By default, Flowtype is applied to the body of the page. However, as the heading is set using rem units, the heading will not be re-sized. There are two ways round this. First you can set Flowtype to apply to the root element by changing ‘body’ to ‘html’ towards the bottom of your HTML, or you can use em instead.
001 $(‘html’).flowtype
Compatibility and fallback
For older browsers that do not support rem you will want to include fallback. On the face of it the fallback is simple – just define the size in pixels first. However, that could lead to a lot of manual changes so you might want to explore using LESS or SASS mixins to minimise duplicated code.
001 h1 { font-size: XXpx; font-size:
YYrem; }
Viewport sized typography
Another method, growing in popularity, for creating responsive text makes use of viewport units. Each unit is equivalent to 1% of the viewport width or height. Browser support is currently lower than for rem units but in exchange you get fully fluid text and could probably make do with only two media queries to avoid inappropriately small or large text.
001 h1 {
002 font-size: 5.9vw;
003 }
004 h2 {
005 font-size: 3.0vh;
006 }
007 p {
008 font-size: 2vmin;
009 }
010
FitText.js
Sometimes you might just want help with making your headings work nicely at all sizes. In that case FitText.js might be the best solution for you. Once set up, you simply apply an id for each heading to be sized and when the function is called, pass some optional configuration settings.
001 <h1 id=”fittext1”>Squeeze with FitText
</h1>
002 <h1 id=”fittext2”>Squeeze with FitText
</h1>
003 <h1 id=”fittext3”>Squeeze with FitText
</h1>
004 $(“#fittext1”).fitText();
005 $(“#fittext2”).fitText(1.2);
006 $(“#fittext3”).fitText(1.1, { minFontSize:
‘50px’, maxFontSize: ‘75px’ });
007
A more modern scale
Jason Pamental (bit.ly/LdQ9Ut) has considered the challenges of responsive typography in great detail. To quote Jason, “The problem is, as the screen size shrinks and fewer elements are visible, the relative scale between elements becomes exaggerated. What’s needed is greater subtlety and flexibility to maintain a more balanced proportion and better readability across all experiences.”
Do it online
If you’d like more layout support with a focus on typography, typecast.com provides a suite of online tools to rapidly prototype and test your designs. Not for you? Typecast’s responsive.is adds a utility bar to the top of your page where you can check sites based on five different breakpoints all without having to re-size your browser manually.
