BlogmyQuery – BMQ

The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, analyzed, curated and feature latest useful resources for your convenience, so you can use them right away or save them for future reference.

Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use HTML5, JavaScript, or JavaScript-libraries as well. Thanks to all featured designers and developers for inspiring, hard work.

CSS Techniques

Rotational Sliders
Eric Meyer shares six of his animated transforms that are capable of sliding around to a particular extent with non-centered transform origins.

Generating Organic Randomness with Prime Numbers and CSS
At first, you may be wondering why the heck is Alex Walker talking about cicada’s and Web design. Once taking a closer look, a sort of connection between the two evolves and a ‘cicada principle’ is born.

CSS3 3D Hologram
Being inspired by holographic effects that can be achieved with HTML/CSS, Hakim El Hattab has developed his own 3D box which alters perspective depending on device orientation. Note that this requires a webkit browser and has only been tested on iPhone. Also make sure to visit more of Hakim’s CSS/HTML5 experiments.

Checkerboard, striped & other background patterns with CSS3 gradients
You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more. Also, check out Lea’s CSS3 Patterns Gallery

CSS3 Keyboard
Click in the box and start typing on your computer’s keyboard. Cleverly developed by Dustin Cartwright and Dustin Hoffman. You’ve got to respect the amount of time and effort which went into producing this demo.

CSS3 Progress Bars
A couple of nice progress bars created by Chris Coyier that use no images — just CSS3 fancies. In browsers that do not support CSS3, these progress bars will look more simplified.

Hover on “Everything But�
A tutorial by Chris Coyier which shows us how easy adding a hover state to an element can be. In this case, the hover state is applied to everything but the element actually being hovered over.

Creating a Sphere With 3D CSS
With CSS3’s 3D trans­forms it’s possible to cre­ate a sphere-like object, albeit with many elements. Paul Hayes shares his version of a 3D CSS sphere (works in the latest Safari and iOS) and provides us with the coding needed.

CSS3 Planetarium
This demo highlights leading edge CSS3 and HTML5 features that Mozilla Firefox and the open web community push into modern Web browsers.

Natural Object-Rotation with CSS3 3D
A tutorial by Dirk Weber that teaches us how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. By adding some Javascript, we can make the object freely rotatable in 3D space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.

CSS Drop-Shadows Without Images
Nicolas Gallagher shares presents his CSS drop-shadows without any images.

Incrementable Length Values in Text Fields
Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it.

Beveled Corners & Negative Border-Radius with CSS3 Gradients
Beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10.

Flexible Height Vertical Centering With CSS, Beyond IE7
Roger Johansson shares his thoughts on how to improve centering an element both horizontally and vertically with the display:table alternative.

Coding up a semantic, lean timeline
This article tells you how to create a semantic lean timeline.

CSS Border Tricks with Collapsed Boxes
These border tricks tricks will help you to display content outside of the content box, over borders, without the use of images, CSS3 gradients or extraneous markup.

Quick Tip: Nonintrusive CSS Text Gradients
Jeffrey Way shows some ways for creating pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.

Bokeh with CSS3 Gradients
Divya Manian uses the CSS gradients and shows the results of his work on a project which uses a bunch of circles as a decorative background.

Different Transitions for Hover On / Hover Off
Chris Coyier tries to acchieve “different transitions on mouseenter and mouseleave”, but he isn’t using JavaScript here; we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.

Styling children based on their number, with CSS3
Lea Verou shows how to style children of elements based on their total number (that is, their total count).

CSS Modal
Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more special. The problem: when you hit the “Back”-button after the modal has popped up and was closed, you’ll see the modal again. But maybe you’ll come with a way to fix it?

Rotating Feature Boxes
The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation.

When and How to Visually Hide Content
Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). Other exaples about using the Visually Hide Content are shown in this article.

How to avoid common CSS3 mistakes
The new features of CSS3 bring with them complexity and new things for us to screw up. This article will help keep us in check as we start using these new features.

Introduction to CSS Escape Sequences
Escape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules. In this article Mert Tol shows how to use these sequences.

Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, you can just apply a carefully crafted chunk of CSS code to any block-level element .

