BlogmyQuery – BMQ

In the first three parts of this series, we covered a lot of information about the anatomy of a typeface, and what kinds of things to look for when actually combining two fonts. Here, we’ll tie it all together.

Below are guidelines for combining fonts for paragraphs and headlines, as well as for other common type elements, like pull quotes and by-lines.

Headlines and Paragraphs

The headline and paragraph are two of the most basic building blocks of the typography of a design. In some cases, a heading and paragraph may be the only kinds of typographic information present in a design. Because of this, they’re often given great precedence in the design process.

So let’s start with these two elements, and we’ll expand from there. Here are some examples of effective typeface combinations, starting with the least difficult.

The absolute simplest way to create a headline/paragraph combination is to use the same typeface for both, but with different weights and sizes. Here, we’ve combined Adobe Caslon: Regular for the paragraph copy and Bold for the headline. It’s simple and formal, but can be a bit boring.

The next easiest is to select fonts from the same family. Here we have Fontin Bold for the headline and Fontin Sans for the paragraph copy. Again, change around the weight and size to get better contrast. There are a lot of typeface families that include both serif and sans serif typefaces, including Droid Sans and Droid Serif, and Museo and Museo Sans.

Probably the most common method of combining typefaces is to pair a serif with a sans-serif. In print design, serifs are generally used for the body copy, while sans-serifs are used as headlines. The opposite is more generally true online, though both can work in either setting. Here, we’ve combined Lucida Sans for the headline with Crimson Text for the paragraph copy.

Here we’ve combined Rockwell Bold for the headline and Gill Sans for the paragraph type. Both of these typefaces have a basis in geometric shapes, and therefore they work well together. If you look at the letter “o” especially, you’ll see that in both typefaces, it’s almost a perfect circle (the same is true for the bowls of the letters in both).

Both the typefaces here are clean and modern. The headline is SF New Republic SC and the paragraph is Hero Light.

Here’s another set with a similar mood and style, this time old-fashioned or antique. The headline is Tagettes and the paragraph copy is Goudy Bookletter 1911.

Mixing a strong typeface with a more neutral one can also be a great technique, especially on the web. Here, we have Dancing Script for the headline and Georgia for the paragraph copy.

The trickiest typeface combination technique is probably creating a combination from two radically different typefaces. It’s tricky because it’s so easy to go wrong. Just because two typefaces are radically different doesn’t mean they’ll automatically work together. And when one of those typefaces also needs to be legible as paragraph text, it makes things that much more difficult.

The example above combines Tallys for the paragraph copy with DayPosterBlack for the headline. Tallys is a decidedly traditional-looking typeface, with a fairly light stroke weight. DayPosterBlack, by contrast, is a strong, modern, almost sci-fi-looking typeface.

This is one of those techniques that’s best achieved through simple trial-and-error. Try out a bunch of different combinations and see which ones look good together. You may have to try out a dozen or more combinations before you find one that works well because of it’s contrast.

Beyond Headlines and Paragraphs

Headlines and paragraphs, while important, are only one small part of a lot of designs, especially blogs and news sites. Below are a few more types of typographic elements you may find yourself using.

Pull-Quotes

With pull quotes, there are a couple of different options. First, you can simply use the body copy typeface for your pull quotes, but in a larger size, and possibly a different weight:

It doesn’t look bad, but it’s also kind of boring having both the paragraph and pull quote in Times.

Another option is to use the headline typeface, in this case Dancing Script, for your pull quote. This is more interesting, and definitely draws more attention to the pull quote, but it’s not going to work in every situation. As a general rule, the more decorative your headline font, the worse it will work for pull quotes. You can get away with a script, but anything more decorative than that isn’t going to look right.

The other options with pull quotes is to use a typeface completely different from your headline and paragraph choices. In this case, we’ve used Anivers for the pull quote, Times for the paragraph, and Dancing Script for the headline. Consider the guidelines for combining paragraph and headline typefaces, and use the same general guidelines. In this case, since the paragraph text is a serif and the headline is a script, it made sense to use a sans-serif for the pull quote. Using a weight for the pull quote that’s roughly the same as the weight for the headline helps tie everything together.

Meta Information

Meta information is going to be found on virtually every blog or news site out there. This includes things like the category or tag information, the time the article was posted, and other similar information. Sometimes, it also includes the by-line of the author. Again, there are a couple of different ways to approach the typography for this kind of information.

The first thing you need to remember, though, is that meta information is usually displayed quite small, and sometimes in a lighter color. This rules out a large number of potential typeface choices, as you need something that’s legible at an 8 or 10 point size.

The first option is to use the same typeface you’ve used for your body copy, but in a slightly smaller size and/or a lighter color. Here, both the body copy and the meta information are Crimson.

Another option is to use a very neutral typeface, like Helvetica, for your meta copy. This choice is especially good if your body text isn’t highly legible at small sizes.

Captions

Photo captions should be treated much like meta information. Generally, the type used to caption images is small and sometimes in a lighter color than the body text. In a lot of cases, it’s included within the image border.

Again, you basically have two options for photo captions: you can use the same typeface as your body copy, or you can use a different face. If your captions are going to be very small, legibility may make the decision for you.

For example, look at the captions on the images above. Both are in 11pt, regular weight fonts. The top caption is in Tallys, a common typeface for body copy, which isn’t particularly legible in this instance unless you squint. The bottom caption, by contrast, is in Helvetica, and is significantly more legible.

Examples

Whether you’re combining two typefaces or eight, the same principles apply. You need to find typefaces with some kind of shared characteristics (except when using radical contrast) so that they work well together. Here are some examples of websites that have done just that.

Elysium Burns

Elysium Burns uses a combination of serif and sans serif typefaces, as well as a variety of styles (including all caps).

Good Magazine

