BlogmyQuery – BMQ

“What? Another “Equal Height Columns” article? Enough already!” If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks. It does not use images, nor extra markup, nor CSS3, nor pseudo-classes, nor Javascript, nor absolute positioning. All it uses is border and negative margin. Please note that this article will also demonstrate different construct techniques and will brush up on a few concepts.

1. Centering columns without a wrapper div

This layout will be built without a wrapper div:

The basics

We use the background of body and the border of one of the columns to create background colors that vertically fill the “row”.

The markup

<div id="header">
	<h2><a href="#">Header</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="sidebar">
	<h2><a href="#">Sidebar</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="main">
	<h2><a href="#">Main</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="footer">
	<h2><a href="#">Footer</a></h2>
	<p>Lorem ipsum...</p>
</div>

Tip: always include links within your dummy text to spot stacking context issues.

About using body as a wrapper:

• always style html with a background to prevent the background of body from extending beyond its boundaries and be painted across the viewport.
• never style html with height: 100% or the background of body will be painted no taller than the viewport.

The CSS

html {
  background: #9c9965;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header {
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
  background: #d4c37b;
}

#main {
  border-left: 200px solid #d4c37b;
}

#footer {
  clear: left;
  background: #9c9965;
}

What do these rules do exactly?

• We style html with a background to prevent the browser from painting the background color of body outside our layout.
• We style body with auto margin to center the layout; the width is set using percentage. The background declaration is for #main.
• We style the background of #header to mask the background color of body (the same goes for #footer).
• The background color of #sidebar matches the border color of #main. This is the trick we use to make our columns appear as being of equal height.
• The footer clears any previous float so it stays below the columns, at the bottom of the layout.

If you take a look at this first step, you’ll notice that the heading in #sidebar is not vertically aligned with the heading in #main and that we have some gap at the top and bottom of the #sidebar. This is because out of these two containers, only one is a block formatting context. So margins do not collapse in #sidebar while they do in #main. This also means that #main will not contain floats and that applying clear:left to any nested element in there will clear #sidebar as well.

So to prevent any float and margin collapsing issues we make all the main boxes block formatting contexts.

#header,
#footer {
  overflow: hidden;
  zoom: 1;
}

#main {
  float: left;
}

#sidebar {
  margin-right: -200px;
}

Note: if things look a bit different in IE 6 and 7 it is because in these browsers default margins do collapse inside block-formatting contexts. The following should also be considered:

• overflow and zoom on #header and #footer make these elements new block formatting contexts.
• For #main we use float rather than overflow to prevent potential issues if we had to offset some nested content.
• The negative margin keeps #main into place because now that it is a float, its border box comes next to the margin box of #sidebar (the negative vlaue must match the dimension of the said box).

If you look at the second step, you’ll see that the border of #main hides #sidebar. This is because of the stacking context. In the flow (tree order), #main comes after #sidebar so the former overlaps the latter.

Positioning #sidebar brings it up in the stack.

#sidebar {
  position: relative;
}

Note: if you make #main a new containing block you’ll revert to the original stack order. In this case, you’ll need to use z-index to keep #sidebar on top of #main.

If you look at step three, you’ll see that we are almost there. The last things to do are mostly cosmetic. I’ve inserted a base styles sheet:

<link rel="stylesheet" type="text/css" href="http://tjkdesign.com/ez-css/css/base.css">

and then added these rules:

html {
  height: auto;
}

body {
  border: 1px solid #efefef;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom: 2em;
}

Why do we need these rules?

• We can reset the height on html so the background of #main is not cut-off at the fold (this styling is inherited from the base styles sheet).
• We can draw a border all around the layout.
• Because the base styles sheet only sets top margins, we can create gaps at the bottom of the main boxes via padding.

Note: The rule for html is shown here, but it makes more sense to remove that rule from the base styles sheet rather than overwriting the declaration here.

This is the last step for this first layout. It relies on these simple rules:

html {
  height: auto;
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
  border: 1px solid #efefef;
}