CSS Generated Content
Trevor Davis shows on some examples what you can do with the CSS generated content.

Controlling width with CSS3 box-sizing
An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not. It makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.

Revisit Hardboiled CSS3 Media Queries
Shi Chuan takes a close look at boilerplates and helps us understand the math we need to tweak the width required for a good resolution to any particular device.

iPad Orientation CSS
Keith Chu revises Cloud Four’s work and finds a way to alleviate extra HTTP requests, not iPad-specific as well as lack of reusability. In this post, he shares with us his proposed revision to the iPad orientation CSS.

CSS Value Lengths, Times, Frequencies and Angles
In this article the authors go over all the math type units that can be applied as property values in CSS.

CSS Tools

320 and up
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

CSS3 Generator – By Eric Hoffman and Peter Funk
This generator was proudly designed by Eric Hoffman and coded by Peter Funk.

CSS Pattern Generator
Patternify is a simple pattern generator that enables you to not only build your patterns online, but export them with the base64 code, so you don’t even need an image file anymore. Just include the code in your CSS and you’re ready to go. Created by Sacha Greif.

Griddle.it – Web page alignment made easy
A clean and simple way to help align your layouts. No complex grid frameworks necessary.Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

The 1140px Grid: Fluid down to mobile
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Fighting the @font-face FOUT
Paul Irish’s 2011 update for the @font-face FOUT issue. Good news: Firefox 4 has no FOUT, IE9 does, and FOUT-b-GONE will help you out with that.

CSS3 Github Buttons
CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.

CSS3 Facebook Buttons
CSS3 Facebook Buttons

Minimee
On the Internets, speed is everything – which means that when it comes to CSS & Javascript files, size DOES matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files svelte.

Live.js
one script closer to designing in the browser.

Bootstrap.less
Bootstrap is a pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

Animatable: Create CSS3 animations and advertising for Webkit browsers
Animatable is the easy way to create CSS3 animations and advertising for Webkit browsers on any platform or device — including Android, BlackBerry, iOS and WebOS.

Ceaser: CSS Easing Animation Tool
Ceaser is an CSS Easing Animation Tool.

Shower
This is provided without warranty, guarantee, or much in the way of explanation.

CSS Pivot
This tool allows you to add CSS styles to any website, and share (and adjust) the result with a short link.

Roots WordPress Theme
Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.

Free Online CSS3 Typeset Style Generator
An advanced generator of CSS buttons; the tools allows you to define font and color variations, shadows, borders, corners etc.

CSSPrefixer
You hate writing vendor prefixes for all browsers? The CSSPrefixer does it for you.

Type-a-file
This tool will give your Web typography a head start. Type-a-file is essentially a small collection of CSS stylesheets with heavy focus on rich and beautiful typography. The tool uses Typekit to preview the stylesheets, so if you have a Typekit-account, you could purchase the font license and have exact the same typography on your website.

A Best Practice Baseline for Your Mobile Web App
Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Code Beautifier
This tool allows you to format, clean up and optimize your stylesheets.

Markup Generator
Markup Generator is a simple tool created for HTML/CSS coders that are tired of writing boring frame code at the very beginning of slicing work.

CSS Sprite Generator
This tool allows you to create and maintain your CSS sprites.

Respond
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Adapt.js – Adaptive CSS
Adapt.js simply checks the browser width, and serves only the CSS that is needed, when it is needed.

Firmin, a JavaScript animation library using CSS transforms and transitions
Firmin is a JavaScript animation library that uses CSS transforms and transitions to create smooth, hardware-accelerated animations.

Command-line CSS spriting
The author shows, how to create CSS sprites from the command line alone.

Last Click

Code Standards
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.

How to Manage CSS Explosion
A very useful thread on StackOverflow on how to keep CSS files organized and clean.

Related Posts

CSS: Innovative Techniques and Practical Solutions
The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward.

(vf) (ik)

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS, css3, html5, javascript, techniques, tools

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 creating Web and app interfaces, most designers slave over every single pixel, making sure it’s got exactly the right color, texture and position. If you’re not careful, though, some common functions like moving, rotating and pasting can undo your hard work, resulting in a blurry mess. But with some small changes to your workflow, you should be able to maintain the highest-quality artwork from the start to the end of the project.