Good Magazine also uses a combination of serif and sans serif typefaces, including Georgia for the body text and Arial for navigation and meta information.

Viget Inspire

The Viget Inspire blog uses a combination of sans serif and serif typefaces. Constantina (with Georgia as the primary alternate) is used for headings, while Georgia and Verdana are used for meta information. Body copy on the blog is Verdana.

The Morning News

The Morning News uses Georgia for their headlines and Arial for body copy. They use a variety of weights and styles (including italics and all caps) to set apart different kinds of copy.

The New Yorker

The New Yorker uses their own typeface for article headlines, and Times New Roman for body copy. Meta information and some navigation is set in Arial.

A List Apart

A List Apart uses Georgia for their headlines and navigation, and Verdana for body copy. For by-lines and meta information, they use a combination of Verdana and Times.

Design Wise

Design Wise uses various weights of a slab serif typeface for all of their typography.

Quipsologies

Quipsologies uses a variety of custom fonts for their headlines (p22-underground-pc-1 and coquette-1 most prominently). They also use custom fonts for body text (mostly p22-underground-1 and skolar-1). It’s a bold choice, made possible by web fonts.

sr28

sr28 uses Georgia for headlines and Arial for body text.

I Love Typography

I Love Typography uses web fonts from the same family for their typography, including ff-scala-sans-web-1 for their headlines and meta information, and ff-scala-web-1 for their body copy.

Burciaga

Laura Burciaga’s blog uses a combination of three primary typefaces: Dancing Script (for headlines), Droid Serif (for meta information), and Georgia (for most of the body copy). Combining two serifs is tricky, but it’s done really well here.

Black Harbor

Black Harbor uses Georgia for body copy and KnockoutHTF48-Featherweight for the headlines and navigation.

The Dollar Dreadful

The Dollar Dreadful uses a huge number of retro-styled typefaces for their headlines. Their body font is Georgia.

Matt Bango

Matt Bango uses a mix of Georgia and Helvetica, as well as another serif typeface (with Flash replacement).

Kari Jobe

Kari Jobe’s site uses a variety of typefaces, including Courier New for the body copy. Most of the typography on the site is done with images rather than web fonts.

Design Intellection

Design Intellection uses a variety of weights and styles of Proxima Nova, as well as a bit of Georgia (for block quotes).

The Old State

The bulk of the typography on The Old State is Georgia, though there’s a thin slab serif also used for the navigation and logo.

Poems Out Loud

Poems Out Loud uses Baskerville as their primary typeface for both headings and body copy (with Times as the secondary font). There’s also limited use of Helvetica Neue for navigation.

A Word on Web vs. Print

There’s a lot of conflict surrounding the best practices for typography on the Web when compared to print. In print, longstanding wisdom has pointed toward using serif typefaces for body copy and sans-serifs for headlines. On the web, the opposite is often touted as gospel: sans-serif body copy and serif headlines.

The truth of the matter is that both serif and sans serif typefaces can be perfectly readable both onscreen and in print. It’s all dependant on proper contrast and sizing. Some typefaces are designed to work well at small sizes (mostly by “hinting”), while others are not.

One general rule of thumb for optimal readability, though, is that slightly larger type works better onscreen. This is partly to do with resolution: printed materials are generally printed at 300 dots per inch and up. Screen resolution, though, is generally around 96 points per inch. Because fewer pixels/dots are used to make up the letterforms, they’re slightly less crisp onscreen than they are when printed. By making a type slightly larger, you’re using more pixels to represent the same forms, making the form sharper. The more detailed the letterforms (such as with serif typefaces), the more stark this difference becomes. This is why sans-serif typefaces are often preferred online, as their simpler shapes are better reproduced at smaller sizes.

Conclusion

Much of good typographic design has to do with being unafraid of trying new things and experimenting. Sometimes unlikely combinations work beautifully together, while at other times two typefaces that should look great together just don’t quite look right. The only way to learn what works and what doesn’t is to try new things.

Here are some very general guidelines for using typefaces for various parts of a typical design. Remember, these are just guidelines, and there will be exceptions to all of them.

• Small fonts are more readable if they’re less detailed to begin with. This is compounded when they’re being used online.
• Captions and meta information are generally a few points smaller than body copy, and should either be in the same typeface or a neutral alternative like Helvetica.
• Your typography should match the feel of your content. Formal documents should use formal type. Informal documents should use informal type. (In other words, don’t use something like Comic Sans for a corporate report, and likewise don’t use Times New Roman for a child’s birthday party invitation.)
• When in doubt, use Caslon.

More Resources

• Four Techniques for Combining Fonts
  A useful breakdown from Hoefler & Frere-Jones
• Mastering Font Combinations
  A short, basic article on combining typefaces.
• 19 Top Fonts in 19 Top Combinations
  A look at combining some of the most popular fonts used by designers.
• 10 Great Google Font Combinations You Can Copy
  Not only gives the ten combinations, but also the reasons behind combining them.
• Choosing Type Combinations
  An in-depth article from Layers Magazine.
• Best Practices of Combining Typefaces
  An article from our archives on basic rules for combining typefaces.

(rb)

When combining typefaces, there are a couple of important principles you’ll need to keep in mind, namely contrast and mood. Effectively combining typefaces is a skill best learned through practice, and trial-and-error. Once you’ve mastered the principles covered here, you’ll have the tools you need to try out combinations while making educated guesses about what will and won’t work together.

Here, we’re mostly covering combining two typefaces, as you would for body copy and headlines. In the next part, we’ll cover combining more than two typefaces for things like navigation, image captions, and more.

Contrast

Contrast is one of the most important concepts to understand when it comes to combining typefaces. Without proper contrast, typefaces tend to clash, creating a random, scattered look to your designs (and not in a good way). Creating proper contrast relies on a few principles, all of which are discussed below.