#sidebar {
  float: left;
  position: relative;
  width: 200px;
  margin-right: -200px;
  background: #d4c37b; /* color must match #main's left border */
}

#main {
  float: left;
  border-left: 200px solid #d4c37b; /* color must match #sidebar's background */
}

#header,
#footer {
  clear: left;
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom:2em;
}

2. Creating a 2-col-layout with two borders in between the columns

We’ll build this one with a single wrapper for our two columns, and we want to paint a vertical border between the two columns.

The basics

The wrapper div allows us to be a bit more creative here. The background of the wrapper is used to paint the background of one column, while its left border is used to paint the background color of the other column. The vertical border will be done by overlapping the right border of the left column with the left border of the right column.

Note: if you have use a fixed width layout (vs. fluid like here), then the wrapper can be used to create the two background colors as well as the vertical border at the same time. This is done by using the left border for the left column, the right border for the right column and the background for the vertical border. Yes, this means the content box is one pixel wide and that negative margins are used to pull the columns into place.

Markup

<div id="header">
	<h2><a href="#">Header</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="wrapper">
  <div id="sidebar">
  	<h2><a href="#">Sidebar</a></h2>
  	<p>Lorem ipsum...</p>
  </div>
  <div id="main">
  	<h2><a href="#">Main</a></h2>
  	<p>Lorem ipsum...</p>
  </div>
</div>

<div id="footer">
	<h2><a href="#">Footer</a></h2>
	<p>Lorem ipsum...</p>
</div>

CSS

We start with the generic rules from the previous demo:

html {
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header,
#footer {
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
}

#main {
  float: left;
}

To which we add position: relative:

#wrapper {
  display: inline-block;
  border-left: 200px solid #d4c37b;
  position: relative;
}

#sidebar {
  margin-left: -200px;
  position: relative;
}

Note: there is no need to use clear on the footer since #wrapper contains both floats.

• Rather than using overflow/zoom, we use inline-block to create a new block formatting context (this declaration also triggers hasLayout). The left border will paint a background color behind #sidebar.
• Negative margin is used to bring #sidebar outside the content box of the parent’s container (to make it overlap the border of #wrapper).

The case of IE6: If the above rules use position: relative (twice), it is because of IE 6. It is applied on #wrapper to prevent #sidebar from being clipped outside of its content box. It is also applied on #sidebar to make sure that the elements are “always” painted with the proper offset.

If you look at this first step, you’ll see that we have everything working, but the vertical border is in between the columns. You should also notice that in browsers other than IE 6 and 7, there is a small gap at the bottom of #sidebar (at the bottom #wrapper actually). This is because #wrapper is styled with inline-block so it is sitting on the baseline of the line box. The gap you see is the “descender space” (the space reserved for descenders in lowercase letters).

So these are the rules to remove the gap and create the vertical border:

#wrapper {
  vertical-align: bottom;
}

#sidebar {
  margin-right: -1px;
  border-right: 1px solid #888;
}

#main {
  border-left:1px solid #888;
}

What do these rules do?

• vertical-align: bottom makes #wrapper sit at the bottom of the line box rather than the baseline.
• the two borders (for #sidebar and #main) overlap because of the negative right margin set on #sidebar. This overlap guarantees that this “common” border will be as tall as the tallest column.

If you look at step two, things look much better. The last things to do is to add the base styles sheet and the same rules we used at the end of the first demo:

<link rel="stylesheet" type="text/css" href="http://tjkdesign.com/ez-css/css/base.css">

and then add these rules:

html {
  height: auto;
}

body {
  border: 1px solid #efefef;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom: 2em;
}

This last demo for this layout includes the above rules.

3. Creating a three column layout with a border in between the columns

We’ll build a layout with a single #main-wrapper, one containing all the divs. This approach complicates things a bit, but it also allows to tackle new challenges. Please note that with this layout, the vertical borders will not show in IE 6 and 7.

The basics

We use the wrapper to create the background of the three columns. The left and right borders of the wrapper will be used for the two side bars while its background will be used for the main content.

The markup

<div id="wrapper">
  <div id="header"><h2><a href="#">Header</a></h2><p>Lorem ipsum...</p></div>
  <div id="sidebar"><h2><a href="#">Sidebar</a></h2><p>Lorem ipsum...</p></div>
  <div id="aside"><h2><a href="#">Aside</a></h2><p>Lorem ipsum...</p></div>
  <div id="main"><h2><a href="#">Main</a></h2><p>Lorem ipsum...</p></div>
  <div id="footer"><h2><a href="#">Footer </a></h2><p>Lorem ipsum...</p></div>
</div>

CSS

We start with the generic rules from the previous demos:

html {
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header,
#footer {
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
}

#main {
  float: left;
}