Pixel-Perfect Rotation

If you’re not careful, rotating layers in Photoshop can damage them in a very noticeable, pixel-mashing way.

When rotating layers with Free Transform (and some other tools) to exactly 90 or 270°, the quality of the outcome is determined by the layer’s size. If the layer is of an even width and even height, then you’ll be fine. If it’s of an odd width and odd height, you’ll also be okay. But if they’re of an odd width by even height or even width by odd height, then you’ll see something like the result below:

In this case, the artwork is 20 × 9 pixels: even-by-odd dimensions. The results for bitmap layers and vector layers are different, but they both produce unusable results because the origin of rotation doesn’t fall on an exact pixel boundary.

A Fix

Because even-by-odd or odd-by-even dimensions are the problem, we need a way to ensure that the contents of the layer are odd-by-odd or even-by-even. Probably any method you can think of will solve this problem, be it adding a square bitmap mask to a layer or adding more content to the layer that you’re rotating. You could also draw a square on another layer and rotate both at once.

As long as the dimensions for the layer or layers are even-by-even or odd-by-odd, it’ll be fine.

An Easier Fix

Changing the origin of rotation to the top left (or any other corner) will ensure it is on a pixel boundary, guaranteeing perfect results every time. To do this, click on a corner origin after selecting the Free Transform tool, but before rotating. This works brilliantly and is the simplest solution yet.

Bitmap and vector masks are affected by this issue as well, so please take care. But the issue affects only rotated layers, either via “Free Transformâ€� or “Transformâ€� under the Edit menu. Rotating the entire canvas via Image → Image Rotation has no problem.

To make things even easier, I’ve created some Photoshop Actions and Workflows that take care of everything for you.

Pixel-Perfect Vector Pasting

If you’ve drawn pixel-snapped artwork in Illustrator and pasted it into Photoshop as a shape layer, you may have noticed that the result is not quite what you expect (i.e. a perfectly sharp image), but rather a blurry mess. Here’s how to fix that.

Below is some artwork as it appears in Illustrator: perfectly formed, snapped to the pixel grid, and at the size we intend to use it in Photoshop.

Below are the same paths pasted into Photoshop a few times. Notice how only the top-left version is sharp, while the others are half a pixel out on the x axis, y axis or both.

What Went Wrong?

Photoshop’s pasting behavior works in one of two ways. If you’ve made a selection, then the clipboard’s contents are pasted so that the center of the clipboard is aligned with the center of the selection. If a selection hasn’t been made, then the contents are pasted so that the center of the clipboard aligns with the center of your current view. The level you’re zoomed into and the portion of the document you’re viewing determines the result.

A Fix

Our test artwork is 32 pixels wide by 12 pixels high. Drawing a 32 × 12 marquee selection in Photoshop forces the artwork to land exactly where we want it and to be pixel-aligned. This works every single time.

An Easier Fix

The marquee doesn’t have to be the exact size of your artwork, though. In our case, a 2 × 2-pixel selection would work just as well, because the center of an even-width-and-height marquee selection and the center of even-width-and-height clipboard contents would fall exactly on a pixel boundary, which is what we want. If the artwork was an odd width and height, then a 1 × 1 selection would have been required.

If you couldn’t be bothered noting your artwork’s dimensions, then by drawing an appropriately sized marquee, you can draw a 2 × 2-pixel selection and paste. If the image is blurry on the x axis only, make the selection 1 × 2 and paste again. If the image is blurry on the y axis only, make the selection 2 × 1 and paste again. If the image is blurry on both axes, make the selection 1 × 1 and paste again.

It may sound complex, but in practice it’s very quick; you’ll only ever have to paste twice to get sharp vector paths from Illustrator.

Smart Objects

Pasting elements as smart objects doesn’t come with the same issue (at least not in Photoshop CS5 anyway). I like to use Shape layers, though: they allow more control and editability and have better anti-aliasing.

Pixel-Perfect Vector Nudging

When nudging vector points, Photoshop exhibits some strange behavior, related to how far you’re zoomed in. At 100%, nudging with the arrow keys will move your vector point exactly 1 pixel. At 200%, nudging moves the point by half a pixel. At 300%, it moves by a third of a pixel.

