Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

Archive for the ‘Web Typography’ Category

RWD – Vertical Rhythm Part 2

Posted on: December 15th, 2014 by alemieux No Comments

Last time, we looked at a method using the Golden Ratio to arrive at a vertical rhythm in our designs. This time, we’ll look at a few other methods for arriving at a vertical rhythm.

Typographic Scale

Another method utilizes a Typographic Scale. The Golden Ratio we used last week on modularscale.com, could’ve been replaced with a musical scale, like a Major or Minor third. Finding a scale, we need to use that value for the line height throughout. This consistent value then balances everything on the page.

In this example, our body text is set to 1.063em or 17px. In order to get a comfortable measure, the Line Height was set to 1.25 or 20px. Remember that the Line Height value can be unitless, which is a unique characteristic of this CSS property.

A formula to get to the Typographic Scale in this example, is to multiply the Font Size by the Line Height:

1.063 x 1.25 = 1.32875

We can then round this down to 1.3 and this becomes the Typographic Scale. This value then becomes the unit by which we space everything out on our page. This Typographic Scale can then be subdivided for smaller increments to add to margin or padding values:

3/4 Scale .975
1/2 Scale .65
1/4 Scale .325

Since 1.3 is the scale, we can revisit the Line Height value. In order to define the Line Height with the typographic scale, we divide the Line Height by the Typographic Scale, so 1.25 / 1.3 = 1.223, a slight difference from 1.25, but more accurate to the scale.

Using the scale, we can find the font size and line height of other elements on the page. For example, an H3 on the page needs to be larger than the body font size, but smaller than an H2. To find the font size, multiply the body font size by the scale:

1.063 x 1.3 = 1.382em

To get the line height of the H3, divide the font size with the scale:

1.382 / 1.3 = 0.94

Since this may be too tight, we can use the subdivisions we calculated before and add them to the line height. We could add a half value to the line height, which would be:

0.94 + .65 = 1.59

We still need to do the math to get the line height right, so divide the font size by the scale again to get the line height:

1.59 / 1.3 = 1.22307692

If this is too much space for you, you can try another calculation with another sub-value.

The important takeaway with this method is that once you find the typographic scale, you consistently use it for all of your font size, line height, margin, and padding values. Here’s an example of this method in use:

See the Pen yyYdbj by Al Lemieux (@alemieux) on CodePen.

Base Unit

This method comes from using a baseline grid in print for vertical rhythm and again its central component is the line height. The first thing to do is find a comfortable font size and line measure. In finding the measure, you’ll need to find the proper line height value that offers enough space between lines – not too much and not too little.

Let’s say for example, that we come up with 22px for the line height and 18px is the font size. To utilize this method, we will need to use multiples of the line height value, so to find a better increment, we can use half of 22px which gives us 11px. If our font sizes and line heights are multiples of 11px, our base unit will work to give us the vertical rhythm we’re looking for. Here’s a sample style sheet with this method at work

body { font-size: 18px;
line-height: 22px;
}
h1 { font-size: 66px;
line-height: 66px;
margin-bottom: 22px;
}
h2 { font-size: 44px;
line-height: 44px;
margin-bottom: 22px;
}
p { margin: 22px 0; }

Of course all of this needs to be converted to ems to work and you know that formula already. In order to arrive at the appropriate line height though, we need to take the font size and divide it by the line height. In this case, since the values for font size and line height are identical, they’ll always equal to 1. Why do we do it this way? Our context has changed. We don’t divide by our base font size of 16px, we divide by the font size of the element we’re working on.

You can see an example of this method at work here:

See the Pen Typographic Scale by Al Lemieux (@alemieux) on CodePen.

Summary

This series on Typography has really opened my eyes to design and text treatments everywhere. I find that I’m looking at menus, posters, brochures, and websites with a more critical eye now. I can see where type works and where it doesn’t. I think the genius in these methods is in finding that consistency that works throughout a project that really holds well.

I want to thank Jeremy Osborn, Val Head, Tim Brown, Eric Meyer, and others for hashing out these topics and making them understandable and usable to all. I’m not done with this topic, but for time, we’ll start in on Media Queries.

RWD – Vertical Rhythm – Part 1

Posted on: December 8th, 2014 by alemieux 1 Comment

Last time, we talked about the Em unit as being flexible when the body is set to 100%. Now, we’ll turn our attention to vertical rhythm and the typographic scale.

“Don’t compose without a scale” – Robert Bringhurst1

Typographic Scale