To which we add:

#wrapper {
  border-left: 200px solid #D4C37B;
  background-color: #ffe3a6;
  border-right: 200px solid #D4C37B;
}

This code sets the background color for the three columns. In the same sequence as the above declarations.

If you look at this first step, you’ll see that we have achieved the background effect we are looking for, but things look pretty broken. Everything shows inside the wrapper’s content box.

These next rules should fix the display of the three columns (zoom: 1 for the #wrapper and position: relative for #sidebar and #aside):

#wrapper {
  zoom: 1;
}

#sidebar {
  margin-left:-200px;
  position: relative;
}

#aside {
  float: right;
  width: 200px;
  margin-right: -200px;
  position: relative;
}

#aside is given a width and floated to the right. The negative margins pull each side bar over the wrapper’s border — outside of the content box.

Note:IE 6 and 7 needs #wrapper to have a layout, hence the use of zoom. IE 6 needs the two position declarations for the same reason as in the previous demos.

If you look at step two, you’ll see that #header does not stretch across the entire layout and that #footer is nowhere to be found.

These two rules should take care of everything:

#header,
#footer {
	margin-left: -200px;
	margin-right: -200px;
	position: relative;
}

#footer {
  clear: both;
}

The negative margin on both sides of #header and #footer stretches the two boxes outside of the wrapper’s content box. clear:both makes the footer clears all the columns. This is step three.

Once again, the position declaration is for IE 6. Just remember to always position elements that you offset.

What’s next?

You know the drill. We insert a base styles sheet in the document:

<link rel="stylesheet" type="text/css" href="http://tjkdesign.com/ez-css/css/base.css">

and add the usual:

html {
  height: auto;
}

body {
  border: 1px solid #efefef;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom: 2em;
}

Step four shows how things look before we tackle the vertical borders.

Adding vertical borders

The following technique is inspired from the companion columns technique (Ingo Chao) and the Nicolas Gallagher method.

To get the effect we want (two borders touching each other), we use generated content to which we apply a background color and a border.

The CSS

html:before {
	content: ".";
	position: absolute;
	height: 20px;
	background: #45473f;
	left: 0;
	right: 0;
	z-index: 2;
}

body {
  border-top: 0;
}

#header {
  border-top: 1px solid #fff;
}

#wrapper {
  position: relative;
}

#header,
#footer {
  z-index: 1;
}

#wrapper:before,
#wrapper:after {
  content: ".";
  position: absolute;
  width: 1px;
  height: 2000px;
  background: #9c9965;
  bottom: 0;
}

#wrapper:before {
  left: 0;
  border-left: 1px solid #fff;
}

#wrapper:after {
  right: 0;
  border-right: 1px solid #fff;
}

body {
	position: relative\9;
	z-index: -1;
}

OK, so what’s going on here?

• The fake borders get out of the container (at the top), so the first rule paints generated content on top of them. Note that we would not need this rule if the color of the fake borders was the same as the page’s background (html), or if there was no gap between the top of the viewport and the layout.
• Because these borders are painted over the border around body, we move the top border from body to #header.
• To properly position the fake borders, we need to make the wrapper the containing block for the generated content.
• We bring #header and #footer above the stack so they hide the fake borders which are painted inside the wrapper (from bottom to top).
• This is the generated content we use to create the columns.