The behavior seems intentional, but it’s not usually what I’m after. Most of the time, I want to nudge in whole pixel increments. Here’s how you can do that, without zooming out to 100%.

Open your document, and then create a second window by going to Window → Arrange → New Window. You can then resize the new window and place it out of the way.

Large view

Edit in the other window as normal, zooming in as far as you’d like. You’ll now be able to press Command + ` to switch back to the window that’s zoomed to 100%, nudge using the arrow keys, and then press Command + ` to switch back again. Because the other window is zoomed to 100%, nudging will move the selected vector points exactly 1 pixel.

Large view

Please note that holding Shift while using the arrow keys to nudge always moves by 10 pixels, no matter how far in you’re zoomed. Also, dragging points with the mouse will snap to pixels in most situations — most, but not all.

While not perfect, this technique does remove some of the frustration with editing detailed vector paths in Photoshop. Or maybe it’s just another reason why complex shapes should be drawn in Illustrator first, and then pasted as shape layers?

Take Charge Of Your Pixels

Using the correct techniques, it should be easy to place pixels exactly where you want. Remember, you’re the one in charge. Demand that they fall in line. Accept nothing less than pixel perfection.

Would you like to know more about a particular technique or Photoshop feature? Please let us know in the comments.

(al)

© Marc Edwards for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: photoshop, techniques, useful

Content, content, content. It’s an obvious part of any interactive experience. In fact, you’ve probably heard content is king, or queen, or some sort of royalty. Yet, content is elusive. Often, you don’t realize your content isn’t cutting it until it’s too late. Does any of this sound familiar?

• Delayed projects.
• Broken designs.
• Uneven voice.
• Low-performing landing pages.
• Dead social media channels.
• Customer confusion and service calls.

These problems and more are documented extensively,^[1] so I won’t dwell on them. What I will dwell on is the solution. But, first, let’s discuss the false ones.

Beware Of False Solutions

Just because someone articulates a problem well does not mean someone knows the solution. That’s when we’re susceptible to a false solution. In my many years of experience, I’ve found these two fake solutions to be very common, very distracting — and very disappointing.

SEO (Search Engine Optimization) Snake Oil

Oh, poor JC Penney. This major retailer fell victim to SEO snake oil, such as buying extensive link placements and other “black hat� techniques. And, JC Penney fell hard, with a detailed and brilliant expose of the situation making The New York Times, no less.

Now, besides avoiding embarrassment, I suggest that you avoid SEO snake oil because it will not bring you results. The spirit of a search engine is to find quality content. A search engine algorithm factors in signs of good content. When someone focuses on tips and tricks to game search engines instead of publishing quality content consistently over time, that person is missing the spirit of SEO. And, sooner or later, that person’s results will suffer for it. Google might punish the website or, more likely, the website will get the wrong kind of traffic, or visitors. If you drive lots of visitors to your content instead of attracting visitors who are interested in the content topics, you will be disappointed with the results.

And, now, a big caveat: I don’t think all SEO is bad. There are legitimate SEO concerns, techniques and advisors. Just remember that SEO tricks are not magic pills for your content ills. If you’re spending lots of time and money on SEO but not much on content, you’re on the way to disappointment.

Andy Budd recently discussed a closely related point of view in his recent article. He requests to “white hat� practitioners to distance themselves from the world of SEO, stop talking about search engine rankings and start helping clients deliver real value to their users. Therefore we should stop defining ourselves by the discovery medium and focus on the content itself, he rightfully argues.

Overpromised Technology

What else is not a magic pill? A technology product or feature alone. I see this false solution most often with larger companies, who put unrealistic expectations on products and tools such as a content management system (CMS), an analytics tool or a web application.  For example, a prospective client recently vented to me that his organization spent $100,000 on implementing a new CMS but absolutely nothing on planning and creating content worth managing. The result was a one-person Web team destined to fail with its brand new CMS. This short-staffed team was saddled with:

• managing every aspect of a very large website,
• responding to strange or political stakeholder requests for new content and
• dealing with the boss’s frustration with the lackluster content.