I once attended a Photoshop seminar in Boston. A local photographer was going through what she termed a Mathematically solid way of correcting images. She touted the formula as the best way to correct images. She started in with the Histograms in the Levels dialog and showed how adjusting for the 3 separate channels produced better results. She talked about the Gamma levels and what to look for when making adjustments. The crowd was in rapt attention. As she finished up her final adjustment in the Blue channel, she finished off by doing something very unformulaic, something very unmathematical, she adjusted the midtone gamma level range to either lighten or darken the photo to taste, describing this last option as something that would be different for everyone and to trust your eye.

“It’s not about knowing all the gimmicks and photo tricks. If you haven’t got the eye, no program will give it to you.” — David Carson

It turns out that trusting your eye when it comes to Typography is a skill that once attained, will serve well in crafting type both for print and on the web.

“Anyone can use typefaces, some can choose good typefaces, but only a few master typography” – Information Architects

Line Length & Legibility

When the internet was in its infancy, text ran from one side of the viewport to the other. At that time, screen resolutions were pretty low, 800 x 600, but the text on some sites was difficult to read because of something we call a measure or the line length in typography. This is a comfortable distance that the eye travels across the text and is able to get to the next line to continue the story. A wider measure tires the eye as it has to read a longer distance and then attach to the next line. A short measure makes for quick reading, but too short and the text starts to hyphenate more quickly and presents other challenges.

The measure can be an arbitrary value and there are some guidelines out there, but in the end the measure is largely governed by the font that’s being used. A bolder font can hold up well with a wider measure, whereas an italic face or a thin serif needs a shorter measure. Robert Bringhurst, author of The Elements of Typographic Style has this advice on the measure:

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40 to 50 characters.”2

He goes on to make suggestion for what the measure might be in shorter or wider situations, but he at least gives us a baseline. This is especially important in the context of Responsive design. Say for example, you have text on a page that looks great on a desktop at 1024 x 768, but then if you look at that same page at a higher resolution, say 1440 x 900, the measure will increase ruining the legibility. This is where max-width might come in handy:

section {
max-width: 45em;
}

On smaller devices, the measure may be fine, but now your text flow is more compact, invariably tighter. You might need to adjust for the smallest screen size in your media queries.

In beginning a practical exercise, you should have your fonts picked out for the body and headlines, subheads and whatever applications are needed. You may even have just one font with variations in weights and styles. When you have the type set, adjust the width of the container to find a comfortable measure. I’ve found that with 16px (100%) font size, a 32em – 34em (somewhere between 480 – 420 pixels) seems to be a good measure.

Line Height

The next thing we’ll need to do is find a good leading value, but on the web that’s more difficult than in print.3 The problem on the web is that there is no concept of a baseline and the CSS line-height property doesn’t behave like prints counterpart leading. Each line of text is placed roughly in the middle of the elements total height. This is contrary to the basic principle of a baseline grid: the bottom of every line of text falls on a vertical grid set in even increments all the way down the page.

This is relatively easy to accomplish in InDesign or QuarkXPress, where we can enforce text to adhere to the baseline grid. It’s a little harder to do on the web though. The 3 factors that we need to control are font size, line height and margins (although some argue that padding is a better control mechanism4).

Baseline Grid

InDesign (left) and Quark (right) allow you to snap the text to the baseline grid.

Line height is a key value to determine though and there are many schools of thought on how to achieve the appropriate balance. Assuming a 16px (100%) font size for our body text, most desktop publishing applications will enforce a general leading rule of 120%. That would give us a leading value of 19.2. That appears to be a healthy amount of space between lines, but you may prefer a tighter or looser leading depending on the font you’ve chosen.

Font Sizing With a Typographic Scale

We have our body text set, but what about our headlines, subheads or callouts? We certainly can put a lot of guesswork and trial and error into selecting appropriate font sizes for these, but we can also rely on a typographic scale. Musicians, architects and artists have similar systems that continue to work in delivering pleasing work that’s balanced and harmonious. Musicians have musical scales with specific characteristics that are tonally pleasing to the ear. A half step off and the dissonance is quite noticeable. Architects use proportion and physics to create spaces that are inviting and dynamic, otherwise we’d all be living and working in boxes. The typographic scale is just one of many modular scales that can mathematically relay specific intervals that are harmonious and pleasing to the eye.

One such modular scale is the Golden Section. The mathematical ratio is 1:1.618. If we take that and apply it to typography, we can come up with a range of values that give us possibilities to choose from for font sizes:

16 x 1.618 = 25.888
25.888 x 1.618 = 41.886
41.886 x 1.618 = 67.772