The case of IE 8: The last rule is for IE 8. Without this, IE 8 would not paint the generated content over the borders that escape the wrapper (at the top). If this declaration is sandboxed via the “\9″ hack, it is because Gecko browsers would make everything unclickable/unselectable.

Note: these pseudo-classes are not supported by IE 6 and 7, so in these browsers, there are no borders between the columns.

Things to consider

The third layout uses one main wrapper, but it would make more sense to use a inner wrapper instead to hold only the columns. In case this route was taken here, then it was only for those of you who are stuck with this type of construct, but want to implement this solution for equal height columns.

When absolutely positioning elements inside a containing block with wide columns like in the last two demos, remember that the reference is the padding box, so 0 for right or left may not be the value you would want to use.

Further reading

• Faux columns
• Ultimate multi-column liquid layouts
• Doug Neiner Method
• Nicolas Gallagher Method
• Balance your CSS Columns with JavaScript
• Absolute Columns
• Companion columns

(ik) (vf)

© Thierry Koblentz for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: borders, CSS, height columns, negative margins

by Bhanu Ahluwalia

Designing wallpapers in Photoshop is mostly admired among designers. And why shouldn’t it be? You are free to decorate your desktop any way you like. You can go for abstract, nature, typography, simple, contemporary or any other style you want. Besides this, designing wallpapers is also a fulfilled way to master new techniques. Today’s post provides you a compilation of the techniques available in Photoshop; for beginners as well as for experts! So take your time and have a look at these tutorials — and take your creativity to the next level!

Save the Planet Wallpaper Concept — In this tutorial, all you will need is a picture of an apple and one of the earth; merging them together makes an interesting wallpaper concept.

Creating a Simple yet Creative Graphic Typography Wallpaper Design — This tutorial helps you create a simple but creative graphic typography wallpaper.

How to Make a Simple Green Wallpaper in Photoshop — In this tutorial, you can see how a simple green wallpaper is made using Photoshop.

Duality Wallpaper — This DUALITY wallpaper is inspired by an amazing fractal freeware called ContextFree.

Mother Nature Artistic Wallpaper Design — Easy techniques to make an artistic mother nature design wallpaper using Photoshop.

Create an Intensely Grungy Wallpaper — In this tutorial, the artist shows you how to create an intensely grungy wallpaper.

Forest Fairy Wallpaper — In this tutorial, the artist shows you how to make a Forest Fairy Wallpaper.

Creating nice wallpapers for your desktop — Here the artist has made a beautiful apple wallpaper and shares the technique with us.

Creating a Very Shiny Summer Wallpaper — Learn how to create shiny summer wallpapers.

Creating A Final Fantasy XIII Wallpaper — Wallpaper inspired by the game “Final Fantasy XIII”.

The Screamusic Wallpaper Tutorial — Simple techniques to help your creativity.

Creating a Wallpaper Based on Making of the Logo — This tutorial will show you how the creation of a logo can help you create the rest of the elements of the corporate style and even into a wallpaper.

How to Make a Wallpaper — Here you can make a wallpaper using produced custom brushes, colour gradients and non-standard fonts with Photoshop as a main application.

Creating A Graffiti Car Wallpaper — Here you can learn how to create a graffiti wallpaper for a hot looking car.

Create an Astonishing Soccer Desktop Wallpaper Using Photoshop — In this tutorial, the artist will be creating a very simple but nice looking desktop wallpaper.

Matte Painting Wallpaper — In this tutorial, we will make a fast matte painting wallpaper. Matte painting is actually based on a photo with different hand painted elements.

Stunning Abstract Wallpaper Design — This tutorial shows you some simple ways using the pen and brush tools to create a really cool abstract wallpaper.

Making of nine and venue wallpaper — In this tutorial, the artist shows you how to make a nine and venue wallpaper.

Create an Abstract Wallpaper for World Cup 2010 — This tutorial will show how to create an abstract glowing background using the various brushes and warp transformation tool.

Create a Futuristic Abstract Wallpaper — In this tutorial, the author shows you how you can use filters to create wallpapers with abstraction in futuristic style.