Sounds awful, right? Unfortunately, this situation is too common. And it needs to stop.

The Real Solution

No SEO trick and no technology product alone will solve the content problem for you. The real solution to the content problem is hard work that demands change in your (or your company’s) approach to planning, designing and developing interactive experiences. That’s what gets results. There’s no shortcut. And indeed, the path to content that counts is a hard road. But it cannot be the excuse for compromising the quality of experience we provide to our users.

Get Strategic

Content strategy is planning for every aspect of content to get results. That goes far beyond writing the copy. When getting strategic about content, focus on three key areas: analysis, editorial and architecture. While explaining content strategy in detail literally requires a book (or two or three), I’d like to share with you a concise introduction to each area in this article.

Figure 1: Content strategy usually involves analysis, editorial and architecture.

1. Analysis

Analysis is taking a magnifying glass to your content situation. The better you understand it, the better you can plan exactly what needs to change to reach the results you’d like to have. Two typical activities in the analysis phase are a content audit and a context analysis. Sometimes, these activities are lumped together into a content analysis. The exact term is not that important as long as you do the analysis thoroughly.

Content Audit
An audit is a close review of your existing content. If you have any content to start with, you need to know exactly what it is. The audit tells you what you’re working with. By the end of an audit, you’ll have answers to questions such as:

• What content types, formats and topics do you have?
• What is the quality of your content? (For help, consult this content quality checklist.)
• How is your content structured?
• Where do you have obvious content gaps and overlaps, or redundancies?

When you’re ready to try a complete content audit yourself, check out the guide Content Analysis: A Practical Approach.

Context Analysis
A context analysis looks at the elements that surround and affect your content. At a minimum, consider and answer these questions about your goal, your users, and your processes.

Goal

• What is your business or organizational goal? Why?
• How will content help you achieve that goal?

Users / Audience

• Who are your users, or the people you want to attract and influence? Why?
• Where (in what channels) are your users looking for content — on websites, on mobile, on social networks?
• If you have an existing website or interactive experience, how is it performing?

Processes / Ecosystem

• How do you create, maintain and govern content now?
• How do you plan to do so when you launch the website or interactive experience?
• What are your competitors doing in the realm of content?

As a simple example, let’s look at American Express’ OPEN Forum, a site for small business owners. Why did American Express want to attract and influence these users? Because reaching these users was a step toward their business goal. Mary Ann Fitzmaurice Reilly, SVP of Partnerships & Business Development for American Express OPEN, notes, “…our biggest opportunity is with small business growth — if they grow, we grow.”  And, American Express decided to help them grow through a unique approach to content. Rather than create more content about their credit cards, American Express decided to create content about small business owner concerns. (More about this approach in the next section, 2. Editorial.)

We could discuss analysis for days, but I’d like to introduce other aspects of content strategy to you as well. For a more detailed explanation of this analysis, I highly recommend the analysis chapter of Content Strategy for the Web by Kristina Halvorson. Also, I shared my step-by-step experience in the presentation Content Analysis: Know Thy Content.

The real benefit of analysis is ideas and insights for planning content editorial and architecture. So, let’s take a closer look at those sides of content, using the OPEN Forum as an example along the way.

2. Editorial

Editorial plans mostly for the people side of content, such as:

• What style or voice should your content have to attract and resonate with users?
• What topics and themes should your content cover and when?
• Who is responsible for what content?
• What are your standards or criteria for credible content?

Many businesses and organizations who are not media properties completely lack editorial oversight for their websites and other interactive experiences.  That can result in problems ranging from errors to missing a competitive advantage. Let’s turn back to our OPEN Forum example. In the world of finance, much content is a combination of dull explanations or legal mumbo jumbo. OPEN Forum takes a different approach.

Figure 2: In the stodgy world of finance, American Express OPEN Forum offers a fresh approach to content.

The design might not look dramatically different from other finance sites, but the content is much different. To help small businesses, OPEN Forum regularly offers credible content about topics that small business owners care about. American Express produces some content, invited expert columnists create some content, and small business users contribute some content. Even though different authors contribute content, the content is original to OPEN Forum. Can you notice how different it is from aggregating random content or simply optimizing pushy landing pages? Through its consistent voice and handy content on OPEN Forum, American Express has positioned itself as a trusted advisor to small businesses. Because the articles, videos, and podcasts are deeply useful to small business users, they’re far more valuable to American Express.