But first, what exactly is contrast? Contrast is the amount of difference between two typefaces. Typefaces that are too similar tend to clash. Your mind doesn’t instantly recognize that they’re different typefaces, and when it finally does, it’s jarring. Typefaces that are too dissimilar can appear haphazard and accidental, which can be just as jarring.

Weight

The weight of a typeface plays a huge role in its appearance. We often think of weight in terms of “light”, “regular”, “medium”, “bold”, etc. But different typefaces have varying weights to begin with. Combining typefaces based largely on weight is a fairly straight-forward way of creating typographic contrast.

You’ll want to look for typefaces that have noticeable difference in weight, without being too extreme. Very extreme differences in weight need to be made up for with similarities in other respects, particularly structure and style.

Style and Decoration

The style of a typeface has a huge impact on how it’s received. Generally, when working with styles, you’re going to be either using regular or italic styles. Underlines are also used, but in web design, they should only be used for links (otherwise, they’re confusing). Other decorations include things like outlines or drop shadows, both of which can be used to unify varying typefaces.

Style and decoration can also be used to create contrast within a type family or typeface. Combine regular and italic fonts, varying weights, and things like shadows or outlines to create variation within a font family and sufficient typographic contrast.

Scale and Hierarchy

The scale of typefaces, or their size relative to one another, is another important factor in combining typefaces. The hierarchy of different elements within the design is greatly influenced by the scale of the typefaces used. For example, your headings should obviously be larger than your paragraph copy. To the same end, your H1 headings should be larger than your H2 headings, and so forth.

As a general rule, your hierarchy should start with your H1 heading being the largest, and your meta information or captions should be the smallest. You need to balance the differences in scale with differences in weight and style, too, so that you don’t have too much variation in size between your largest and smallest fonts.

Classificiation

In general, when combining typefaces, you’ll want to choose ones that aren’t from the same classification. Combine a serif and a sans-serif, or a serif and a script, etc., and you’ll have a much easier time coming up with a combination that has proper contrast and doesn’t clash.

Combining typefaces within the same classification is sometimes possible, but there are some extra considerations. For one, you want to find typefaces that are different enough that they’re immediately recognizable as different typefaces, while also using typefaces that have similar moods, structures, and other factors that tie them together. To some extent, trial and error is your best bet for finding typefaces within the same classification that can work together.

One trick is to choose typefaces that are in the same general classification, but fall under different sub-classes (such as a slab serif and a modern serif, or a geometric sans serif with a grotesk). This provides more contrast right from the start.

Structure

The structure of a typeface plays a huge role in how it works with other typefaces. You either need to choose typefaces that have very, very similar structures, or very different structures. Letterforms that are only a bit similar are going to clash. Typefaces that are very different in other ways can be unified by their similar structures, though the reverse rarely works as well.

Look at the letterforms side-by-side and see if they share a similar shape or other factor (such as x-height). It’s better to go with wildly different structures than structure that’s almost the same but not quite.

Color and Texture

When you need to add visual contrast or unify disparate typefaces, the use of color and texture can do wonders. For example, when you need to add contrast among typefaces that are nearly identical (or within a single type family), changing the color of some elements instantly adds interest. Adding texture has the same effect.

Alternatively, if you have wildly different typefaces, color and texture and unify those typefaces, creating a harmonious look. The principles of color theory still apply to typography, so be sure you don’t go overboard combining colors.

Extreme Contrast

Extreme contrast can be a great option if you’re working with display or script typefaces. In these instances, it can be difficult to find typefaces with good contrast that aren’t too dissimilar. So rather than trying to do that, go for completely different typefaces. Try combining a rather simple typeface with something more elaborate for the best results, rather than two elaborate typefaces.

Mood

The mood of the typefaces you select is vital to the way they work together. Mood can be anything from formal to casual, fun to serious, modern to classic, or anything in between. This is where a lot of people run into trouble with combining typefaces. Selecting typefaces that not only have similar (or complementary) moods, but also have moods to match the project you’re designing is crucial.

Examples

Oak Street Bootmakers
Oak Street Bootmakers Uses a combination of Hoefler Text and Franklin Gothic, both of which are very classic typefaces. It creates an image that is steeped in tradition.

Pound & Grain
Pound & Grain combines two serif typefaces, as well as a sans serif on their home page. The two serifs work well together because they belong to different sub-classes.

Burciaga
Burciaga combines three distinct typefaces: Droid Serif, Georgia, and Dancing Script. Droid Serif and Georgia work surprisingly well together, and Dancing Script adds extra elegance.

Stuart Bicknell Photography
Stuart Bicknell Photography uses font size and style to create contrast on the site, depsite the fact that virtually all of the typography is Times New Roman (there are a few small touches of Arial).

Foundation Six
Foundation Six uses a mix of Clarendon and Helvetica Neue, which creates a modern but still conservative look.

CalebAcuity Americas
CalebAcuity Americas uses a combination of YanoneKaffeesatzBold and Lucida Sans. It’s a very modern look, and a great example of how to successfully combine sans serif typefaces.

Analog
Analog is a great example of a site that uses a single typeface, but uses styles, colors, and scale to create contrast.

Thor Datacenter
Thor Datacenter combines a few typefaces, including AllerDisplay, JournalRegular, and Arial. The addition of a script font like JournalRegular to the otherwise sans serif typography palette results in a much more casual and inviting feeling to the site.

47 Degrees
47 Degrees combines LeagueGothic with ChunkFive and Helvetica for a very modern, casual style. They also use Museo300 sparsely on their site, which adds more visual interest.

Logo Nest
Logo Nest combines a huge number of typefaces on their site to create a vintage look. They keep everything unified, though, through color (virtually all the type on the site is either black or white).

More Resources:

• Typographic Contrast and Flow
  From WebDesignerWall. Covers the basics of contrast in typography.