Graphic Wallpaper: Hit-Girl — In this project walkthrough the artist shows you the different techniques that went into creating a graphic featuring the show-stealer Hit-Girl.

Clash of the Titans: Medusa — The Gorgon Queen Medusa is back in the Clash of the Titans; here the artist felt very inspired and so has created a wallpaper of Medusa.

Creating Avatar Movie Wallpaper — Here is an interesting tutorial how to create an Avatar movie wallpaper.

Desktop Wallpaper Calendar February 2010 — Here the artist has created this wallpaper calander keeping Valentine’s Day in mind.

How to Create an Abstract Colourful Background with Bokeh Effect in Photoshop — In this tutorial, you’ll learn how to create an abstract colorful background using the bokeh effect and the rest of Photoshop’s drawing tools, blending modes, and lighting techniques.

If This is Your First Night of Fight Club… — Here you can learn the techniques on how to make a gritty fight wallpaper.

Create a Fantastic Grayscale Wallpaper in Photoshop — In this tutorial, the artist explains how to create a fantastic grayscale wallpaper in Photoshop.

Creating Your Own Custom Gaming Wallpaper — In this tutorial, you can create your own Super Paper Mario Wallpaper.

How To Draw Mother And Baby Turtle Wallpaper — This tutorial shows you how to make a lovely mother and baby turtle wallpaper.

The Warrior Angel — Here’s a walkthrough of the creation of a wallpaper featuring a mystical warrior angel.

Quick And Dirty Space Monitor — In this tutorial, the artist has created his own custom Space Monitor Display.

Creating a Celebrity Wallpaper — Learn how to create a celebrity wallpaper.

Wall-E Cartoon Style Wallpaper — You must have watched Wall-e movie. This tutorial shows you how to make it immortal as a wallpaper.

(ik)

Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results. Today we will take a close look at some the best practices for combining typefaces — as well as some blunders to avoid.

Combine a Sans Serif with a Serif

By far the most popular principle for creating typeface combinations is to pair a sans serif header typeface with a serif body typeface. This is a classic combination, and it’s almost impossible to get wrong.

In the example below — a typical article layout — we have Trade Gothic Bold No.2 paired with Bell Gothic on the left side. They are both sans serif typefaces. However, they have very different personalities. A good rule of thumb, when it comes to header and body copy design problems, is not to create undue attention to the personality of each font. Trade Gothic is arguably a no-nonsense typeface. Bell Gothic, on the other hand, is much more dynamic and outspoken.

Putting these two together creates an unwanted conflict in the design. Trade Gothic wants to get to the facts, but Bell Gothic wants to have some fun. This kind of tension is likely not part of the design goal, and should be avoided.

Now let’s look at the example on the right. We’ve replaced Bell Gothic with the stately Sabon. Sabon, which is a serif typeface, works very well with Trade Gothic. They are both focused on bold clarity with highly-readable glyphs due to their tall x-height. Both typefaces, in this context, are on the same mission, and that makes for a great combination.

Avoid Similar Classifications

Typefaces of the same classification, but from different typeface families, can easily create discord when combined. Their distinct personalities don’t play well off of each other and create a kind of typographic mud if careful attention is not paid.

In the first example on the left side we have a heading set in Clarendon Bold, which is a slab serif. The body copy on the left is Officina Serif which is also a slab serif. Slab serif typefaces are known for their distinct personality, and they like to dominate any area in a design they are used in. Putting two slab serifs together can create a needless and unsightly tension.

Now notice the example on the right side. The Clarendon Bold header is paired with the much-more neutral New Baskerville. New Baskerville is a versatile transitional serif typeface with wide glyphs that goes nicely with the heavy-set Clarendon. At the same time, it backs down and lets Clarendon have all the personality it wants. This combination works quite nicely as a result.

Choosing typefaces from different classifications at the start avoids needless tension in your design and typography later.

Assign Distinct Roles

One very easy way to combine multiple fonts from several typefaces is to design a role-based scheme for each font or typeface, and stick to it. In the next example, we have used Akzidenz Grotesk Bold in all-caps in an author slug on the top. We then use Rockwell Bold for the article heading. Our body copy intro and body copy typeface is Bembo at different sizes. Finally, the second level heading is Akzidenz Grotesk Medium.