Of course, having so many content contributors poses some risk of creating content that feels disjointed. To reduce this risk, what’s going on behind the scenes? The right editorial staff and processes ensure the content from different authors is coordinated. For example, while most websites lack an editor, OPEN Forum has an editor-in-chief. And, for robust editorial review and production, American Express partners with Federated Media. As you plan your content processes, you will consider what roles to hire in-house and what roles to hire as freelancers.

Besides the right people and processes, editorial planning results in an important tool: the Editorial Style Guide. This guide documents important decisions about your content for everyone involved to reference. A style guide typically explains:

• Target audiences / users
• Key messages
• Voice and tone
• Criteria for topics
• Sample content
• Usage, punctuation, and grammar guidelines
• Trademark and legal considerations

For a helpful start, you might want to consider taking a look at The Yahoo! Style Guide.

So, all of this editorial work sounds interesting, but does it actually get any results? Yes, it does. Since 2007, OPEN Forum has built an audience comparable in size and engagement with other small business media properties. But that’s not the best result. In the lucrative small business market, American Express’s successful editorial approach is a differentiator. More than that, it’s a quiet coup. The results did not happen overnight. They took time. But, compared to its competitors, American Express now owns small business online.

I know what you’re thinking. “But American Express is a big company. Should a smaller one care about editorial?� Yes. A smaller company or an individual can do it on a smaller scale, with less content, fewer contributors, and probably fewer visitors. Editorial is about attracting the right visitors (or audience) and holding their interest through content. Size does not matter nearly as much as quality.

That’s a basic introduction to editorial. But, content concerns don’t stop here. Now, let’s turn to architecture.

3. Architecture

Architecture plans mostly for the machine side of content — while keeping the people side in mind. Architecture addresses how your content is organized, structured and repurposed. Architecture gets your content to the right place. This planning might start with a site map but won’t end there. You likely will need to define content models and taxonomies using metadata. In essence, you need to tell your content management system and other platforms what content you have, where to display it and how to display it.

Let’s look at a simple example, again from American Express OPEN Forum. The site has clearly defined templates for its articles, videos and other content types.  Those content types come together (or aggregate) as meaningful topic pages. Take a look at this one for innovation. That aggregation happens dynamically because of good architecture.

Figure 3: This topic page brings together all of OPEN Forum’s original content about a topic (in this case, the topic is innovation), thanks to good architecture.

When you plan architecture well, you gain other benefits. Both search engines and people will find your content more easily. Your content becomes more accessible and flexible, not to mention easier and more efficient to keep consistent.

That’s some basic architecture. Now, let’s kick it up a notch. Is OPEN Forum part of AmericanExpress.com, the core American Express website? No, it’s not. Now, that might bother some user experience designers and information architects out there. Shouldn’t this be one cohesive experience? Yes, it should. But, that doesn’t necessarily mean all of the content has to be in one website or in one place. AmericanExpress.com serves more visitors than small business owners. So, putting all that small business content on AmericanExpress.com could easily get in the way of other visitors. Instead, OPEN Forum and AmericanExpress.com link to each other at relevant points.

Figure 4: OPEN Forum is not part of the core American Express site.

Okay, now let’s kick it up several notches. Content strategy pioneer Rachel Lovinger has articulated convincingly that advanced architecture also makes your content more nimble to use across different interactive experiences, from your website to your mobile application. She notes,

“Publishing content that’s marked up with smart structure and metadata allows it to be delivered on a wider range of channels, while still retaining the context and relationships that make it meaningful and useful to both your audience [visitors or users] and your brand. Think of it like providing publishing instructions with the content, where each different platform uses only the instructions that are relevant.�^[2]

For example, if your content is structured well, you can offer mobile versions of your content more efficiently, as American Express has. You also will have a much easier time creating widgets or an API to distribute your content, as NPR did. (See image below.) Does this kind of planning get results? Within 12 months after releasing this API, NPR doubled its users (audience). ^[3]