• Typographic Contrast and the Web
  A very comprehensive aritcle that covers the basics of typographic contrast as it pertains to web design.
• Focus on Typography, Part 1: Contrast
  From SitePoint, this article covers all the basics of contrast, fully illustrated.
• A Guide to Web Typography
  A fantastic, comprehensive article covering web typography from I Love Typography.
• 29 Principles for Making Great Font Combinations
  A list-style post that covers some excellent rules for combining typefaces.

(ik)

Body copy makes up the majority of many websites. Headlines and other bits of typography are often considered more fun to design, or more artistic, but without a good design for your body copy, your overall project will suffer.

Body copy design requires you to consider two separate parts: character styles, and paragraph styles. Proper use of special characters can greatly increase the level of professionalism in your designs. And good paragraph styling can make a huge difference in readability, and therefore the amount of time someone is willing to spend reading your copy.

Using Special Characters

There are a number of special characters you can use in your typography designs that add a level of polish and sophistication that is lacking from many designs. Incorporating these characters takes some extra time on the part of the designer, but the end result is almost always worth it.

Ligatures

Ligatures are sometimes considered antiquated, and don’t show up often in web type. They’re not seen much more often in print design, either. But if your goal is to create a typographic design that has an antique, traditional, or very formal look, adding ligatures can be a fantastic way to reinforce that design style. Ligatures can also improve readability among certain characters, in certain fonts (especially italics and obliques).

If you want to use ligatures in your designs, there’s a great CSS declaration you can use to implement it in Safari, Webkit-based browsers, and Chrome: text-rendering: optimizeLegibility;. Firefox is already using this rendering setting for font sizes over 20px. There are a few glitches with using this declaration, which are detailed in the Aesthetically Loyal article about Cross-Browser Kerning-Pairs and Ligatures.

Ligatures are most commonly used for the following character pairs (shown regular and italic):

Hyphens and Dashes

Hyphens and dashes are two of the most improperly used characters in typography. Hyphens should only be used when hyphenating words. There are two different kinds of dashes: the en-dash and the em-dash. An en-dash is shorter, roughly the width of the letter “n” in a particular font (hence, the name). An em-dash is wider, roughly the width of the letter “m”.

En-dashes should be used when showing a range (such as January–March) or when creating an open compound word (South Carolina–Georgia border). To create an en-dash, just use –. The em-dash is used mostly in informal writing, and can replace commas, semicolons, colons, and parentheses. They’re often used instead of commas to set apart independent clauses or an abrupt change of thought. To create an em-dash, use —.

Smart Quotes

Smart quotes (sometimes also called “curly quotes”) are quotation marks that turn in toward the text they surround. There are both double and single smart quotes, and each requires a different html code. Smart quotes are often created automatically in word processing programs, but can be a huge pain for web typography.

Some CMSs, like WordPress, automatically convert quotes to smart quotes. While this is good in most cases, it can also cause problems, especially if you post code snippets on your blog (as you don’t want code snippets to contain curly quotes). In general text, though, you’ll want to use smart quotes for a more polished look in your body text.

Ampersands

Ampersands (‘&’) are another special character that are sometimes used in typographic designs. To create an ampersand, just use &. They work well in headlines and similar short blocks of text, but aren’t really appropriate for body text (despite the fact that many people seem to use them that way).

Ampersands are appropriate for use artistically, or in instances where space is limited (like in a table). Don’t use an ampersand just as an abbreviation for the word “and”. If using an ampersand artistically, you may find that ampersands in italic fonts are more attractive than their regular counterparts. Italic ampersands tend to follow the older style, and closely resemble the letters “e” and “t”, which make up the Latin word “et” (which translates to “and”).

Other Special Characters

Other special typographic characters include things like trademark (â„¢), registered (‘®’), and copyright (‘©’) symbols, tildes (‘Ëœ’), and pilcrows (‘¶’), among others.

If you use any of the above characters, make sure you use the proper entity codes for a professional and polished final result. About.com has an extensive table of entity codes for various typographical symbols and punctuation marks that makes a great quick-reference guide.

An additional note about pilcrows: using these rather than actual paragraph breaks can be an interesting technique for article intros that consist of multiple short paragraphs. Just make sure that you don’t use them throughout a long document, as they convert the entire document into one long text block, which is harder to read, especially onscreen.

Character and Word Spacing

The space between characters and words can be broken down into a few different areas. The basics are kerning, tracking, and word spacing. Kerning, which is the space around specific characters, is generally done automatically within individual font files. Programs like Photoshop or InDesign give you some control over kerning between individual characters, but on the web it’s mostly impractical.

Tracking is similar to kerning, but isn’t character-specific. The tracking can be adjusted easily with CSS, using letter-spacing. For the most part, adjusting the tracking of your text shouldn’t be overdone. But it can be used to great effect in small blocks of text. It’s most often seen in headlines or menus. Overdoing it can result in text that is difficult to read.

One place you’ll always want to use letter spacing is between strings of capital letters (includings small caps) and strings of numbers. Set a letter spacing of around .1em between capital letters, small caps, or numbers to improve legibility.

Word spacing can greatly improve readability if done correctly, as it makes word recognition easier. People often read words just by recognizing their shapes, and increasing the space slightly around each word can speed up this process. Word spacing is accomplished in CSS with word-spacing. Word spacing, by default, is .25 ems. It should be specified in ems, so that it adjusts according to text size. Also, word-spacing adjustments are made in relation to the default spacing. So if you specify a word spacing of 0.25 em, you’re actually getting a space of .5 em between words.

Paragraph Formatting

The paragraph is often referred to as the most basic unit of language that has meaning. Paragraphs are the building blocks of text content, and yet all too often, designers do little more than specify the font face and size. There’s a host of other formatting options we should be considering when we format our paragraphs.