And so on. If we need smaller values, we can divide to get them:

16 / 1.618 = 9.88
9.88 / 1.618 = 6.11

If you want an easier way to create a system like this, use Tim Brown’s Modular Scale. Input a value and then choose a scale and then click Submit Query.

Modularscale.com

Finding a Typographic Scale with Modularscale.com

So we might apply styles to our headings in the following manner:

h1 { font-size: 67.772px;
line-height: 67.772px;
color: #DC3522;
}
h2 { font-size: 41.886px;
line-height: 41.886px;
color: #374140;
}
h3 { font-size: 1em;
line-height: 1.2;
text-transform: uppercase;
color: #7D7D7D;
}

The heading is dramatic and the subhead feels like the right size, just twice the size of the body text. These are pixel values, but they can be converted to ems. For the font size, we use the standard RWD formula: target / context = result. If our body text is 16px, we would divide by that.

67.772 / 16 = 4.23575
41.886 / 16 = 2.617875
25.888 / 16 = 1.618

What about the leading values? Because the context changes, we take the line height and divide it by the font size. In the case of our heading and subhead, the font size and line height are equal values and when you divide them, you’ll get 1. So our styles now look like this:

h1 { font-size: 4.23575em;
line-height: 1;
color: #DC3522;
}
h2 { font-size: 2.617875em;
line-height: 1;
color: #374140;
}
h3 { font-size: 1em;
line-height: 1.2;
text-transform: uppercase;
color: #7D7D7D;
}

If you inspect the h1 element in Chrome or Firefox, you’ll see that the computed style shows the pixel values that we previously input for the font size and line height. Here’s what we have so far:

See the Pen Typographic Scale Example by Al Lemieux (@alemieux) on CodePen.

There’s a wonderful site that you can use to explore vertical rhythm. At Typecast.com, you can copy and paste all of your text into an interface that lets you play with your body text, headlines, and any other element you put on the page. You can then view and even export all of the CSS so that you can use it in your own project. You can even get a style guide that is created as you develop the page. You can try typecast for free, but then there are monthly payment plans for full usage.

Another tool you can use to find vertical rhythm is at drewish.com. Not as elegant as modularscale, but you can get some basic guidance on setting body text, headings, and subheadings.

There are other methods for arriving at vertical rhythm, which we’ll take a look at next time. This method is pretty sound, but not very practical. As you’ll see, there’s quite a bit of math involved and one thing will persist: pixel values will need to be converted to ems. So break out and dust off that calculator.

About Codepen

Some of you may already know about Codepen, which I’ve been using for the past couple of posts. It’s a great playground where you can play with HTML, CSS, and JavaScript in a browser environment and get instant feedback. Instead of flipping back and forth between an editor and a browser, you can do all of the work within one browser window. Sure, there are other playgrounds out there, but I just love the way things work in Codepen. You can check out some other experiments that I’m working at codepen here: http://codepen.io/alemieux/public/

Footnotes

  1. The Elements of Typographic Style. Robert Bringhurst. p. 26.
  2. Ibid. p. 45.
  3. Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students (Design Briefs), by Ellen Lupton – May 2014
  4. Scale & Rhythm. Ian Lamb. 2009. http://lamb.cc/typograph/

RWD – Typography: The Almighty Em

Posted on: December 1st, 2014 by alemieux 1 Comment

In Ethan Marcotte’s tome Responsive Web Design, he begins setting a simple typography example with the following explanation:

Finally, you’ve probably noticed that the font-size has been set to 100%. In doing so, we’ve simply set our base type size to the browser’s default, which in most cases is 16 pixels. We can then use ems to size text up or down from that relative baseline.

There’s not a lot of explanation about why the base font size is set in a percentage and why ems is the unit of choice. Published in 2011, the book may have come at a time where this was standard practice or just the way Ethan went about doing his thing. There was a pretty popular method of setting the base font size to 62.5%, which makes the base font size 10pt – a nice round number that can be mathematically managed better than 16pt. In order to explore Ethan’s method, we need to understand a few things about the baseline type set in percentages and why ems are better than other units of measure.

Units of Measure

You can specify type sizes in CSS with pixels, points, inches, ems, percents, and other units of measure. It would seem at first glance that when working in a web-related dimension, that using pixels as the primary unit makes the most sense. The reason why we don’t use pixels or points is because they are not scalable – meaning they can’t be resized in all browsers. In IE6 & 7, it was particularly a problem. Most modern browsers can scale pixel-based text, but there are problems with it on mobile devices. If the base font size changes, say from 100% to 120%, pixel-based font sizes will stay the same. Another reason we can’t use pixels is that pixel sizes “aren’t constant – or at least the display of them isn’t. 16px text on an iPhone can be ~60% the size of 16px text on a Macbook.”1