Figure 5: NPR structured its content well enough to offer a useful API.

You or your organization might think such multichannel architecture issues are mostly technology issues. Now hear this: They’re content issues, too. Consider how your content’s architecture will help you reach the right users in the right channels.

How These Areas Work Together

My diagram presents the areas of content strategy as a cycle. Now that you understand each area better, let’s look further at this cycle.

Before Launch: Architecture Last
When you’re about to reimagine a website or launch a new one, focus on analysis, then editorial, and then architecture. Why architecture last? Because that way you don’t waste time and energy planning areas of a site that you don’t need. You avoid scrambling to fill unwanted screens and features with content. You’d never build a house by constructing every possible room, then deciding which rooms you actually need. It should be no different with websites and interactive experiences. Plan the content you need first, then architect it.

After Launch: Analyze and Adjust
After you launch, the cycle doesn’t stop. Analyze how your content performs. Learn how users behave with your content. Stay in touch with industry trends. Watch for problems and opportunities. Address them by adjusting your editorial and architecture. Successful media properties never publish content, then leave it. I like how Tracy V. Wilson, Site Director for HowStuffWorks, describes her approach to ongoing analysis,

â€�When we’re looking at metrics, we’re looking at them in light of how we already know our articles work, how we know that they’re structured, how we anticipate that an average reader would come in and go through the article from beginning to end. And we can do the same thing for different types of content. So, we have articles, we have top ten lists, top five lists, quizzes, image galleries … and we’ve developed a different sense of what “normal” is for each of those.

So, we’re able to look at when something is deviating from our idea of normal and try to figure out why that deviation would take place. We also use metrics a lot in day-to-day planning, like planning what to feature on our home page … deciding whether that day’s home page was successful; a lot of that is coming from numbers and whether people’s behavior on the site that day is matching up with … what we’re thinking of as the typical user behavior.” ^[6]

Get To Work

By now, I hope you appreciate more how analysis, editorial, and architecture work together to make content matter. The next step is to tackle your content. But, how? Every situation is a little different. For example, you might feel you have a good start on content analysis and architecture, but you have no idea how to approach editorial. These resources will help you get your specific plan together so you can move forward:

• Content Strategy Deliverables
  This blog post series by content strategy expert Rahel Bailie explains typical content strategy deliverables in handy detail.
• Content Strategy knol
  Started by editorial and content strategist Jeffrey MacIntyre, the knol indexes content strategy definitions, insights, blogs, publications, specialists and more.
• A Checklist for Content Work
  This excerpt from Erin Kissane’s new book on Content Strategy, The Elements of Content Strategy, notes some essentials.
• Content Strategy Meetups
  If you want help with content or just some camaraderie, look for a content strategy meetup near you. If not, consider starting one yourself. When I started the meetup in Atlanta, I was happily surprised by the interest from developers, designers and marketers.
• Content Strategy Forum, September 2011
  This conference in London will bring together an international mix of well-known and new voices in content strategy.  I’m as excited to see what others contribute as I am to offer a hands-on workshop.

Also, I recently wrote a book called Clout: The Art and Science of Influential Web Content, which explains practical principles for planning content. Along the way, I included examples from startups, government, higher education, large business, and more to inspire useful ideas. I invite you to learn more about the book.

Really, there’s no reason not to take the next step toward better content today. The sooner you move forward, the sooner you’ll overcome those content challenges. And, the sooner you’ll get results.

References

[1]. Halvorson, Kristina. 2009. Content Strategy for the Web. New Riders.

[2]. Jones, Colleen. 2011. Clout: The Art and Science of Influential Content. New Riders.

[3]. The Future of Content: Mobile Strategies for Government (panel). Government Web Content and New Media Conference 2011.

Segal, David. February 2010. Search Optimization and Its Dirty Little Secrets. The New York Times.

Jones, Colleen. 2009. Toward Content Quality. UXmatters.

Neisser, Drew. July 2010. What American Express’s OPEN Can Teach Us About Social Media. Fast Company.

Lovinger, Rachel. 2010. Nimble. Razorfish.

© Colleen for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: content, content strategy, copywriting, editorial

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)