There are a few things to take into consideration beyond the choice of typeface. The goal of typography at the paragraph level is to create text that is highly readable. To that end, we need to consider the alignment of our text, as well as the line spacing and line width.

Alignment

There are four basic alignment types: left, right, center, and justified. As a general rule, centered type is harder to read. It’s fine for headlines or things like photo captions. But for paragraphs, it’s not suitable. This is due to the fact that ragged edges on the left-hand side of a paragraph reduce legibility (because readers have to search for the beginning of each line).

Right-aligned text presents the same problem as centered text for paragraphs. As a general rule, stick to either left-aligned or justified alignment for long blocks of text.

Line Height and Leading

In the days of hand-set print type, leading referred to the space between lines. The term comes from the literal strips of lead that were used to put extra space between lines of letters. Line height is similar to leading, except it refers to the overall height of lines, including the letters and space above and below them.

In CSS, you can adjust the line height to whatever you want. Line heights that are anywhere from 1.2x to 1.8x as tall as the text itself are generally the most readable. For example, if your text is 12px high, then your optimal line height would be between roughtly 14px and 22px. Play around with line heights until you find something that looks good for your particular project.

You can see here how much easier text is to read at a taller line height.

Line Width

There are a few different theories regarding the perfect line length. Of course, the specifics between each vary. There are three basic ideas, though:

• Line widths of roughly twelve words.
• Line widths of roughly 39 characters (alphabet-and-a-half rule).
• The points-times-two rule (which requires some math to convert it to work for the web).

The last one is really the only one that requires any explanation. If you multiply the size of your point times two, and then use that in picas rather than points, you’ll get your line width. In print design, this is easy enough to figure out. If, for example, your text height is 11 points, you’d have a line length of 22 picas (or just over 3.5″).

It takes an extra step to convert that to web use. Take that pica measurement you just got (multiply your text’s pixel size rather than points), and multiple it by 12 (because there are 12 points in a pica), and that will give you your line width in pixels.

For some examples of fantastic paragraph styles, check out Jon Tan’s 12 Examples of Paragraph Typography.

Great Paragraph Typography in Practice

Vogue Magazine

The typography used in the paragraphs on the Vogue Magazine site has an obvious focus on readability. Generous line heights and a 14px font make reading even long blocks of text a breeze onscreen. In addition to the type size and spacing, using a very dark gray also makes the type more readable.

The basic code for this paragraph style is:

p {color: #333333; font-size: 14px; line-height: 24px; text-align: justify; font-family: Georgia,"Times New Roman",Times,serif;}

Sleepover, San Francisco

Sleepover applies a number of excellent attributes to their paragraph styling. First of all, headings are the same size as the body copy, but capitalized, with proper letter spacing:

{letter-spacing: 2px; text-transform: uppercase;}

The paragraphs themselves are also well-formatted. Font size is kept to 1 em, with a 1.85em line height (slightly larger than “normal”). The gray letter color is very easy on the eyes, though it might be too light for the taste of some. The added line height is extra important in cases like this, where there are other stylistic choices that might decrease readability. Here’s the basic paragraph code:

p {font-size: 1em; line-height: 1.85; color: #666666; text-align: justify; font-family: "Century Schoolbook",Century,Georgia,serif;}

Salt of the Earth

Salt of the Earth uses a larger font than is commonly seen for body copy. They also use very generous line heights. Rather than lowering the contrast of the type by lightening the font, they’ve opted to use a darker background and a black font. It still results in easier-to-read text than black on white would be. Ample spacing between paragraphs is also used, which adds to scanability and breaks up long blocks of text.

The basic styles for this paragraph are:

p {font-family: Georgia,"Times New Roman",Times,serif; font-size: 16px; line-height: 30px; margin-bottom: 30px;}<

The Design Cubicle

The Design Cubicle uses what looks like a smaller font than any of the other examples here, and yet maintains similar readability. The other main difference here is that they use a sans-serif typeface (and an @font-face font, rather than a web-safe font), which is arguably more readable onscreen (the reverse is usually considered true with print typography). Contrast is good, with a medium gray background and a dark gray font.

Here’s the basic code for this paragraph style:

p {margin-bottom: 1.5em; font-size: 14px; line-height: 21px; font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2",Verdana,sans-serif; font-weight: 400; color: #232D32;}

In Part 3…

We’ll talk about how to combine different typefaces, based on sound typographic design principles like weight and contrast, building on what we’ve covered here and in part 1.

Additional Resources

• The Elements of Typographic Style Applied to the Web
  A very comprehensive guide to typography, that has plenty of information about spacing, rhythm, vertical motion, and more.
• The Paragraph in Web Typography & Design
  A fantastic article on various paragraph styles from Jon Tan.
• HTML Accent Entity Codes
  A fairly comprehensive chart of entity codes for inserting special characters into HTML.
• Top Ten Web Typography Sins
  Our own article on some of the pitfalls of web typography, including plenty of information on using special characters.

Typography could be considered the most important part of any design. It’s definitely among the most important elements of any design project. And yet it’s often the part of a design that’s left for last, or barely considered at all. Designers are often intimidated by typography, which can result in bland typographical design or a designer always using one or two “reliable” typefaces in their designs.


This series aims to change that. If you’re intimidated by typography, or even just aren’t quite sure where to start, then read on. We’ll break down typographic theory and practice, starting with the basics (so that everyone starts on the same page).

In this part, we’ll talk about the basics of typographic theory, including the different kinds of typefaces (and how typefaces and fonts differ), as well as the basic anatomy of a typeface. And each part will also offer more resources for delving deeper into typography.

Typefaces vs. Fonts: Difference?

A lot of people use the terms “typeface” and “font” interchangeably. But they’re two very distinct things. Before we get started talking about typography, let’s get our terms straight.

A typeface is a set of typographical symbols and characters. It’s the letters, numbers, and other characters that let us put words on paper (or screen). A font, on the other hand, is traditionally defined as a complete character set within a typeface, often of a particular size and style. Fonts are also specific computer files that contain all the characters and glyphs within a typeface.

When most of us talk about “fonts”, we’re really talking about typefaces, or type families (which are groups of typefaces with related designs).

Classifying Type

There are a number of different ways to classify typefaces and type families. The most common classifications are by technical style: serif, sans-serif, script, display, and so on. Typefaces are also classified by other technical specifications, such as proportional vs. monospaced, or by more fluid and interpretational definitions, such as the mood they create.

Serif

Serif typefaces are called “serifs” in reference to the small lines that are attached to the main strokes of characters within the face. Serif typefaces are most often used for body copy in print documents, as well as for both body text and headlines online. The readability of serifs online has been debated, and some designers prefer not to use serifs for large blocks of copy.

Within the serif classification, there are many sub-types. Old Style serifs (also called humanist) are the oldest typefaces in this classification, dating back to the mid 1400s. The main characteristic of old style characters is their diagonal stress (the thinnest parts of the letters appear on the angled strokes, rather than the vertical or horizontal ones). Typefaces in this category include Adobe Jenson, Centaur, and Goudy Old Style.

Transitional serifs date back to the mid 1700s, and are generally the most common serif typefaces. Times New Roman and Baskerville are both transitional serifs, as are Caslon, Georgia, and Bookman. The differences between thick and thin strokes in transitional typefaces are more pronounced than they are in old style serifs, but less so than in modern serifs.

Modern serifs, which include typefaces like Didot and Bodoni, have a much more pronounced contrast between thin and thick lines, and have have a vertical stress and minimal brackets. They date back to the late 1700s.

The final main type of serif typeface is the slab serif. Slab serifs have little to no contrast between thick and thin lines, and have thick, rectangular serifs, and sometimes have fixed widths. The underlying characters hapes often more closely resemble sans serif fonts.

Sans-Serif

Sans-serif typefaces are called such because they lack serif details on characters. Sans-serif typefaces are often more modern in appearance than serifs. The first sans-serifs were created in the late 18th century.

There are four basic classifications of sans-serif typefaces: Grotesque, Neo-grotesque, Humanist, and Geometric. Grotesques are the earliest, and include fonts like Franklin Gothic and Akzidenze Grotesk. These typefaces often have letterforms that are very similar to serif typefaces, minus the serifs.

Neo-grotesque typefaces include some of the most common typefaces: MS Sans Serif, Arial, Helvetica and Univers are all neo-grotesques. They have a relatively plain appearance when compared to the grotesques.

Humanist typefaces include Gill Sans, Frutiger, Tahoma, Verdana, Optima, and Lucide Grande. These are more calligraphic than other sans-serif typefaces, and are also the most legible (hence the popularity of some of them for website body copy). They’re more calligraphic than other sans-serifs, meaning they have a greater variation in line widths.

Geometric sans-serifs are more closely based on geometric shapes. Generally, the “O”s in geometrics will appear circular, and the letter “a” is almost always simple, just a circle with a tail. They’re the least commonly-used for body copy, and are also the most modern sans-serifs, as a general rule.

Script

Scripts are based upon handwriting, and offer very fluid letterforms. There are two basic classifications: formal and casual. Formal scripts are often reminiscent of the handwritten letterforms common in the 17th and 18th centuries. Some scripts are based directly on the handwriting of masters like George Snell and George Bickham. There are modern creations, too, including Kuenstler Script. They’re common for very elegant and elevated typographical designs, and are unsuitable for body copy.

Casual scripts more closely resemble modern handwriting, and date back to the mid-twentieth century. They’re much less formal, often with stronger strokes and a more brush-like appearance. Casual scripts include Mistral and Brush Script.

Display

Display typefaces are probably the broadest category and include the most variation. The main characteristic is that they’re unsuitable for body copy and are best reserved for headlines or other short copy that needs attention drawn to it. Display typefaces can be formal, or informal, and evoke any kind of mood. They’re more commonly seen in print design, but are becoming more popular online with the use of web fonts.

Also included among display typefaces are blackletter typefaces, which were the original typefaces used with the first printing presses. Since that time, better, more readable fonts have been developed.

Dingbats and Specialty Typefaces

Dingbats are specialty typefaces that consist of symbols and ornaments instead of letters. Wingdings is probably the best-known dingbat font, though there are now thousands, often created around themes.

The typeface above is Jellodings.

Proportional vs. Monospaced

In proportional typefaces, the space a character takes up is dependent on the natural width of that character. An “i” takes up less space than an “m”, for example. Times New Roman is a proportional typeface. In monospace typefaces, on the other hand, each character takes up the same amount of space. Narrower characters simply get a bit more spacing around them to make up for the difference in width. Courier New is one example of a monospace typeface.

Mood

The mood of a typeface is an important part of how it should be used. Different typefaces have strikingly different moods. Commonly used moods include formal vs. informal, modern vs classic/traditional, and light vs dramatic. Some typefaces have very distinct moods. For example, Times New Roman is pretty much always going to be a traditional font, which is why it’s so commonly used for business correspondence. Verdana, on the other hand, has a more modern mood.

Some typefaces are more transcendent, and can convey almost any mood based on the content and the other typefaces they’re combined with. Helvetica is often considered one such font.

Weights & Styles

Within the majority of typefaces, you’ll find more than one style and/or weight. Weights are often classified as “light”, “thin”, “regular”, “medium”, “bold”, “heavy”, or “black”. Each of these refers to the thickness of the strokes that make up the characters:

There are three general styles you’ll find with many typefaces: italic, oblique, and small caps. Small caps are often used for headings or subheadings, to add variety to your typography if using a single typeface.

Italic and oblique are often confused or used interchangeably, but are two distinct styles. Oblique type is simply a slanted version of the regular characters. You could create this using the “distort” function in Photoshop, although sometimes a separate oblique font is included within a typeface. Italics are slanted like obliques, but are actually a separate set of characters, with their own unique letterforms.

The Anatomy of a Typeface

The different letterforms within a typeface share a few common characteristics. These characteristics can be important in determining whether two (or more) typefaces work well together, or clash. Here are the most basic parts of a typeface:

The above image shows the different guidelines that are generally present in a typeface. The baseline is the invisible line that all the characters sit on. Rounded letters sometimes sit just a tiny bit under the baseline, and descenders always drop below this line. A given typeface will have a consistent baseline.

The meanline is the height of most of the lowercase characters within a typeface, and is generally based on the lowercase “x” if there are varying heights among the lowercase characters. This is also where the term “x-height” comes from. The cap height is the distance between the baseline and the top of uppercase letters like “A”.

The above illustration shows three common parts to letterforms. The stem is the main upright of any letter, including the primary diagonal. It’s could be considered the anchor of the character. The bar is any horizontal part, which are sometimes also called arms. The bowl is the curved part of a character that creates an interior empty space. The inside of a bowl is a counter.

The ascender of a lowercase character is any part that rises above the meanline, such as the uprights on the letters “d”, “h”, and “b”. Descenders are the parts of a lowercase character that drop below the baseline, such as in a “p”, “q” or “g”.

Serifs are the extra flourish at the end of a stroke on serif typefaces. Some typefaces have very pronounced serifs, while others are barely distinguishable.

The aperture of a character refers to the opening at the bottom of some characters, such as the uppercase “A” or lowercase “m”. An ear is a decorative extension on a letter, as highlighted on the “g” above. Hairlines are the thinnest part of a serif typeface.

Crossbars are horizontal strokes, as found on the uppercase “A” and “H”. Terminals are only found on serif characters, and are the end of any line that doesn’t have a serif. Loops are found on some lowercase “g” characters, and can be fully closed or partially closed.

Spurs are tiny projections from curved strokes, such as on some uppercase “G” characters. Links connect the top and bottom bowls of a double-stacked lowercase “g”. The spine is the curved stroke found on the letter “s”.

Tails are sometimes-decorative descending strokes, as seen on an uppercase “R”. Finials are the tapered endings of some strokes. Shoulders are any curved stroke that originate from a stem.

In Part 2…

Next Monday we’ll discuss paragraph composition and using special typographic characters, like ligatures and hyphens. We’ll dive right into basic typographic layouts, and how to decide on a typeface for your project. Stay tuned!

Additional Resources

• Anatomy of a Typeface - An excellent graphical reference for the parts of a typeface’s characters.
• Type is Sexy - This site has a great section on the anatomy of a typeface.
• Which Font? Voice of Typography - This article discusses the voice (mood) of typefaces, and how they impact a design.
• Type Classificiations - A visual representation of the different typeface classifications, from the Adobe Type Library.
• ABC Typography – A Virtual Type Museum - This site offers a museum-style history of typefaces, including classification information.

(ik)

Architecture surrounds us everyday, and because of that we sometimes overlook it as a potential source of inspiration. But architecture and interior design can inspire us for virtually any project. There are dozens of architectural styles out there, both formal and informal, to appeal to almost every taste.

We’ve rounded up more than forty great resources for you that should make finding inspiration in architecture child’s play. If you don’t feel like looking at your local architecture for inspiration or simply don’t have the time, turn to one of these sources instead!

Flickr Groups

There are literally hundreds of Flickr groups dedicated to architecture and interior design. And as it is with all Flickr groups, some are of higher quality than others. Below are ten of the more interesting Flickr groups dedicated to architecture and/or interior design.

Holga Architecture

The images featured in this group were taken with Holga (or Holga-style) cameras, resulting in a very interesting visual style that adds to the inspirational nature of the subjects.

! Interior Design & Architecture

The ! Interior Design & Architecture Flickr group is one of the more diverse architecture groups on Flickr. The group’s pool has over 10,000 photos, including everything from interior and exterior shots of homes to design sketches and photos of churches and other public buildings.

Sydney Architecture

The Sydney Architecture group includes more than 4,000 images of the city of Sydney, Australia. Both interior and exterior spaces are included.

Architecture (Clean Shots)

This is another diverse group that showcases architecture from around the world, with a definite focus on exterior shots. Virtually every style is included, from Classical to Modern, in the more than 15,000 photos in the group.

1950s Interior Design and Residential Architecture

If you’re inspired by mid-century modern and other styles common on the ’50s, this is the group for you. Images include both authentic photos and sketches from the era as well as more modern images of 50s style.

Cinema Architecture

The Cinema Architecture group on Flickr showcases theater and cinema architecture from around the world. There are currently over 12,000 photos included.

Victorian Interior Design and Residential Architecture

This Flickr group focuses on the design of Victorian-era homes, with images of everything from entire houses to architectural details.

Details of Modern Architecture

The Details of Modern Architecture group includes more than 36,000 close-up images of modern architecture details.

Architecture – Rationalism

The Architecture – Rationalism group features more than 1400 images of rationalist architecture, including both photos and sketches.

Brutalist Architecture

This group showcases brutalist architecture from around the world. Brutalism was a direct response to the early modernists that focused largely on smooth white walls; brutalist structures focused on architectural honesty and exposing the raw materials a building was constructed with.

Architecture & Interior Design Blogs

There are thousands of architecture and interior design blogs online. Some focus on general architecture with a wide variety of styles, while others serve very specific niches. What the best ones all have in common, though, are the beautiful images and perspectives they serve up on a regular basis. Perfect for finding inspiration.

Desire to Inspire

Desire to Inspire covers largely interior design. They include mid-century modern, eclectic, modern and some traditional designs, with plenty of images in every post. Their alphabetically ordered blogroll provides you with many additional sources, should you need them.

Velvet & Linen

Velvet & Linen is the blog of Giannetti Home, an interior design firm based in Los Angeles. Their blog covers high-end interior design, often with a focus on antiques beautifully presented in high resolution photography. Be sure to check out their extensive blogroll for more architecture and interior design sites.

Materialicious

Materialicious aggregates content from a variety of other blogs and focuses on both architecture and interior design, with occasional features on other areas of design. Recent posts have included the 100th anniversary of Alfa Romeo, paper shoes, technology in spas, and the H2ome Yachting Villa. Be prepared to recieve multiple inspirational thrusts a day.

CubeMe

CubeMe is a blog focused entirely on modern architecture and design. They cover furniture, residential and commercial architecture, home accessories, artwork, and more. Exceptional curiosities make the site worth a regular visit.

Design Milk

Design Milk covers art, architecture, interior design, and more, with a decidedly modern slant. They also have features on technology, fashion and style.

Inhabitat

Inhabitat covers green architecture and related products and technology. They often feature some of the most extreme green and sustainable architectural concepts out there. The majority of their posts come with tons of photos and images, perfect for inspiration.

DigsDigs

DigsDigs showcases mostly interior design, with a focus on products, though they also feature plenty of photo posts showing interior and exterior spaces. A regular feature shows off small space interiors, mostly apartments. Get ready to discover some really astounding ideas.

Archinect

Archinect includes feature articles, image galleries, discussions and other architecture-related content. They cover both interior and exterior design, as well as products and interviews with prominent people in the industry. Those interested in more might want to check out the site’s literature section.

A Daily Dose of Architecture

A Daily Dose of Architecture showcases beautiful buildings from around the world. The focus here is definitely on exteriors, though they occasionally feature other content.

BLDGBLOG

BLDGBLOG got it’s start back in 2004. They showcase architecture as well as interesting projects and products related to interior and exterior design (like “The Migration of Mel and Judith”, an entire narrative told on the inside of a lamp shade).

Apartment Therapy

Apartment Therapy showcases the best in small-space living, mostly focusing on interior design. They cover products, design concepts, and room designs, and occasionally feature video content.

Design*Sponge

Design*Sponge focuses largely on interior design, with a definite focus on more handcrafted items and designs, though still with a modern flair. Each post is filled with inspiring images, often of interiors that juxtapose unexpected elements.

Design Observer

Design Observer features all areas of design and culture. They regularly feature architecture and interior design, including their regular “Accidental Mysteries” feature, which showcases oddities on a weekly basis.

Modern Architecture & Design News

Modern Architecture & Design News showcases the best new modern design from around the world. Their posts are filled with images to inspire, and they post new content a couple times each day.

Earth Architecture

Earth Architecture covers buildings created from natural, earth-based materials from all over the world. According to the site, “One half of the world’s population, approximately 3 billion people on six continents, lives or works in buildings constructed of earth.”

Contemporist

Contemporist covers architecture, furniture, interiors and other design-related topics. As the name suggests, the focus is primarily on contemporary and modern designs.

Tumblr Blogs

Tumblr often has some of the most forward-thinking blogs (or tumblogs) out there on any given topic, and architecture is no different. There are literally hundreds of fantastic architecture and interior design Tumblr blogs. Often there’s little commentary associated with posts, just beautiful image after beautiful image. Here are some of the best:

Picture Perfect Home

Picture Perfect Home showcases both interior and exterior design, with no real with no real style theme other than the fact the homes featured are beautiful.

Harmony in Design

Harmony in Design showcases a variety of interior and exterior images, mostly with a traditional style, though there are some modern gems interspersed.

My Little House

My Little House showcases mostly interiors, and as the name suggests, small spaces.

Architizer

Architizer features some of the most interesting modern and conceptual architecture out there, with a focus on buildings that break traditional boundaries.

Simplypi

Simplypi offers daily posts on architecture, arts, design, product design, and more, though there seems to be a definite slant toward architectural images.

Architectural Models

Architectural Models showcases amazing models of architecture in a variety of styles and materials. It’s a departure from more traditional architecture blogs, which adds even more potential for inspiration.

Architectural Inspiration

This Tumblr blog showcases interior and exterior photos, as well as detial shots of particular architectural details. A wide variety of architectural styles are included.

Cabbage Rose

With a name like Cabbage Rose, you’d probably expect a blog focusing on “Shabby Chic” or similar country interiors. But you won’t find that here: this Cabbage Rose focuses on mostly modern and eclectic interiors.

The Architecture Blog

The Architecture Blog showcases residential and commercial architecture, with both interior and exterior shots. Most of the buildings featured are modern, though there are a few more traditional images.

Loftylovin

Loftylovin showcases open-plan living spaces from around the world, including both modern and more traditional interiors.

Interior Decline

Interior Decline showcases beautiful interiors. There are a variety of styles included, though they all have one thing in common: luxury.

Baan

Baan, which means house or home in Thai, features gorgeous interiors and designs from around the world. There’s a definite organic feel to most of what they feature, though the styles are eclectic.

Home Sweet Home

A huge variety of styles are featured on the Home Sweet Home tumblog. Images include interiors and exteriors, most of which have a very “homey” feel to them, as would be expected by the title.

My Ideal Home

My Ideal Home features a variety of home styles, with both interior and exterior photos. Many of the images are light and airy, and there seems to be an abundance of interiors in mostly white.

Nice*Room

Nice*Room shows off interior images, most of which are fairly traditional and casual.

If you have any other favorite architecture inspiration resources, please share them in the comment section below!

(sp) (ik)