Why not use percentages as the choice unit of measure? Ems and Percents are essentially the same, but scale differently depending on what the base font size is set to. Em-based font sizes tend to become exaggerated when resizing in IE6 & 7 when the base font is not set to percentages. When we define font sizes in percentages, it is a percentage of the body font size. So 150% is 150 percent of the font size, whereas 1.5em is 1.5 times larger.2

About That Em

Em Units Are Scaled

An Em unit is defined as the point size or classically, the size of an uppercase M in any font or slightly larger. Robert Bringhurst, author of the Elements of Typographic Style defines an Em as such:

[t]he em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.3

Perhaps that helps us to visualize the Em unit a little better, but it’s the flexibility of Ems. Setting up our baseline font size as 100% and then setting all other elements in Em-based font sizes makes that text relative. If you have all of your type set in pixels, changing the base font size doesn’t cascade and makes the rest of the text relatively update. If you set your text in Ems however, and change the base font size, you don’t have to touch your Em-based font sizes because they are relatively affected by that change.4

In Media Queries, this is pretty powerful. Instead of making individual changes, you can simply change the body font size and be done with it. The scaling that Ems employ allow for quick global changes.

Mathematical Operations

I never paid attention in Math class. In fact, some of the best doodling I ever did was in that class, much to my chagrin. To be perfectly honest, the first time I went through Responsive Web Design, I didn’t fully get the calculations and struggled with understanding why I had to use Ems. Of course, I – like many others – were using pixels for everything. If we can’t use pixel values for responsive design and Ems are a better unit, how do we use them? A handy dandy formula:

target ÷ context = result5

The target is the size of text that you want to use. The context (although it can change) is the base font size, which for our purposes is 1em or 16px. If all of our body text is 100%, which is 1em, which is 16px, what if we want text that is smaller or larger than that? Let’s start with a headline for example. If I have a 24px headline in my design I need to convert that to ems. So, I use the formula above and come up with the following:

24px ÷ 16px = 1.5em

Let’s say that I have some copyright text in the footer that needs to be 10px. Again, using the formula, we get:

10px ÷ 16px = 0.625em

See the Pen Calculating Font Sizes with Ems by alemieux3 (@alemieux3) on CodePen.

Other Considerations

The Rem unit is said to be more reliable than Em, but since Marcotte and others specifically advocate it, I’m sticking with that unit of measure for now. One thing about base font size is that the default 16px browser font size is not a given. Anyone can change their browser preferences and set the font size to anything they want. If they have a hard time seeing, for example, they might set the font to something a lot larger. The ability to zoom text or the viewport in most modern browsers will also alter the look of your type and that’s just a bit of control that you have to give up. One other note is that most web design templates have this system built into it already, like Twitter Bootstrap and others, so if you’re using one of those systems, it’s already built in.

Next time, we’ll look into setting a baseline grid and creating a vertical rhythm.

Footnotes

  1. The Goldilocks Approach to Responsive Web Design. Front design agency. http://goldilocksapproach.com/demo/
  2. Font Sizes in Responsive Design: px vs. pt vs. em vs. percent? Eclipse Web Media. https://www.eclipsewebmedia.com/font-sizes-in-responsive-design/
  3. The Elements of Typographic Style As Applied to the Web: 2.1.1 Define the word space to suit the size and natural letterfit of the font. http://webtypography.net/2.1.1
  4. Why Ems? CSS Tricks. Chris Coyier November 8, 2012. http://css-tricks.com/why-ems/
  5. Fluid Grids. Ethan Marcotte. A List Apart. March, 2009. http://alistapart.com/article/fluidgrids

Web Fonts – Literally

Posted on: October 11th, 2007 by alemieux

Verdana, Arial, Helvetica, sans-serif; Or Times, Times New Roman, serif. You’ve used it many times. Possibly with variations, like Georgia or Trebuchet MS. The small set of fonts that are commonly available on most systems is simply boring. I can’t get any energy out of a story in Times.

Enter Prince 6 and the ability to embed fonts in a web page. Not a new concept, but something that’s been desired for a while. This article on A List Apart describes in detail what is possible and what the future may hold for font embedding.

Unfortunately, only TrueType fonts are the file type of choice, so don’t get your OpenType hopes up.