We saved the highly-distinct Rockwell for attention-getting headlines, and fallen back to a conservative sans serif heading and serif body copy combination we discussed earlier. But even in that choice, we have a great variation of size, weight and function among the fonts used.

All in all, there are 4 fonts from 3 typefaces being used here, and they all pull together into a cohesive design, because each roll assigned to a font is fixed and is very clearly defined in the typographic hierarchy. When in doubt, define!

Contrast Font Weights

A sure-fire way to muddy your typographic hierarchy is to fail to distinguish elements in the hierarchy from one another. In addition to variations in size, make sure you are creating clear differences in font weights to help guide the reader’s eye around your design.

In the example on the left, we have a decent size contrast, but not enough font weight contrast. The Myriad Light, when set above a Minion Bold, tends to fade back and lose visual authority. However, we want the reader’s eye to go to the heading, not the body copy, at least initially.

On the right, we’ve set a Myriad Black above Minion, normal weight. It might be a bit heavy-handed but there is no confusion as to what the reader is supposed to look at first.

Create a Variety of Typographic Colors

Typographic color is the combined effect of the variations of font weight, size, stroke width, leading, kerning, and several other factors. One easy way to see typographic colors is to squint at a layout until you can’t read it anymore, but can still see the text in terms of its overall tonal value.

If you squint at the examples below, you’ll notice that layout on the left bleeds into one undistinguished blob of text, ever so slightly more dense at the bottom. However, the layout on the right retains its visual hierarchy, even if you can’t read it. No matter how far away you are from this page, there is no confusion regarding where the title is, and where your eye should go next.

Clever use of typographic color reinforces the visual hierarchy of a page, which is always directly tied to the meaning of the copy and the desired intention of the message.

Don’t Mix Moods

One often-overlooked typographic mistake is not recognizing the inherent mood of a typeface. Typefaces have personality. They change to some degree based on context, but not greatly. It’s one problem to misidentify the personality of typeface for a particular job, but it’s a double-problem to add another poorly chosen typeface to the mix!

On the left of this example, we have Franklin Gothic Bold paired with Souvenir. The basic feel of Franklin Gothic is stoic, sturdy, strong, but with a refined sense of elegance and mission. It’s not a cuddly, but functional. On the other hand, Souvenir is playful, casual, a little aloof, and very pretty. These two typefaces together come across like a Buckingham Palace guard who is dutifully ignoring a playful little girl at his feet trying to get him to smile. This kind of mixed-mood just doesn’t work very well. Mixing the mood of typefaces can draw attention to the typography instead of the message, which results in a poor design.

On the right, we’ve given Souvenir a more willing playmate. Futura Bold has many personalities, but it’s more than willing to accommodate Souvenir for several reasons. First, both typefaces have high x-heights. Both typefaces have wide glyphs and very circular letter shapes. Both typefaces have a subtle but not overly-prominent quirkiness. Neither dominates the other. They both work, in this example, to create a fun and upbeat mood. There is no sense of undue tension.

Contrast Distinct with Neutral

A clean, readable typographic design requires careful attention to intended and unintended tension. One place to look for unintended tension is with personality clashes among your type choices. If one of your main typefaces has a lot of personality, you might need a secondary typeface to take on a neutral role.

In our example, the left column pairs Dax Bold with Bernhard Modern. This is a poor choice for at least two obvious reasons we’ll examine.

First, Dax has narrow glyphs and a big x-height while Bernhard Modern has some very wide glyphs and one of the lowest x-heights among popular classic typefaces. Second, Dax is an informal, modern, and bright typeface. It’s a great fit for a techie, savvy, modern message. Bernhard Modern on the other hand is classy, quiet, sophisticated, and even a touch intimate. Combine the lack of chemistry among those attributes together with the very different personalities of each typeface and you have a poorly functioning bit of typography.

Let’s look at a better choice. The right column pairs Dax Bold with Caslon. Caslon is an old style typeface, but it’s been modernized and sanitized to play nicely with other typefaces. It works satisfactorily with Dax in this context. Notice how you can see the personality of Dax in the headline, but Caslon steps aside and delivers the reader to the message? In this context, Caslon functions quite well as a neutral choice to support the more flamboyant Dax.

Avoid Combinations That are Too Disparate

When too much contrast is created in certain settings by selecting typefaces that are too much unalike, it can create a visual imbalance which works against the overall design.

On the left, we have Antique Olive Nord — an extremely heavy font — paired with Garamond Narrow. The over-zealous contrast and its effects are apparent. In most cases, this extreme contrast goes beyond attention-getting and goes right to awkward. It doesn’t serve the message of the copy well.

On the right, the Antique Olive Nord has been replaced by a more subdued Antique Olive Bold. Garamond Narrow could have been replaced with a book weight Garamond, but a better choice — after some deliberation — was Chaparral. Chaparral has a higher x-height than Garamond, and overall is a more modern and subsequently more neutral choice to set against the idiosyncratic presence of Antique Olive Bold.

Keep It Simple — Try Just Two Typefaces

In all the effort to sort through large typeface libraries looking for “just the right combination”, it’s often easy to overlook the sometimes obvious and much easier choice: stick to two typefaces using a classic sans serif and sans combination.

In the example below, we’ve created a clear visual hierarchy, got a high degree of variety, created a strong sense of interesting typographic color, all-the-while increasing readability. But it was all done with just two typefaces. However, we are using a total of five fonts: three Helvetica Neues and two Garamonds.

Why does this work so effortlessly? Several factors are at play here. First, when using different fonts from the same typeface, you are likely going to have a high degree of visual compatibility without even working for it. Second, we’ve chosen the tried-and-true combinations of using a classic neutral heading typeface and a classic neutral body typeface.

Both Helvetica Neue and Garamond have distinct yet neutral personalities, and they can weave complex layouts together and around each other because we’ve maintained a strict visual hierarchy. Planning rules and following them, with the right typefaces, can yield great results with a minimum of effort.

Use Different Point Sizes

We saved one of the simplest principles for last: use different point sizes to create contrast and distinction.

In the example on the left, the heading and body copy bleed together into an unsightly blob of text. Use the squint method mentioned above and look at the left example. While still squinting, look at the right and notice the dramatic difference even though it’s blurry!

On the right, we have the same two fonts, but in different sizes. TheMix Italic has been bumped up significantly, while New Century Schoolbook has been decreased to a legible, yet more complimentary size.

Using different point sizes helps distinguish the typographic hierarchy and increase the variety of typographic color.

In Conclusion

The fact that there are no hard and fast rules about combining typefaces can make the process of making good choices time-consuming and maybe even a little exhausting. But it’s also nice to have a handy set of principles, as well as an understanding of certain typographic situations to avoid, to guide the process as quickly as possible to a pleasant typographic result.

Further Resources

You may be interested in the following related articles and resources:

• 29 principles for making great font combinations
  Read up on more principles about font combinations
• Mixing Typefaces (PDF)
  Review this classic chart that rates possible combinations with a 1, 2, & 3
• 4 Techniques for Combining Fonts
  Wonderfully illustrated article on how building a palette is an intuitive process, but yet one that can be guided by principles.

Related Posts

You may be interested in the following posts which have been published on Smashing Magazine recently:

• The Beauty Of Typography: Writing Systems And Calligraphy Of The World
• The Ails Of Typographic Anti-Aliasing
• Design Patterns and Best Practices
• 50 Helpful Typography Tools And Resources
• Expressive Web Typography: Useful Examples and Techniques
• 30 New Free High-Quality Fonts

Also, please feel free to follow us on Twitter and join our community on Facebook.

(ik) (vf)

© Douglas Bonneville for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: baskerville, bell gothic, caslon, chaparral, clarendon, dax, Fonts, garamond, helvetica, sabon, sans, serif, trade gothic, typeface, typography