Six Revisions » CSS

How to Bulletproof @font-face Web Fonts

Jacob Gube — Mon, 10 Oct 2011 10:00:50 +0000

You’re interviewing for your dream job, and you’re ready to kick some butt. A small group is gathered around a conference phone and some coding exercises, and they’re pulling up your portfolio on a projector so that everyone can review it.

It looks great, except for one thing: All of your beautiful web fonts are gone and have been replaced with… Arial.

No, this isn’t just a bad dream: It actually happened to me recently when I interviewed at a web design company (352 Media Group). It was painful. I ended up getting the job anyway, but the experience made me realize that even following best practices recommended by industry-leading developers such as Paul Irish’s Bulletproof @font-face syntax and in the current situation where there’s much wider browser support for @font-face, web fonts just aren’t foolproof.

Getting them just right on most platforms and browsers takes work. Below, we will discuss some of the common issues with using web fonts.

Web Fonts Aren’t Displaying

The disappearing web font has to do with HTTP response headers.

Firefox and IE treat web fonts a little like JavaScript documents. For security reasons, a website on a different domain generally cannot display a web font that’s been loaded from another domain. (The Mozilla Developer Network has more information on this policy than you’d ever want to know.)

In cases were you want to allow cross-domain access to such files, the server that hosts the files can include an Access-Control-Allow-Origin header in its HTTP responses. This header can specify specific domains that are allowed to access the files, or it can just list an asterisk to let everyone access the files. The Google Font API does the latter, which makes the service available to all websites.

Workaround for Web Servers that Remove Response Headers

On some networks — including, apparently, that of the office where I interviewed — this header is removed before the response makes it to the web browser. Perhaps an overzealous firewall is to blame. As a result, Firefox and IE refuse to render the web fonts.

Chrome and Safari, on the other hand, happily display the fonts anyway.

Unpredictable networks are a fact of life, but luckily there’s a way to address them. You can use the WebFont Loader, a JavaScript tool that was co-developed by Google and TypeKit to fail over to fonts that are hosted elsewhere where necessary.

The code to fail over to local fonts goes inside your tag and looks something like this:

If the client is on a network that deletes the Access-Control-Allow-Origin header, her browser will load the font from Google, fail to display it, and then load your locally-hosted font.

This is slower than just loading fonts from Google. Newer versions of Firefox will take a solid three seconds before they give up trying to display the font from Google, but it’s better than no web fonts at all, and it won’t affect users who aren’t on such networks.

Debugging Response Header Issues with Developer Tools

If you ever have to troubleshoot a problem like this, the developer tools in most browsers have a Net panel where you can inspect file requests and the associated headers. For example, for Firefox you can use Firebug and for Google Chrome, there’s Chrome Developer Tools.

Below is a screenshot of response headers using Firebug. As you can see, the Access-Control-Allow-Origin response header’s value is set to *, which means the document is able to be requested and rendered from other websites.

Troubleshooting with VPN Services

VPN services such as TunnelBear are also helpful in troubleshooting these sorts of problems. Because VPNs encrypt all traffic between you and the VPN provider, your local network won’t be able to mess with your headers.

If the site looks fine through the VPN but breaks when you connect without a VPN, it’s likely that there’s a problem with your local network.

Flash of Unstyled Text (on Slow Internet Connections)

A slow connection can result in a flash of unstyled text — what Paul Irish abbreviates as FOUT — while your web fonts load.

By default, Safari, Chrome, and IE 6-8 won’t display text at all until the text’s associated web font loads.

IE9, on the other hand, will display text in a default font while the web font loads — even in compatibility mode.

Firefox 3.5 will do the same, but versions 4 and later will wait three seconds for a font to load. If the font still hasn’t loaded at that point, only then will the browser display unstyled text. A similar "waiting period" is planned for WebKit.

Browser	How It Handles Web Font Loading
Safari	Won’t display any text until web font loads
Google Chrome	Won’t display any text until web font loads
Internet Explorer 8 and below	Won’t display any text until web font loads
Internet Explorer 9	Displays default/fallback font until web font loads
Firefox 3.5 and below	Displays default/fallback font until web font loads
Firefox 4.0 and up	Waits 3 seconds for a font to load

You might get a more noticeable FOUT in cases where you have to fail over to a locally-hosted font, but you can hide unstyled text using the WebFont loader, as we’ll discuss shortly.

It’s easy to miss such behavior on a fast connection. Most web designers are probably not on dial-up, after all.

Not everyone will have the same experience, though: According to a 2010 survey, 50% of broadband users in the US are subscribed to their ISP’s basic service. There are still some towns that have limited or no broadband Internet access.

The National Broadband Map can help you figure out whether your users fall into this group. Users outside of the U.S. may have even flakier connections, or they might have great connections but live far from your server. A recent report noted that the average luxury site takes 16.2 seconds to load in China. What will your users see while this happens?

Simulating a Slow Internet Connection

There are a variety of tools that can simulate a slow connection so that you can see how your users might experience your site. I personally like Sloppy, which is free, runs on all platforms, and (unlike some other tools) requires no command-line geekery.

A few caveats: redirections and absolute links will send you out of Sloppy’s slowed-down environment, and browsers often cache these redirections. To be sure that you’re really getting a slowed-down page, make sure your address bar displays an IP address instead of a domain, and clear your browser’s cache if you’re continually getting redirected to a web page other than the one that you specified in Sloppy.

You can make the FOUT less noticeable in the same way that you’d tackle other web performance problems: Compress files using gzip, ask browsers to cache the files far into the future, only request the versions of the fonts that you really need, etc. Some delay is inevitable, though.

The WebFont Loader can help here, too. The script applies a CSS class called wf-loading to text for which web fonts haven’t loaded yet, and you can use this class to force browsers to hide or show unstyled text while web fonts load.

You could even get really granular. Maybe your logo uses a web font, so you don’t want it to display at all until the font has loaded, but want the content area to display in Arial while web fonts load.

What’s best for your site depends on how you use web fonts, how different the fonts are from system fonts, and how fast you expect your users’ connections to be.

Web Fonts Render Inconsistently on Different Operating Systems

In addition to issues with varied connections and browsers, it’s also important to consider how fonts are rendered across operating systems.

Mac OS and Windows have fundamentally different philosophies when it comes to rendering text. Mac OS uses anti-aliasing to smooth text, while Windows Vista and 7 use a technology called ClearType to render more detailed text. (Read more about ClearType here.)

Windows Font Rendering

Windows XP doesn’t do either (at least by default), and Linux might do any number of things depending on how it’s configured.

Windows also has two different rendering modes: the newer DirectWrite and the older GDI. The two modes can produce substantially different results.

IE9 and Firefox use DirectWrite, and they can use hardware acceleration to render pages. If hardware acceleration isn’t available or has been turned off, fonts don’t look quite as smooth in these browsers.

Chrome uses GDI, and Firefox 7 is slated to use GDI for common fonts such as Arial.

Safari actually lets you switch between Windows-style rendering and Mac OS-style smoothing — see the "font smoothing" option in the "Appearance" section of the Safari preferences dialog.

Windows Standard uses GDI, while "Light," "Medium," and "Strong" mimic Mac OS’s font rendering. Try toggling between Windows Standard and Medium, and you’ll see that the font heights switch back and forth. The takeaway here is that the size of text can vary, so it can’t be relied on to exactly position other elements.

Another variable on Windows is ClearType, which takes advantage of the fact that pixels on LCD screens are comprised of red, green, and blue vertical bars. It treats these bars as narrow pixels, allowing Windows to display more detail in text.

At best, ClearType makes text sharper and more readable. At worst, it creates colored "halos" around text — including your lovely web fonts. What you see depends largely on whether you’ve used the "Adjust ClearType Text" tool to configure ClearType for your display. If the software isn’t configured properly, it can actually make text harder to read.

Mac OS Font Rendering

It’s worth noting, of course, that not everyone is wild about Apple’s font rendering either; some Windows users argue that Mac OS sacrifices readability for the sake of making text prettier.

Test in Different Operating Systems

The differences in how operating systems render fonts mean that it’s worth testing your site on two different platforms.

If you’re a Windows user, it’s useful to test your site on Mac OS once in a while (or at least try Safari’s font smoothing on Windows).

If you’re a Mac OS user, you probably already have a copy of Windows somewhere so that you can test on IE. It’s worth trying WebKit or Firefox on Windows so that you can see how different rendering modes affect your site.

It might be tempting to sidestep this whole process and use Cufón to render fonts as vector images, which are then smoothed in much the same way as text on Mac OS is.

It might be equally tempting to use a CSS tweak to disable ClearType in older versions of IE. The problem is that doing so violates users’ expectations and ignores their preferences.

The user may have already configured ClearType or other settings to her liking, and she likely expects text in web pages to look the same as text in a word processor or dialog box. (It’s also worth noting that web fonts are faster than Cufón, particularly when you’re working with large amounts of text.)

Conclusion

It’s difficult to completely account for all situations, when it comes to web fonts. The best we can do is make sure we implement safeguards and fallback mechanisms for the less-than-ideal web browsing scenario.

It’s inevitable: Fonts will look different across browsers and operating systems, and they will perform differently across various connections. This is okay (even good)!

With a little testing and tweaking, you can accommodate users on broadband and dial-up, Macs and PCs, corporate networks and coffee shop Wi-Fi.

About the Author

Ryan DeBeasi is an interactive designer at the web design company 352 Media Group, which offers custom web design and development for large corporations and small business web design. He’s passionate about front-end development, user experience and writing. His portfolio no longer breaks on corporate networks. Follow him on Twitter: @RyanDeBeasi.

Are You Using CSS3 Appropriately?

Jacob Gube — Tue, 04 Oct 2011 10:00:39 +0000

Advertise here with BSA

CSS3 is exciting. When it was introduced, it seemed like the untapped potential of Web Design was finally unlocked.

It proposes speedier web page response times due to the reduction of images needed for things such as text effects and web buttons for our UIs.

It cuts back our dependency on JavaScript for visual presentation purposes such as animation effects, not only resulting in less code (always a good thing) but also equating to even better web page performance.

It promises less reliance on expensive graphics software like Photoshop.

But has anything, in the broader scheme of visual design, really changed? We’re still dealing with the same users, the same content and the same user-centered design philosophy.

The new CSS3 capabilities should be treated just like any other web technology we work with: It should always support user-centered design and the site’s goals and purpose. And if CSS3 is applied in any other way than that, then it becomes a dispensable component within our website production process.

CSS3 Does Not Change Design

In terms of design principles and visual presentation best practices, nothing has been altered by CSS3, even when we’ve been given fancy transitions, transforms and typography effects to play with. These are all superficial tools in web design, and we’ve had these things even before CSS3.

From the user’s perspective — which is always the most important viewpoint — these new cosmetic CSS3 properties matter even less. Most users, we must remember, won’t notice the subtle effects we put in our designs, like links changing colors smoothly instead of immediately. These are on the aesthetic level, and shouldn’t get in the way of the user experience.

The real paradigm shift comes in the new way of approaching and carrying out our website design process.

For example, with better support for media queries, we can now more easily produce flexible and responsive web designs that optimize the user experience depending on what browsing device they use. That’s huge, and introduces plenty of new concepts in our traditional site-building methodology.

With the new CSS3 selectors, we now have a much better ability of targeting HTML elements and carrying out animation effects without the use of JavaScript or a web development/Ajax library like jQuery.

CSS3 isn’t about fancy text shadows and gradients; that’s only at the surface of it. It should be about enhancing the user experience and being able to produce better sites in a more efficient manner.

Using CSS3 Appropriately

Now that we have more tools at our disposal, we can design interactions more naturally. We can use these new features to our advantage by applying them where usability and the user experience is improved.

Or we can use CSS3 to our detriment, where we focus on the new superficial CSS3 features, loading up our work with extraneous text shadows, color gradients and fancy rotation effects simply because we can.

When we decide to use CSS3 in our work, we should always keep in mind that function is more important than form. There is an important line between a beautiful design and a good design.

As a rule, only use CSS3 when there’s a good reason to do so. For example, you might use the text-shadow CSS3 property to create a good visual hierarchy, pulling greater attention to more important textual elements. But if everything has text shadows for no other reason than because it looks cool and is out of the ordinary at the expense of readability, then it is definitely not a good use this new web technology.

We have to put usability, accessibility and the user experience at the forefront of the design process. Everything else comes second.

The Bifter is an example of heavy reliance on gratuitous CSS3. The site looks great on a CSS3/HTML5-supporting browser like Google Chrome.

Unfortunately, it almost falls apart in IE7.

In this instance, the experience of users with browsers that do not support CSS3 was neglected for form. The same look could’ve have been created using older web design techniques (e.g. no CSS3, no HTML5, using a PNG fix for alpha transparency, etc.) without sacrificing the user experience of IE7 (and below) web users.

Better yet (though it could involve additional development time), progressive enhancement can be applied so that the site appears decently on older browsers while providing a better/enhanced experience to those who choose to use CSS3/HTML5-supporting browsers.

Using CSS3 should:

Support — and never hinder — usability, accessibility and UX
Improve web performance
Speed up website development

If, however, you find yourself in a situation that doesn’t achieve any of the above, then is CSS3 really the right tool for the job?

Conclusion

We’ve been given a lot of power, and thankfully, we’ve been fairly responsible with it so far. As a whole, our web designs haven’t taken a step back because of CSS3. We’re using the new features smartly, pushing the envelope without neglecting the overarching goals of Web Design, which is to support the needs of users.

So long as we continue in this vein and we’re keeping it simple, I don’t think we have to worry about CSS3 being an issue in Web Design.

About the Author

Delwin Campbell is a web developer (among other things) at No Enemies, based in Austin, Texas. He is a crazy person with too many hobbies; right now he’s learning Swedish! Check out his personal site.

A Guide to CSS Colors in Web Design

Jacob Gube — Wed, 01 Jun 2011 10:00:50 +0000

Advertise here with BSA

With the exceptions of typography and layout, nothing has a more profound impact on the way we design and craft websites than color — from the visuals we showcase through images and media to the simple choice of whether to use salmon pink or neon green to give a website that ’90s "Help, I’m going blind!" appeal. This simple guide will look into CSS colors. You’ll also find excellent color charts and tools to help you work with color values.

Let’s set our objectives:

Examine the variety of options that exist
Analyze basic code examples for each color type
Examine opacity, transparency and more
Explore simple color theory and psychology

Color Value Notation

There are many types of color notation in CSS, and the lesson to take away is that you need to decide for yourself which method is best for you after taking into account cross-browser compatibility and other limitations.

In many ways, color is limited only by our imagination. Our choices for shades and contrasts have changed over the years with the introduction of displays that are capable of displaying many millions of colors (a far cry from the old 256-color limit).

When we identify that perfect shade in our code, the format we use to describe and reference it can appear as one of many color values that help the browser determine exactly what we want it to render (and where).

For every color, there’s a hex, RGB and HSL equivalent. You just need to know the value.

Hexadecimal Value Notation

Of the many methods to describe color in CSS, the most popular is the hexadecimal value. It’s been around since the beginning and has retained maximum browser support. A hexadecimal color value starts with the hash (#) character, followed by three or six hexadecimal digits in RGB notation format. For example, the hexadecimal (often unofficially abbreviated as hex) color value for white is #FFFFFF, or #FFF in shorthand.

Because hexadecimal value notation supports a wider range of colors than the equally old keyword system (e.g. red, green, blue, black), it remains highly used for its preciseness.

Below are simple examples of longhand and shorthand hex value notation:

a { color: #AABBCC; }
a { color: #ABC; }

RGB Value Notation

Of course, while hex codes remain highly popular in CSS, many designers don’t realize that the other convention for RGB color notation has been around just as long (and we can trace its roots back to the earliest CSS specification). Using 0 to 255 numerals for each of the red, green and blue values that comprise our RGB colors (or using percentages instead), we can present our choices in an easier-to-read format.

Below are simple examples of RGB representations of colors:

a { color: rgb(170, 187, 204); }
a { color: rgb(67%, 73%, 80%); }

HSL Value Notation

We also have HSL, which is the new kid on the block. Built to complement the existing RGB system, HSL allows us to combine hue, saturation and brightness into a triple declaration.

HSL makes guessing colors easier because you are declaring shades that are either lighter or darker by increasing or decreasing other values (against the base hue).

Hues are declared in degrees of the color circle (a value of 0 to 360), and both saturation and brightness are declared in percentages.

Below is a simple example of an HSL representation of a color:

a { color: hsl(210, 13.3%, 73.3%); }

Color Keywords and X11

So far, CSS notation may seem quite difficult for beginners, especially if hexadecimal values and color calculations (using percentages, degrees of the color circle or light values from the RGB spectrum) aren’t your thing.

Fear not. A bunch of explicitly worded alternatives, referred to as color keywords, can help.

Unlike the other methods, the supported values are limited, but they do what they do well.

Using a color keyword is one of the simplest methods of describing color in CSS. Rather than using some weird notation that is all but alien to the average end user, simply provide one of a base set of values that describe the color by a recognizable name.

The color names are limited to 16 values but, as we’ll find out, can be expanded using an extended palette. Below is a simple example:

a { color: green; }

Basic color keyword notation has been around for a long time, but given the limitations of the 16 base colors mentioned above, browser makers (and now the CSS3 spec, which has adopted the values from the SVG specification) have expanded the range of colors by taking advantage of the X11 extended color palette (which gives us over 100 named colors).

We can describe colors using keywords (as long as they are supported by browsers).

The only potential problem with X11 is that browser support and consistency aren’t a guarantee (some color clashes can occur, for example).

The X11 palette gives us an extended, supported list of color keyword names.

System Colors

Finally, one other group of color keywords needs to be mentioned. System colors allow designers to match certain color choices to those of the operating system’s default scheme.

Think of the display options in Windows and how you can alter the color of system text, the background, title bars and such; the keywords ask the browser to emulate them.

However, system color keywords are deprecated, poorly supported and dangerous for your website’s accessibility because you leave it up to the user’s OS to decide on colors and native appearance.

System colors were an attempt to make websites look and feel more like an operating system.

Color Opacity and Transparency

So far, we have outlined the basics of color value notations, and you could be forgiven for thinking that simply telling the browser what color you want is all there is to it. But with the advent of CSS3 comes an additional level of controlling colors, bringing us the ability to layer semi-transparent or opaque effects onto objects.

Opacity and transparency effects on websites can be subtle and quite beautiful.

As with the usual color notation, there are many ways to achieve this. Below are a few of the most common.

Opacity

First, let’s discuss opacity, which is perhaps the trickiest to make cross-compatible due to all of the browsers and versions that need supporting. While opacity appeared only in CSS3, it has quite a history of early browser support, especially in Internet Explorer (which used the proprietary DirectX filter property). Getting the mix exactly right is a challenge, and some people use different blends to maintain the effect.

Below is a solid formula that includes everything you need for bulletproof opacity:

div {
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

Transparency

Transparency has also been revitalized with CSS3. No longer are you limited to image-based alpha transparency (although that’s still an option) or single-color transparency effects on images. Modern browsers take advantage of both RGBa and HSLa, which, as you can guess, use conventional RGB and HSL notation but with a percentage-based alpha transparency value attached to the end.

Below are simple examples of RGB and HSL with alpha-transparency of 0.5 (or 50%):

a { color: rgba(170, 187, 204, 0.5); }
a { color: rgba(67%, 73%, 80%, 0.5); }
a { Color: hsla(210, 13.3%, 73.3%, 0.5); }

Safe Colors

With something as important as color, you’d expect compatibility to be a given. But the situation in reality is far from perfect. The X11 color system isn’t supported equally across web browsers (and has only just been added to the CSS specification). HSL, HSLa and RGBa are new additions to CSS3 and so cannot be relied on in older browsers; system colors have been deprecated; and both opacity and alpha-transparency support are messy!

If you think things are limited now, just think back to when colors were restrictive.

Even the base colors we depend on could potentially be a problem on older hardware, because back when displays could render only 256 colors (or even further back with 8-bit displays), compatibility issues were serious enough for us to limit the power behind color notation.

To ensure that all devices got a consistent and usable look and feel, three levels of safe color use were formed.

Really-safe Colors

This existed back when 8-bit displays were still fairly common, because on those displays, only 22 of the colors defined as "web-safe" displayed reliably.

Web-safe Colors

This is the one that most designers know (and some still use). 216 colors were available (of the 256 that included dithering), mainly for older displays.

Web-smart Colors

This was 4,096 colors and was produced to remove the limitations of the web-safe palette, while keeping color use reasonably compatible.

Even if you look beyond compatibility, web designers have a few additional complications with color use, mainly as a result of web accessibility. Color blindness affects many individuals worldwide, and the condition has varying degrees of severity, which makes the situation especially hard to deal with.

Web Accessibility Considerations

Some people may be deficient in a single color, others completely blind to an entire spectrum, still others able to see only in black and white (monochromes), and some have little or no vision at all.

Here are the various forms of color blindness:

Monochromacy

The inability to see colors outside of black and gray shades, or, in rarer cases, the inability to see outside of certain chroma shades like mild browns or blue variants.

Dichromacy

This is when one of the three basic color mechanisms fails to work and is commonly referred to as protanopia (blind to red), deuteranopia (blind to green) and tritanopia (blind to blue).

Trichromacy

This condition is when mechanisms are present but defective (thus causing confusion). Trichromacy includes protanomaly (reduced red), deuteranomaly (reduced green, which is common) and tritanomaly (reduced blue).

This combination of issues affecting web accessibility requires us to be more sensitive to how we use color (and the colors we choose), so that we make our websites easy to use, engaging and highly readable.

While some colors look perfectly fine to one set of eyes, certain conditions could render your work useless or invisible to less fortunate users.

Color blindness is hard to emulate, but there are tools to help us out.

If you don’t currently consider color blindness in your designs, you should start right away. To help you on your way, read 10 Tools for Evaluating Web Design Accessibility.

Color Associations

Let’s just briefly go over some basic color associations. As you can see, there is more to color than meets the eye. Color can have a dramatic impact on how users interact with the page, and studies on the effects of color on buying habits and behavior are well known among designers and psychologists. Plenty of articles about color theory exist, so don’t shy away from pursuing the subject further, because it could benefit your decision-making process.

When we see certain colors, many of us subconsciously associate them with things we know from the world around us. For example, when we see the color red, we may think of love, blood or passion depending on various factors such as cultural upbringing and personal experiences. We can use these associations to impress our identity on users, just as painters use color to elicit emotion. For example, a website about vampires would be better served by a red and black palette than a yellow and green one because those are the colors traditionally associated with the genre.

Many different color associations arise from culture, and some are quite obvious.

Not only does this psychological phenomenon affect our perceptions of the environment (though to what extent is still up for debate), different cultures associate colors with different things; we mustn’t assume that Western standards hold true worldwide.

Another color association is with temperature: we often associate blue with cool things and red with hot things, and this can be seen in our visuals.

Color psychology can help you better connect with your audience.

Color Tools and Resources

Below is a list of links related to color in web design that you might want to explore.

Color Charts

Color Pickers

Conclusion

Color plays a huge role in web design, and our implementation of it matters. Whether we’re playing with contrast, shades, hues, transparency and so forth, our goal is to produce websites that are aesthetically pleasing and relevant to our audience.

Our choices should avoid clashes and blurring, and we should choose a palette that is compatible and accessible to our users.

CSS has given us the groundwork to use any color we desire, and CSS3 offers additional tools, such as opacity.

But with great flexibility comes great responsibility. Color covers every square inch of our websites, and we should never underestimate its value to our work. Review the color system you are currently using, and be creative in your effort to build increasingly beautiful, vivid experiences. Your colors should leave a positive, lasting impression.

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

CSS Typography: Examples and Tools

Jacob Gube — Tue, 22 Mar 2011 10:06:51 +0000

Advertise here with BSA

In the previous part of this series, we discussed some techniques and best practices for CSS typography. Let’s now delve into the subject further by looking into some case studies, tools, as well as a showcase of excellent CSS typography on the web.

This is the third part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.

CSS Typography: The Basics
CSS Typography: Techniques and Best Practices
CSS Typography: Examples and Tools

Case Studies on CSS Typography

Tutorials and theories can be great, but nothing says proof like a case study. Here are a handful of studies that can provide you with some real-world insights regarding typography on the web.

Southern Savers Case Study: Typography

Serif Fonts vs. Sans Serif Fonts: A Working Case Study

Fixing Web Fonts, A Case Study

Ten Great Free Fonts Cross-Browser: A Case Study in @Font-Face

CSS Typography Tools

Below is a collection of typography-related tools, with most being geared toward helping you work with CSS typography.

Typographic Grid

This premade CSS grid by Chris Coyier is composed to a vertical rhythm. It’s a great starting point for anyone working with CSS typography.

Baseline

Baseline is a typographic framework that adheres to a baseline grid. It features a CSS reset and basic style rules for HTML text, web forms, and some of the new HTML5 elements.

Typograph

This tool has a drag-and-drop interface for composing typography that aligns to a web layout grid. There are a number of features available including an automatic mathematical scale so that you don’t have to pull out your calculator while working with CSS typography.

TypeTester

Choose fonts installed in your computer and then play around with its line-height, letter-spacing, and so forth. This tool will show you a preview on the fly so that you can conveniently tweak your font styles to your heart’s delight.

FontTester

FontTester is similar in purpose to TypeTester (above). FontTester allows you to test various fonts side by side for comparing and contrasting. Test out different font combinations and styles, and then grab the CSS once you’re happy.

Typechart

Typechart is a showcase of different font combinations, with easy-to-grab CSS for each combination. It’s great for discovering font combinations and styles quickly.

CSS Typeset Matrix

Do you think in terms of pixels? This tool will help convert your units of measurement into em as well as help you find margins and spacing values based on the font sizes and line-heights you specify.

CSS Typeset

With this tool, you can change the line-height, word-spacing, color, style and text decoration of any text placed in the left input field. See the result of your tweaks immediately, and then copy-and-paste the code from the right input field.

Type Navigator

Have you ever come across a font on the web and wondered what it was? With this tool, you can figure out what font you’re looking at by answering a series of questions about its characteristics. Without a particular font in mind, you can use this tool to find a font based on features you like.

PX to EM

With this tool, simply pick a desired body font-size in any of the four units of measurement (px, em, % or pt) and it will convert it to em for you.

What the Font

You can use this tool to learn the name of a font by uploading an image of it.

Fontifier

This web-based generator will create a font based on a sample of your own handwriting. The font can be used in a live site using the @font-face rule (for instance). Sampling and creating the font is free, but it costs $9 to download the font.

Serif Font Search

This tool allows you to search for a serif font by its characteristics. If the font you’re looking for is found, Serif Font Search will provide you its name and as well as some information about it.

Font Picker

Font Picker allows you to filter through hundreds of fonts based on the characteristic and styles that you are looking for.

Typekit

For a subscription fee, web designers can use premium web fonts on their website and serve them through this web service. A big benefit to using Typekit is that there’s no need to worry about licensing restrictions of fonts you decide to use — the service does all that work for you.

CSS Typography Showcase

For inspiration, here are a few web designs that have beautiful web typography. We’ll also briefly discuss how CSS is used to compose the web design’s typography.

Matt Hamm

Matt Hamm has created his portfolio website around beautiful typography. The web design’s vertical rhythm is executed well and premium web fonts are served through Typekit. Notice how the web design has variations in capitalization, font size, and other font styles to create excellent visual hierarchy.

Kilian Muster

This website uses a few different CSS typography techniques. The website name and tagline leverages CSS3 text-shadow to create a subtle CSS3 inset text effect.

Grid Based Web Design

Design Informer’s custom blog post is a great example of beautiful typography in web design. The typography on this page adheres to a baseline grid and font sizes and styles between different textual elements create great visual hierarchy.

Brizk

This web design is another example of how to use custom web fonts effectively. The same font is used in headings and in various text blocks throughout the website layout. Note how the first paragraph and heading on each web page is in a bigger font size — a practical use of the CSS :first-child pseudo-element discussed in the second part of this series.

Design View

The variations in font sizes are what make this design so smart in terms of typography. Font sizes and typography spacing uses the em unit of measurement.

A List Apart

A List Apart has always been regarded as a website with excellent typography and content readability. This is because good typography is essential to a content-centered site like A List Apart, whose often-lengthy articles take center stage. The web layout features great vertical rhythm and a combination of CSS typography techniques and styles like centered text, capitalization, and an interesting hover state for hyperlinks in the articles.

Mutant Labs

This web design has excellent font styling (in terms of colors, font choices, sizes, and spacing) that results in a great typographic composition.

Jason Santa Maria

Jason Santa Maria uses CSS background-image text replacement and some basic CSS typography techniques that result in excellent legibility and readability of content. Vertical rhythm in this design is wonderful.

Darren Hoyt

CSS drop cap (discussed in the second part of this series) is used in a main paragraph on the front page of the site.

I Love Typography

Notice that the serif fonts in this design have been given more whitespace, and sans serif fonts have been given less. This was likely done to create visual hierarchy so that the main content is the primary focal point and the sidebar content the secondary point of interest.

Conclusion

Designing web typography takes a good understanding of basic typography principles and practice through real implementation. With a solid understanding of CSS font and text attributes, typography can be created with beautiful results. Efficient and smart coding habits should include knowing what CSS typography can/should and can’t/shouldn’t do.

This concludes our three-part guide on CSS typography. I hope it has helped you in understanding how to work with type in your web designs.

CSS Typography: The Basics
CSS Typography: Techniques and Best Practices
CSS Typography: Examples and Tools

About the Author

Kayla Knight is a web designer and web developer who loves coding way too much for her own good. She does freelance design/development work and helps run the XHTML Shop. Connect with her by visiting her website and following her on Twitter @ KaylaMaeKnight.

Embracing and Using CSS3 Pragmatically

Jacob Gube — Mon, 21 Mar 2011 10:30:47 +0000

Advertise here with BSA

Web design is an industry where things change very fast. Over the last year or two, CSS3 has taken web design potential to a new level. It’s not that many more features are available in this latest iteration of the CSS specifications, it’s that CSS3 makes it easier to work with things that typically involved more work, more technologies, and more software. For example, basic animation and dynamic image capabilities such as color gradients were previously only possible with JavaScript, Flash, and image editing software like Photoshop. Not anymore.

There’s a lot to learn about CSS3, and it can be overwhelming if you’re just catching yourself up with what’s going on around you. Let’s look at how CSS3 — even though it’s not supported by all browsers (like IE6) — can be pragmatically implemented into your website production process.

Progressive Enhancement

Progressive enhancement is a key concept to apply while we are in this transitional period where not quite all of our users use browsers that have CSS3 capabilities.

Progressive enhancement simply means we can provide an enhanced experience to users whose browser has more features than those that use non-modern browsers.

You create sites focused on universal design and accessibility: Make sure that users with older browsers can use the site, but also take advantage of browser features found in modern browsers like Chrome and Opera.

Websites no longer need to be pixel-perfectly identical on different browsers. Here’s an example that uses progressive enhancement: Github’s Plans & Pricing page.

Below is the page viewed in Google Chrome. Notice that buttons and other page elements use CSS3 (text-shadow, gradient image values, box-shadow, border-radius, etc.):

On IE7 — a browser that doesn’t have support for these CSS3 properties and values — the page looks like this:

The difference is subtle to most Internet users. What’s important is that the page functions as intended and is accessible to everyone.

The page just takes advantage of features that Chrome has that IE7 doesn’t. The web designer took advantage of IE’s proprietary filter CSS property to render the color gradients, but didn’t try to render the rounded corners using CSS background images and CSS/HTML markup tricks to mimic text-shadow.

Progressive enhancement is a key enabler to using CSS3 in your web designs today.

Use Site Data to Make Decisions

Web designers should use data to make sound judgments. When working on a client’s site, it’s always useful to get some kind of data set about their current users.

Google Analytics (for example) is a completely free website analytics tool. Even running it for a week on the client’s website can help you gain vital information. Website analytics can show you what browsers are being used to access the web property, and from there, you can then see what percentage of browsers can handle CSS3.

If you are seeing high percentages of Chrome and Safari (both use the WebKit layout engine) then you should rejoice because they can handle a lot of what CSS3 has to offer. A very rough approximation of a general demographic suggests that Safari and Chrome have about 7% and 10% (respectively) of the browser market. Those numbers can be a lot higher or a lot lower depending on the site and the audience it draws in. Going on those numbers, though, means that about 1 in 5 people have the ability to experience CSS3.

Add to that the popular open source browser, Mozilla Firefox (and browsers like SeaMonkey and Flock that use the Mozilla layout engine), and the return of investment starts to look better.

Then, with IE9 being released this month, it just makes sense to use more CSS3 than not. IE9 isn’t perfect — and it isn’t as feature-rich as Chrome and Firefox when it comes to CSS3 and HTML5 (and thus, we would still need progressive enhancement even if we disregard older versions of this browser line) — but it’s a step in the right direction.

Learn and Practice CSS3 on Your Own Site

As a web designer, there’s a very big chance that you run your own portfolio website. Redesigning your site with CSS3 and progressive enhancement let’s you learn through real world, practical experience.

Using CSS3 on your own website also gives you the opportunity to show off your newly acquired skills to prospective clients.

Many pioneering CSS3 techniques and experiments began on the portfolio websites of web designers and web developers. It’s a fertile environment for innovation.

Summary

By looking at website statistics and data, you can make decisions on what CSS3 specifications you can implement on a site-to-site basis. Leveraging progressive enhancement makes pragmatic implementation of CSS3 something you can do today, even when many Internet users are still using browsers that can’t render CSS3.

We are at a stage in web design where different designs between browsers is accepted — and even expected. If you’re still hesitant about using CSS3 in your project work, don’t be. Embrace CSS3.

About the Author

John Macpherson is keen photographer and works for 57 Degrees North who are web designers in Aberdeen, Scotland. He can be followed on Twitter @johneemac. Visit his site: johnmacpherson.com.

CSS Typography: Techniques and Best Practices

Jacob Gube — Thu, 10 Mar 2011 11:00:28 +0000

Advertise here with BSA

In the first part of this series, we discussed some fundamental concepts pertaining to CSS typography. Now we are going to cover some excellent techniques, tips, tricks and best practices for dealing with typography on websites.

This is the second part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.

CSS Typography: The Basics
CSS Typography: Techniques and Best Practices
CSS Typography: Examples and Tools

Better Web Typography with @font-face

For normal text blocks, using smart font stacks (as discussed in the first part) is a good idea, but for headings and short text blocks, more interesting fonts can be used with the help of @font-face.

When implemented correctly, @font-face is compatible with a wide range of browsers — yes, even IE.

Just include a copy of the font’s file on your web server and use the @font-face rule in your CSS code as follows:

@font-face {
  font-family: CurlzMTRegular;
  src: url(fonts/CurlzMTRegular.eot);
}

Then just use the font-family declared above with your CSS:

h1, h2, h3, h4, h5, h6 {
  /* Always use a font stack, even with custom web fonts! */
  font-family: CurlzMTRegular, Helvetica, Arial, sans-serif;
}

While IE4+ does support @font-face, the font does need to be in the .eot file format. Easy enough — just run any font of your choice through this converter first: ttf → eot Convertor.

For more information on @font-face, please read the following:

For easier implementation of @font-face, check out Font Squirrel’s @font-face generator.

Vertical Rhythm

Designing web typography is all about legibility and readability.

A leading factor for great legibility and readability is how the text flows vertically on the page. Is the text too squished together, or is it too far apart? This is where an understanding and practical implementation of vertical rhythm can come in handy.

Vertical rhythm is the spacing and arrangement of text as the user reads down the page.

Source: Get The Eye

Vertical rhythm deals primarily with font-size and line-height, but also top/bottom margins and padding.

The concept of vertical rhythm is simple: Line heights, margins, and padding should all be equal or within even proportion.

Here’s an example:

p, ol, ul, blockquote, pre, code {
  line-height: 18px;
  margin-bottom 18px;
  /* 1.5em provides good vertical spacing ( = 150% of the font-size) */
  line-height: 1.5em;
  margin-bottom: 1.5em;
}

Consider top margins and padding with blocks of text (e.g. paragraphs, lists, block quotes), as well as with images and other block-level elements. Try to use the same line-height or use multiples of it (e.g.18px, 32px, 64px, and so on for the example above).

Even proportions are easy to do with a bit of math. Let’s try to figure out what the line-height should be in the following example.

h1 {
  font-size: 2em;
  line-height: ?;
}

If the line-height for the body is set to 1.5em, then we just need to divide that by our font-size to maintain the proportion: 1.5em/2em = 0.75em.

h1 {
  font-size: 2em;
  line-height: 0.75em;
}

For font sizes bigger than the line-height, line-height must be decreased to match the baseline grid. For font sizes smaller than the line-height, we must increase the line-height.

We can determine the line-height for smaller font sizes with the same bit of math. Let’s try this again, but this time, our font-size is smaller than the body element’s line-height.

h2 {
  font-size: .7em;
  line-height: ?;
}

If the body‘s line-height is still 1.5em, then we’ll take it and divided by our font-size: 1.5em/.7em = 2.14em.

h2 {
  font-size: .7em;
  line-height: 2.14em;
}

For more information on creating baseline or vertical rhythm in web page layouts, look through the resources listed below. There is also a handy vertical rhythm generator, just in case you don’t want to do all that math.

Working with Text and Whitespace CSS Properties

@font-face and vertical rhythm can sometimes get overwhelming, so let’s slow things down a bit and get back to some basic techniques.

Text CSS Properties

The CSS text property group contains several properties for dealing with the style of text. Having a good understanding of these properties can help bring blocks of text in your designs to a more user-friendly level.

Here are some text CSS properties (their names are self-evident to what they’re for):

text-align: values can be left, center, right, or justify
text-decoration: values can be overline, line-through, or underline or blink
text-transform: values can be uppercase, lowercase, or capitalize

Let’s see how one of these properties works by way of an example. In the following example, we will indent the beginning of all paragraphs:

p {
  text-indent: 3em;
}

Text Direction

You can set the direction of the text by using the direction property. The default direction is ltr, which is short for left to right. Suppose we wanted to reverse that, then we can set direction to rtl.

p {
  direction: rtl;
}

The direction property is not very popular because it has a very specialized purpose, but it can come in handy when working with other written languages. Many middle eastern languages, for example, are read right to left.

White-space, Letter-spacing, and Word-Spacing

These properties provide spacing between words and letters.

The white-space property controls how text wraps inside of its parent element. Values can be normal, nowrap, pre, pre-line, pre-wrap and inherit.

The word-spacing property affects the space in between words. Values can take any CSS unit of measurement (such as 0.5em or 5px).

The letter-spacing property is similar to the word-spacing property, however, it deals with the spacing in between individual characters instead. Values of this property can take any CSS unit of measurement.

Text Shadows

CSS3 gives us a few more CSS properties for use on web typography. One property that’s a new addition to CSS is text-shadow. Here’s the style rule for giving paragraphs a nice text shadow.

p {
  text-shadow: 1px 1px 1px #000;
}

From: Neutron Creations

To create inset text, you can use negative values as such:

h1  {
  /* Use negative offsets to create inset text. */
  text-shadow: #000 -1px -1px 0;
}

To see text-shadow in action, check out this tutorial on how to create inset typography using CSS3.

CSS Typography Best Practices

What follows is a review of best practices that we’ve already covered, as well as a few additional ones. The key concept to keep in mind is that CSS typography is all about creating readable type that improves the user experience.

Serif or Sans serif?

There isn’t any conclusive study that indicates one group of type is more legible than the other. What affects legibility the most are the CSS properties we have discussed, such as font-size and letter-spacing.

For serif fonts, use more line-height, letter-spacing, and perhaps even word-spacing because serif fonts need some space to breathe and express their curvatures.

For sans serif fonts, the simpler font style can allow for tighter spacing and smaller font sizes with the least negative effect on legibility.

Semantic Markup

Always use proper markup. For example, use instead of and instead of , then use CSS to style them.

Use headings (h1-h6) appropriately: to delineate sections of your content into logical groups. Using
after
means that the section that follows is a sub-section of
. Use CSS to style them any way you want, but keep your markup semantic.

Use HTML tags to add value to the content of the HTML document, and use CSS to visually style them. For example, use instead of
.

Create Baseline Styles

It’s always good practice to reduce the guessing game that browsers play when they can’t find a style rule for a particular element. Don’t forget to style basic HTML elements.

h1, h2, h3, h4, h5, h6 { } p { } ol, ul { } a { } blockquote { } pre, code { } small { }

Use 1.5em for Line-Height

1.5em is the most common and recommended baseline line-height; it states that the line-height is +50% of the text’s font-size, giving blocks of text some vertical breathing room.

This isn’t to say that any other line-height value is bad; but when in doubt, 1.5em is a safe bet.

Using a relative unit of measurement for line-height also takes out the math involved in having to figure out the corresponding line-height, as shown in this example:

p { font-size: 12px/1.5em; }

For a 12px font-size, an 18px line-height could be used to achieve the exact same result, but then you would have to recalculate what that value would be if your font-size changes for other elements.

Use Shorthand CSS

Always use shorthand wherever you can as it’s the conventional way of writing CSS nowadays.

Here is the shorthand structure for the font property:

font: [font-style] [font-size]/[line-height] [font-family 1, font-family 2, ..., font-family n]

For example:

p { font: normal 12px/1.5em Arial, Helvetica, sans-serif; }

Conclusion

In this part, we covered some techniques, tricks, and best practices for CSS typography. In the next part, we will present you with some examples of great CSS typography as well as some tools that you can use to make your life easier.

CSS Typography: The Basics

CSS Typography: Techniques and Best Practices

CSS Typography: Examples and Tools

Related Content

10 Interesting CSS3 Experiments and Demos

Playing Cards with CSS3!

3 Advanced CSS3 Techniques You Should Learn

Related categories: CSS and Web Design

About the Author

Kayla Knight is a web designer and web developer who loves coding way too much for her own good. She does freelance design/development work and helps run the XHTML Shop. Connect with her by visiting her website and following her on Twitter @ KaylaMaeKnight.

CSS Typography: The Basics

Jacob Gube — Thu, 03 Mar 2011 11:00:04 +0000

Advertise here with BSA

Typography is an essential component of a website’s design. This is for good reason: good typography is not only imperative for aesthetic appeal, but also improves site usability when text legibility and readability concepts are applied. Typography is all about proportions and spacing. There are also font styles to consider.

How can we use CSS for great typography in our web designs? This is a question we’ll try to answer.

This is the first part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.

CSS Typography: The Basics

CSS Typography: Techniques and Best Practices

CSS Typography: Examples and Tools

Typography CSS Properties

There are two main groups of CSS properties that control typography style: font and text.

The font CSS property group dictates general font characteristics such as font-style and font-weight. Below you’ll see the p element given a font-style and a font-weight property.

p { font-style: oblique; font-weight: bold; }

The text CSS property group deals with the characters, spaces, words and paragraphs. For example, the text-indent property indents the first line of a text block. The letter-spacing property controls the spaces between a text block. Below, you’ll see the p element given a text-indent and a letter-spacing property.

p { text-indent: 50px; letter-spacing: 2px; }

There are other CSS properties that can affect web typography outside of the fonts and text property groups. For example, the color property controls an HTML element’s foreground color, and can be used to change the color of text. Below, you’ll see the p element given a red color.

p { color: red; }

Font Sizing

Browser compatibility is a major issue in web design, even more so if you are attempting to make your web designs look the same in all browsers. Beginning web designers may mess around with a font’s size until it looks just right, only to find it has completely changed among other browsers and platforms. Size fonts the correct way, and this problem can be minimized.

A simple use of sizing text is as follows:

h6 { font-size: 12pt; }

The above sets the heading level-6 element to 12pt.

For font-size values, there are 4 types of units of measurement.

Absolute-size

Standard keywords whose values are defined by the user agent (e.g., web browser). Values in W3C CSS 2.1 specifications are xx-small, x-small, small, medium, large, x-large, xx-large.

Relative-size

Standard keywords that size fonts based on the parent element. These are also defined by the user agent. Possible values are larger and smaller. Below you will see what a paragraph element looks like inside a parent element (
) that has a size of 12pt (in Firefox).

div { font-size: 12pt; } p { font-size: large; }

Both keyword value groups (absolute-size and relative-size) can vary greatly between different browsers, so if your aim is to be pixel perfect, they might not be a good option, and most web designers avoid them altogether.

The smaller and larger keywords, however, can be great for convenient relative sizing when exact proportions don’t matter to the design. The larger and smaller values will inherit the parent element’s font-size and then relatively adjust the target element’s font-size accordingly. So, for example, if a parent element’s value is set to small, the larger keyword will make the child element larger. For most browsers, the change from exact units is around 1.2 units, although that proportion is not consistent amongst all browsers.

As an example, if text is set to 12pt, the larger keyword will resize the child element’s text to about 12pt x 1.2 (depending on the browser), which would equal 14.4pt.

Absolute Lengths

Absolute lengths are literal sizes. For example, 12px is exactly 12 pixels and 2in is exactly 2 inches. Absolute lengths are often used by web designers.

Possible units for absolute length units are pt, px, mm, cm, in, and pc.

Millimeters (mm), centimeters (cm), and inches (in) are more suitable to physical, real-world dimensions and are units of measurement often used in print design. They are not very suitable for screen-based measurements because of the high variance of screen resolutions.

Points (pt) and picas (pc) — while better than mm, cm and in — can also vary visually based on the browser or device’s dpi.

Therefore, when using absolute lengths, pixels (px) are the least problematic. One issue with px, though, is that older versions of IE cannot resize them natively. If developing for an audience that will likely resize text manually through their web browser, the px unit of measurement may not be a good option. Be sure when using px for font sizing that accessibility is not an issue.

Relative Lengths

The other type of length units are relative lengths. This means that their sizes are dependent on the font-size assigned to their parent element. Possible units are em, % and ex.

Not many web designers use ex — it is the height of the letter "x" in the current font.

em and % values are far easier to work with. em and % act identically, and it’s just a matter of syntax:

0.5em is equal to 50%

1em is equal to 100%

0.2em is equal to 20%

0.73em is equal to 73%

2.21em is equal to 221%

html, body { font-size: 85%; /* = (.85em) */ } h1 { font-size: 110%; /* = (1.1em) */ }

The proportions are all relative to the element’s parent font-size. So, if the base font size (in body or html) is set to 80%, a child with a font-size of 0.2em or 20% would be 20% in height of the original 80%.

Font Stacks

CSS font stacks are a list of fonts that include fonts that will work well in various operating systems and platforms, with the goal of making typography as consistent as possible.

Here is an example of a font stack:

body { font-family: Georgia, Times, "Times New Roman", serif; }

In the above example, the web browser will go from left to right until it finds a font in the user’s computer. For example, it will search for the Georgia font, and if it doesn’t find it, it will move on to the Times font, and so on.

There are many options for creating font stacks, and there are many popular premade font stacks available on blogs and in IDEs such as Dreamweaver.

The idea of a font stack is to provide ideal fonts that would be available on many computers, and then provide fallback fonts behind them to degrade to in case the preferred font is not available.

A good goal to strive for is to create beautiful typography for a wide range of users, but also account for the situation that the preferred font is not available to all users.

There are a few key items to keep in mind when creating custom font stacks:

There should be a good amount of fallback fonts. Our above example only lists three, but it would be ideal if there were more.

The fonts selected should be available on a number of platforms. For example, Arial is widely used on Windows, while its near equivalent, Helvetica, is on nearly all Macs.

For font stacks that accomodate Linux users, check out A Web Designer’s Guide to Linux Fonts.

Best Practices for Developing Font Stacks

All fonts in the same font stack should have the same (or similar) aspect ratios. Some fonts are wider or taller per letter than others are, giving them larger aspect ratios.

So, if we put Verdana (mostly Windows) with Helvetica (mostly Macs), we’ve met the above requirements. However, since Verdana is much wider than Helvetica, the text will look dramatically different on most Macs compared to most Windows computers.

The image below show the difference in aspect ratio among four common Windows fonts. As you can see, Verdana and Georgia are wider and taller than both Arial and Times.

In larger blocks of text, the difference is more apparent. If we had a font stack with Verdana to accommodate Windows and Helvetica for Macs, the image below shows the significant difference.

So when developing font stacks:

Make sure you account for the different operating systems (Windows, Mac, and Linux).

Make sure a font stack is all sans serif or is all serif (for consistency)

Make sure the fonts in the stack have similar aspect ratios.

Here is a list of the most common fonts for various aspect ratio types:

Wide sans serif: Verdana, Geneva

Narrow sans serif: Tahoma, Arial, Helvetica

Wide serif: Georgia, Utopia

Narrow serif: Times, Times New Roman

Monospace: Courier, Courier New, Lucida Console

If you need more help on font stacking, CodeStyle has created a very useful font stack builder that includes all fonts between Mac, Windows, and Linux.

CSS Typography Pseudo-classes and Pseudo-elements

CSS pseudo-classes and pseudo-elements are great for targeting certain types of elements. Pseudo-classes start with a colon (:) followed by the class/element name.

There are several CSS pseudo-classes/pseudo-elements related to typography, such as :hover and :first-letter.

Let’s go over some that will help in styling our typography.

Links and Dynamic Pseudo-classes

The design of a website’s hyperlinks is very important. Use anchor link pseudo-classes to create font styles for each link state.

:hover is probably the most familiar, and it is good practice to create a separate (yet similar) style for it to provide a visual cue that a link element is interactive.

Here are the link pseudo-classes:

a:link { color: #666666; text-decoration: none; } a:visited { color: #333333; } a:hover { text-decoration: underline; } a:active { color: #000000; }

First, Last, and n-th Pseudo-elements

The following pseudo-elements all relate to the position of an element relative to the HTML document and the other HTML elements in it.

:first-letter allows you to target the first letter of an element. Here’s an example:

p:first-letter { font-size: 30pt; display: block; float: left; margin: 0 5px 5px 0; }

As you can see, this pseudo-element can be helpful for creating drop caps.

The :first-line pseudo-element allows you to select the first line of an HTML element containing text. Here’s an example for bolding the first line of text and making its letters uppercased:

p:first-line { font-weight: bold; text-transform: uppercase; }

:nth-child() is a CSS3 pseudo-element that will target that nth element in a page or parent element depending on the selector’s specificity. In our example below, we target the second paragraph on the page.

p:nth-child(2) { background: #e7f0ce; padding: 10px; }

We could also target the second paragraph within a div or the second list item in a list as follows:

div p:nth-child(2) { background: #e7f0ce; padding: 10px; } ul li:nth-child(2) { background: #e7f0ce; padding: 10px; }

Also play around with :nth-child(even) and :nth-child(odd) pseudo-classes to grab even and odd elements.

There is also the :first-child pseudo-element (CSS2) and the :last-child (CSS3) pseudo-element that can select the first and last element in a set.

Conclusion

We have covered the basics of CSS typography. With a bit of creativity, typography can go in some beautiful and interesting directions with CSS.

In the next part, we will discuss some CSS techniques and best practices pertaining to CSS typography.

CSS Typography: The Basics

CSS Typography: Techniques and Best Practices

CSS Typography: Examples and Tools

Related Content

A Comprehensive Guide to CSS Resets

100 Exceedingly Useful CSS Tips and Tricks

10 Random CSS Tricks You Might Want to Know About

Related categories: CSS and Web Design

About the Author

Kayla Knight is a web designer and web developer who loves coding way too much for her own good. She does freelance design/development work and helps run the XHTML Shop. Connect with her by visiting her website and following her on Twitter @ KaylaMaeKnight.

How to Create Social Media Buttons Using CSS3

Jacob Gube — Wed, 29 Dec 2010 11:00:13 +0000

Advertise here with BSA

CSS3 is truly amazing. It gives web designers the ability to create flexible and easily reusable design elements, and reduces our reliance on images and graphics editors. This is a guide shows you how to create stylish social media buttons using CSS3, HTML, and some freely available social media icons.

View Demo 1: Inset Buttons

View Demo 2: Outset Buttons

Download Source

Inspiration

One day, I stumbled upon Louis Harboe’s personal website, Graphicpeel, and I noticed his simple yet nicely designed social media buttons at the bottom of the site’s About page. I thought to myself, these are nice but I bet I could do this using just CSS3. And off I went!

HTML

First off, we will set the foundations with some simple HTML. We want to create a div that will contain our buttons and that has a class name of inset. Then we want use an unordered list (
), with each button being a list item (
).

Inside each
tag, we will have a link (). Each link will have an inside it that represents the social media icon, as well as a to hold the text for the button (which will be "LinkedIn", "Facebook", and so forth). The social media icons I used are from Handycons 2 and 108 Free Matte White Square Social Networking Icons.

We can give the span elements a class name of site to be able to style them later on.

Your HTML should look something like the following:

class="inset">

class="site">E-Mail

class="site">LinkedIn

class="site">Facebook

class="site">Twitter

class="site">Flickr

CSS

The bulk of the code will be in CSS. We’ll go over the basic style rules first, and then progressively build up our buttons.

Basic CSS

Let us give our buttons some basic styles. The following code block simply uses CSS2 specs, which will give us a good fallback for browsers that don’t have support for CSS3 specifications (progressive enhancement).

The following is pretty self-explanatory: We just style the list items so that they appear to look like boxy buttons that are laid out side by side (using display:block and float:left).

.inset { font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 14px; list-style-type: none; margin: 10px 0 0 10px; } .inset ul { list-style-type: none; display: block; } .inset li { float: left; height: 30px; margin: 0 8px 7px 0; } .inset li a { background-color: gray; color: #424242; float: left; font-size: 16px; font-weight: bold; height: 24px; padding-left: 27px; padding-top: 6px; position: relative; text-decoration: none; border: 1px solid #bfc1c6; } .inset li a:hover { border: 1px solid #b4b7bb; } .inset li a img { height: 16px; left: 7px; margin-right: 7px; position: absolute; top: 7px; width: 16px; border: none; } .inset li a span { display: block; height: 22px; padding-right: 7px; overflow: hidden; /* width: 70px; Uncomment this to add a fixed width */ } span.site { font-size: 14px; line-height: 20px; }

What we have so far is pretty boring; but that’s to be expected since we haven’t used any CSS3 yet.

Rounded Corners with CSS3

To make these buttons look a bit more stylish, let’s give them some rounded corners using the border-radius property. Keep in mind that we must use vendor specific browser extensions for Mozilla (-moz- for browsers such as Firefox, SeaMonkey, and Flock) and WebKit (-webkit- for browsers such as Safari and Chrome). Other browsers such as Opera and IE9 will recognize the border-radius property without vendor prefixes.

Add these properties to the .inset li a selector:

/* Mozilla browsers that use Gecko layout engine */ -moz-border-radius: 5px; /* Safari and Chrome that use WebKit layout engine */ -webkit-border-radius: 5px; /* W3C CSS Level 3.0 specifications. For Opera and IE9 */ border-radius: 5px;

Color Gradients with CSS3

With CSS3 gradients, we can do some pretty cool stuff that otherwise would need to be done with CSS background images created in a graphics editor like Photoshop. CSS3 gradients allow us to add color gradients to any HTML element that can result in many interesting things such as CSS3 design patterns and illustrative renderings such as Christmas baubles.

To create the gradient on our buttons, we will use the gradient value syntax (i.e. linear-gradient() and gradient()) assigned to the background property.

The implementation for Mozilla browsers and WebKit browsers is different, so although we’re trying to do the same thing, the code will be different for each browser layout engine.

Notice that for Mozilla (-moz-), I have used percentages, whereas for WebKit (-webkit-) I have to use decimals; 1% in Mozilla is .01 in WebKit, 10% in Mozilla is equivalent to .10 in WebKit, and so on.

Add these styles to the .inset li a selector:

/* Mozilla browsers that use Gecko layout engine */ background: -moz-linear-gradient(#a5a7aa, #bec1c5 1%, #d8dbdf 10%, #d8dbdf); /* Safari and Chrome that use WebKit layout engine */ background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a5a7aa),color-stop(.01, #bec1c5),color-stop(.10, #d8dbdf),color-stop(1, #d8dbdf));

Styling the :hover Pseudo-class

Let’s go ahead and change the way the buttons look when the user hovers over them. By changing up the gradient colors slightly when a user mouses over one of the buttons, we can give her a visual cue that it is clickable. If you wanted to make these even more visually-engaging, you may want to experiment with CSS3 transform functions.

Add these styles to the .inset li a:hover selector:

background: -moz-linear-gradient(#9c9fa2, #b4b7bb 1%, #cdd0d5 10%, #cdd0d5); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9c9fa2),color-stop(.01, #b4b7bb),color-stop(.10, #cdd0d5),color-stop(1, #cdd0d5));

In the image below, I’ve hovered over the E-mail button. As you can see, it is slightly darker than the others.

" />

Alternative Result: "Outset" Buttons with Different Colors

To demonstrate the flexibility that CSS3 offers, let us create a different version of the buttons using the same HTML structure.

HTML

In this example, we need to change the class of the containing div from inset to outset-colored.

Additionally, since each button will be a different color, we must also give them a unique class. We can assign these classes to the tags; for example, Facebook will have class="facebook". You’re probably wondering why I chose to use the class attribute versus the ID attribute: It’s because I want to account for the situation that multiple buttons of the same class can appear on the same page.

Here is the HTML:

class="outset-colored">

class="email"> E-Mail

class="linkedin"> LinkedIn

class="facebook"> Facebook

class="twitter"> Twitter

class="flickr"> Flickr

CSS

The CSS is lengthier than the original, but that’s because each button has a different color. The CSS3 used is very similar; the alternative result just has different color values for the gradients.

Here is the CSS for the alternative result:

/* COLORED OUTSET BUTTONS */ .outset-colored { font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 14px; list-style-type: none; margin: 10px 0 0 10px; } .outset-colored ul { list-style-type: none; display: block; } .outset-colored li { float: left; height: 30px; margin: 0 8px 7px 0; } .outset-colored li a { color: #424242; float: left; font-size: 16px; font-weight: bold; height: 24px; padding-left: 27px; padding-top: 6px; position: relative; text-decoration: none; border: 1px solid #bfc1c6; border-radius: 5px; background-color: #D8D9DD; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* EMAIL */ .outset-colored li a.email { background: -moz-linear-gradient(#ff6666, #cc0000 10%, #c40202); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff6666),color-stop(.10, #cc0000),color-stop(1, #c40202)); color: #f3f3f3; border: 1px solid #c40202; } .outset-colored li a:hover.email { background: -moz-linear-gradient(#c40202, #cc0000 1%, #e03434 10%, #e03434); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c40202),color-stop(.01, #cc0000),color-stop(.10, #e03434),color-stop(1, #e03434)); } /* LINKEDIN */ .outset-colored li a.linkedin { background: -moz-linear-gradient(#7cd0fb, #38a5dc 10%, #2c83ae); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7cd0fb),color-stop(.10, #38a5dc),color-stop(1, #2c83ae)); color: #f3f3f3; border: 1px solid #2c83ae; } .outset-colored li a:hover.linkedin { background: -moz-linear-gradient(#2c83ae, #38a5dc 1%, #41b9f6 10%, #41b9f6); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2c83ae),color-stop(.01, #38a5dc),color-stop(.10, #41b9f6),color-stop(1, #41b9f6)); } /* FACEBOOK */ .outset-colored li a.facebook { background: -moz-linear-gradient(#7aa3f7, #4c72c3 10%, #3b5998); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7aa3f7),color-stop(.10, #4c72c3),color-stop(1, #3b5998)); color: #f3f3f3; border: 1px solid #3b5998; } .outset-colored li a:hover.facebook { background: -moz-linear-gradient(#3b5998, #4c72c3 1%, #5c8aea 10%, #5c8aea); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b5998),color-stop(.01, #4c72c3),color-stop(.10, #5c8aea),color-stop(1, #5c8aea)); } /* TWITTER */ .outset-colored li a.twitter { background: -moz-linear-gradient(#8ae0fd, #24bce6 10%, #1e9ec1); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8ae0fd),color-stop(.10, #24bce6),color-stop(1, #1e9ec1)); color: #f3f3f3; border: 1px solid #1e9ec1; } .outset-colored li a:hover.twitter { background: -moz-linear-gradient(#1e9ec1, #24bce6 1%, #33ccff 10%, #33ccff); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #24bce6),color-stop(.01, #33ccff),color-stop(.10, #33ccff),color-stop(1, #33ccff)); } /* FLICKR */ .outset-colored li a.flickr { background: -moz-linear-gradient(#fc75ba, #e10374 10%, #c10263); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fc75ba),color-stop(.10, #e10374),color-stop(1, #c10263)); color: #f3f3f3; border: 1px solid #c10263; } .outset-colored li a:hover.flickr { background: -moz-linear-gradient(#c10263, #e10374 1%, #ff0283 10%, #ff0283); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c10263),color-stop(.01, #e10374),color-stop(.10, #ff0283),color-stop(1, #ff0283)); } .outset-colored li a img { height: 16px; left: 7px; margin-right: 7px; position: absolute; top: 7px; width: 16px; border: none; } .outset-colored li a span { display: block; height: 22px; padding-right: 7px; overflow: hidden; /*width: 70px; Add a width here if you want all the buttons to be the same size.*/ } span.site { font-size: 14px; line-height: 20px; }

Related Content

Create a CSS3 Call to Action Button

Semantic CSS3 Lightboxes

How to Create CSS3 Christmas Tree Ornaments

Related categories: CSS and Web Design

About the Author

Andrew Roberts is a Christian with a passion for web design and development. His web interests focus mostly on HTML/CSS, JavaScript, & PHP/MySQL. When he’s not glued to the computer, he’s spending time with his girlfriend Kaitlynn, photographing animals, or reading. His goal is to attend graduate school for Biblical Studies & Ministry.

Should You Reset Your CSS?

Jacob Gube — Thu, 23 Dec 2010 16:30:02 +0000

Advertise here with BSA

This article explores the ongoing debate on whether or not web designers and web developers should reset their CSS, sharing the thoughts and opinions of several web professionals.

This is a three-part series of articles on the topic of CSS resets. After discussing the rich and interesting history of CSS resets (Part 1) and going over CSS reset stylesheet options (Part 2), we will now discuss the pros and cons of using reset stylesheets here in Part 3.

Part 1: The History of CSS Reset

Part 2: A Comprehensive Guide to CSS Resets

Part 3: Should You Reset Your CSS?

The Benefits of Resetting Your CSS

Web designer/developer and book author Morten Rand-Hendriksen is a huge fan of CSS resets; he has advised everyone to use them as the foundation of their stylesheets. "If you don’t define all the default CSS parameters in your style sheet, the browser will use its default parameters instead," Rand-Hendriksen said in his blog. "And since different browsers have different parameters your site will end up looking different depending on what browser you use."

In an interview by email, Chris Coyier–a web developer and the founder of the web design community, CSS-Tricks–expressed support for the universal selector margin/padding reset (discussed in Part 1). He said that all he’s "ever used is * { margin: 0; padding: 0; }."

Defending the "hard reset" method, Coyier outlined two main concerns that web designers typically have against using the universal selector.

The first is that it can break web browser default styles for things such as form elements, which he said was "untrue" unless you use a border:0 property in the style rule.

The other concern of using the universal selector to reset your styles is the performance hit caused by using such an unspecific selector. But Coyier argues that, while this is true technically, "almost all slowdowns that occurs from it is so minuscule that I guarantee nobody will ever notice."

In Support of No CSS Reset

Web developer Florent Verschelde made a strong case for not using CSS resets, and instead, suggests that web designers should rely on well-crafted stylesheets to address cross-browser inconsistencies. Verschelde argues that "browser defaults are sensible and useful."

Thanks to the default style rules of web browsers, "your content will always be readable (though not sexy)," according to Verschelde. "If you take them away, you risk having content (say, user-generated content) that ends up being unstyled, raw."

Most designers and developers who believe that browser defaults cause most layout problems are wrong, according to Verschelde. "With sufficient knowledge of CSS, you will realize that most of those things you thought were inconsistencies due to browser defaults are actually caused by poor understanding of the collapsing margins standard mechanism; hasLayout bugs in IE 6-7," he said.

Most of the actual inconsistencies crop up in the margins and padding of the body element, the margins and padding of lists, and heading font sizes. "If you feel like those few inconsistencies justify setting everything to zero then having to specify the exact margin and padding of most elements in each situation, then do use a reset stylesheet," Verschelde said. For those looking for a different solution, he offered his "no reset" base stylesheet as an alternative.

In 2008, developer/designer Jens Meiert wrote, "reset style sheets are bad: A novice should not use them, an expert would not use them." Meiert justifies his contention by noting that reset stylesheets assign baseline defaults that are just overwritten later on anyway (which makes your CSS inefficient and redundant).

In a blog post titled No CSS Reset, developer and book author Jonathan Snook said that he’s "okay if the various browsers show things slightly differently." He likes his "lists to have bullets and strong elements to have bolded text."

Web standards and accessibility advocate, Tommy Olsson, professes that he’s not "a big fan of CSS resets" in an interview via email in late 2010. He said people that use CSS resets are "stuck in a print design mindset," and are continuing to believe in the myth of "Pixel Perfection". He finds CSS reset stylesheets inefficient, because you "provide a lot of rules that you know you’re going to override later."

Main Concerns with CSS Reset Stylesheets

Russ Weakley pointed out three major concerns with resetting your CSS:

Every element that is "zeroed" must then be redefined. This can cause an increase in CSS file size.

CSS reset stylesheets can present issues if you remove the default behavior for an element and then forget to restyle it.

Some reset stylesheets can be harmful to users who rely on keyboards for navigation.

In a 2010 interview by email, Weakley said that he was surprised when he found that designers and developers used his caveats as evidence that resets should not be used at all. He said that CSS reset stylesheets should be viewed as another tool that designers could use, tweak, and modify to suit their own needs.

Problems with the Universal Selector

Web developer Dave Ward noted three problems associated with using the universal selector (*).

First, more properties than just margins and padding need to be reset.

Second, the "collateral damage" from the use of the universal selector "wreaks havoc on form styling."

Third, the universal selector "has negative performance implications in almost every scenario, whether a CSS reset or routine CSS styling."

Unloading on Eric Meyer’s Reset CSS

Eric Meyer’s Reset CSS–perhaps currently the most popular CSS reset stylesheet–has come under fire in more than a few occasions.

It seems that many users failed to read Meyer’s discussions of Reset CSS and just dropped it into their designs without paying attention to the author’s advice that it should be used as "a starting point, not a self-contained black box of no-touchiness."

Dissecting Reset CSS

In 2007, web developer Gary Turner dissected Meyer’s Reset CSS, in part, to argue against CSS reset stylesheets in general (read his forum post titled Global resets considered harmful). He noted that Reset CSS includes deprecated items (such as and ) as well as unnecessary/redundant styling of elements that already have no padding or margin (such as and ). Turner is pretty vocal about his opposition to the entire concept of resets, but his opinions don’t go entirely unopposed. In a SitePoint forum post, web designer Dan Schulz suggested that "being able to kill the margins on non-form elements" helps a lot. "It’s a lot like the way the Marine Corps trains its recruits. In order to build up a Marine, you first have to tear down the teen," he said. The Use of :focus in Reset CSS In a slideshow presentation, Weakley cited the following code as being harmful to keyboard users: :focus {outline: 0} When there is no visual representation of the active element (such as a link), it makes web page navigation difficult for keyboard users because they are unable to see which HTML element they are currently on. In an email interview, Meyer discussed the :focus controversy and said that he didn’t anticipate that people would just use Reset CSS without first understanding how it worked. Regarding the :focus style rule, he said: "Honestly, I put it in there to get people to define one. Clearly what I should have done was have outlined 3px solid red or something like that." "From an accessibility viewpoint the mistake was in mentioning it at all, unfortunately. But on the other hand, you can’t really get away with, ‘Maybe if we don’t mention this, no one will ever notice it.’ They always notice it," Meyer said. Meyer promised an update to Reset CSS which will probably take the rule out and replace it with a comment reminding its users to define a visible :focus style rule. The importance of making sure that the :focus pseudo-class selector has a visual property is such that a website called outlinenone.com has the single mission of warning against setting the outline CSS property to none or 0 for links. To learn more about this issue, Patrick Lauke has a tutorial on styling the :focus pseudo-class. The Voices of Moderation Naturally, there’s a middle ground to this whole thing. In November 2009, author and designer Jason Cranford Teague examined the issues revolving around resetting CSS and came down firmly in the center. He suggests that the use of resets should be determined by the needs of the web design project. He noted the same pros and cons others had discussed about the use of resets and concluded that you should keep yours as simple as possible. "Keep it simple, keep it compressed, and keep it at the top," Teague advised. Meyer himself is quite evenhanded about the use of resets. In April 2008, he wrote: "They’re a starting point. If a thousand people took them and created a thousand different personalized style sheets, that would be right on the money. But there’s also nothing wrong with taking them and writing your own overrides. If that works for you, then awesome. For others, reset styles are more of an impediment. That’s only to be expected; we all work in different ways." Eric Meyer says that the key is to "evaluate various tools by thinking about how they relate to the ways you do what you do — and then choose what tools to use, and how, and when. That’s the mark of someone who thinks seriously about their craft and strives to do it better." Acknowledgements Thank you to the individuals that contributed to this three-part series on CSS resets. Faruk Ateş Tantek Çelik Richard Clark Chris Coyier Alex Dawson Nate Koechley Andrew Krespanis Eric Meyer Paul O’Brien Tommy Olsson Russ Weakley My friends and colleagues on the SitePoint forums CSS Reset Resources and Tools CSS Negotiation and a Sanity Saving Shortcut CSS Tools: Reset CSS Starting with CSS: revisited HTML5 Reset Stylesheet Undoing html.css and using debug scaffolding undohtml.css (2010) YUI 3 Library Related Content Resetting Your Styles with CSS Reset Structural Naming Convention in CSS 100 Exceedingly Useful CSS Tips and Tricks Related categories: CSS and Web Design About the Author Michael Tuck is an educator, writer, and freelance web designer. He serves as an advisor to the Web Design forum on SitePoint. When he isn’t teaching or designing sites, he is doing research for the History Commons. You can contact him through his website, Black Max Web Design. How to Create CSS3 Christmas Tree Ornaments Jacob Gube — Tue, 21 Dec 2010 11:44:32 +0000 Advertise here with BSA In this guide, we will display the power of CSS3 in drawing complex shapes. We will magically create Christmas tree ornaments using only CSS3 and HTML (no images). In particular, we will be drawing baubles, which are the hallmark ornamentation of Christmas trees. Note that this is merely a fun, proof-of-concept that explores the possible applications of CSS3. If you intend to use this in production, you should be aware that what we will be creating uses W3C specifications that are not yet, or will never be, supported in many browsers (such as IE6 through IE8). Also, the markup must be updated in order to avoid empty div elements. View Demo Download Source CSS Ingredients Before we get started, let’s just quickly go over what we be using. :before and :after pseudo-elements: Using pseudo-elements will help us in reducing the amount of unnecessary HTML we need to use. If you have worked with rounded corners in CSS2 before, you probably know that, in order to produce flexible rounded corners that accommodate various sizes of content, you had to use a lot of empty divs and such. By using these elements, we will have minimal markup. In this case, just one empty div per bauble, which, if you were enterprising, you would fill with some text content. Note that these pseudo-elements are in CSS2 specs. CSS3 linear and radial gradients: To get the metallic color fills and shines of the baubles, we will use color gradients. Box shadows, transformations, border radius, etc.: To create the shapes, we will be using a combination of box-shadow, transform, and border-radius (for rounded corners). HTML First, let us create the markup. As you can see below, the structure is quite minimal and contains only the minimum amount of markup necessary. Since the globes need to be block elements, I chose to go with instead of , however, if you are not comfortable with that, you can use tags and then use the display: block CSS property/value pair. I have placed them in an unordered list because I decided that they are a group of items with no particular hierarchy (e.g. red-bauble is not greater than green-bauble), and so, to me, the metaphor of unordered lists is retained. Explanation of the IDs/classes: #bauble-container is our unordered list, which will be used for targeting the list items ( ) with greater specificity. .bauble is the main part of the ornament; the spherical shape. .red-bauble, .blue-bauble, .yellow-bauble and .green-bauble are the classes used for adding color variations. It makes our work flexible so that, if you wanted various combinations, you’re not stuck with the color combinations I chose. For example, you could have two yellow baubles or no yellow baubles–that’s why we use classes, and not IDs, for these. CSS What follows are the style rules that will turn our boring unordered list above into a magical set of Christmas tree ornaments. For discussion, I have commented the CSS below so that you can see how it works to highlight the major parts of the CSS. Note that, in production, you would not want this much commenting in your stylesheet because it is over the top and because it can increase your stylesheet’s file size. /* General */ html { background: #f2f5f6; /* Fallback background color if gradients are not supported */ background: -moz-linear-gradient(top, #f2f5f6, #c8d7dc); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c8d7dc),color-stop(1, #f2f5f6)); height: 100%; } #bauble-container { list-style: none; /* Remove bullets */ width: 568px; margin: 150px auto; /* Center it */ padding: 0; /* In production, this may not be needed if you reset your styles in your global stylesheet: http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ */ } #bauble-container li { margin: 0 20px; /* let's add some space */ float: left; /* place them in line */ } /* This is the part where the Christmas bauble string is added */ #bauble-container li:before { content: ""; background: #dadada; /* Fallback */ background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) ); background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0))); height: 50px; width: 2px; display: block; margin: 0 auto; } /* Alernatively rotate them */ #bauble-container li:nth-child(odd) { -moz-transform: rotate(-5deg); /* Firefox */ -webkit-transform: rotate(-5deg); /* Chrome and Safari */ -o-transform: rotate(-5deg); /* Opera */ -ms-transform: rotate(-5deg); /* Surprise! IE9 with its own prefix */ } #bauble-container li:nth-child(even) { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg); } /* Style the bauble */ .bauble { -moz-border-radius: 100px; border-radius: 100px; -moz-box-shadow: 0 0 5px #777777; box-shadow: 0 0 5px #777777; -webkit-box-shadow: 0 0 5px #777777; border: 1px solid rgba(0,0,0,0.3); position: relative; height: 100px; width: 100px; } /* Style the bauble head */ .bauble:before { content: ""; background: #fff; /* Fallback */ background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c ); background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c)); -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset; box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset; border: 1px solid #dadada ; height: 10px; width: 20px; position: absolute; left: 50%; top: -12px; margin-left: -10px; } /* Add bauble light reflection */ .bauble:after { content: ""; -moz-border-radius: 100px; border-radius: 100px; background: #fff; /* Fallback */ background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) ); background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1))); position: absolute; top: 0; left: 50%; margin-left: -40px; opacity: 0.15; height: 80px; width: 80px; } /* Colorize them */ .red-bauble { background: #c8171f; background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f); background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f)); } .blue-bauble { background: #00a1ee; /* Fallback */ background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee); background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee)); } .yellow-bauble { background: #fcb83d; /* Fallback */ background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d); background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d)); } .green-bauble { background: #4d8d00; /* Fallback */ background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00); background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00)); } Comparison of How Web Browsers Render CSS3 So how does our work look in various browsers? Let’s have a look, shall we? Mozilla Firefox 3.6 Google Chrome 6.0.4 In Google Chrome, you may notice slightly different color tones because of the difference in the way the CSS3 gradients are rendered. Safari 5.02 The ornaments in Safari and Chrome are almost identical because they use the same layout engine (WebKit). Opera 10.63 Although Opera browsers support most of the W3C CSS3 specs, the color gradients are missing so they degrade to the solid color we set for the background properties. IE9 Preview IE9 behaves similarly to Opera, but the latest news regarding this browser is that it will support 2D transformations like WebKit (with its own vendor prefix, -ms-). IE8 Even if IE8 has support for pseudo-elements like :before and :after, it totally lacks CSS3 support, so our baubles look like boxes. I included it here just for you to see how our work degrades in browsers that do not have CSS3 support. They look like floppy disks (linked because our younger audience might not know what these ancient devices are), so they might be suitable for a geeky family’s Christmas tree! IE6 and IE7 couldn’t join our Christmas party for well-known reasons: they lack more than just CSS3 specifications support, but also the :before and :after pseudo-elements; so we would just have four squares with different colors in these two browsers. I hope you were inspired to learn about CSS3 in this guide and that you have discovered a trick or two that you can use in your projects. I wish you a Merry Christmas and Happy Holidays! Related Content 100 Exceedingly Useful CSS Tips and Tricks A Comprehensive Guide to CSS Resets CSS3 Card Trick: A Fun CSS3 Experiment Related categories: CSS and Web Design About the Author Catalin Rosu, a.k.a. Red, is a web designer and developer with over 5 years experience in the industry. You can find articles or tutorials on CSS tips and tricks by visiting his blog at red-team-design.com. You can connect with him on Twitter as @catalinred.

Six Revisions » CSS

How to Bulletproof @font-face Web Fonts

Web Fonts Aren’t Displaying

Workaround for Web Servers that Remove Response Headers

Debugging Response Header Issues with Developer Tools

Troubleshooting with VPN Services

Flash of Unstyled Text (on Slow Internet Connections)

Simulating a Slow Internet Connection

Web Fonts Render Inconsistently on Different Operating Systems

Windows Font Rendering

Mac OS Font Rendering

Test in Different Operating Systems

Conclusion

Related Content

About the Author

Are You Using CSS3 Appropriately?

CSS3 Does Not Change Design

Using CSS3 Appropriately

Conclusion

Related Content

About the Author

A Guide to CSS Colors in Web Design

Color Value Notation

Hexadecimal Value Notation

RGB Value Notation

HSL Value Notation

Color Keywords and X11

System Colors

Color Opacity and Transparency

Opacity

Transparency

Safe Colors

Really-safe Colors

Web-safe Colors

Web-smart Colors

Web Accessibility Considerations

Monochromacy

Dichromacy

Trichromacy

Color Associations

Color Tools and Resources

Color Charts

Color Pickers

Conclusion

Related Content

About the Author

CSS Typography: Examples and Tools

Case Studies on CSS Typography

CSS Typography Tools

CSS Typography Showcase

Further Reading and Resources on CSS Typography

Conclusion

Related Content

About the Author

Embracing and Using CSS3 Pragmatically

Progressive Enhancement

Use Site Data to Make Decisions

Learn and Practice CSS3 on Your Own Site

Summary

Related Content

About the Author

CSS Typography: Techniques and Best Practices

Better Web Typography with @font-face

Vertical Rhythm

Working with Text and Whitespace CSS Properties

Text CSS Properties

Text Direction

White-space, Letter-spacing, and Word-Spacing

Text Shadows

CSS Typography Best Practices

Serif or Sans serif?

Semantic Markup

Create Baseline Styles

Use 1.5em for Line-Height

Use Shorthand CSS

Conclusion

Related Content

About the Author

CSS Typography: The Basics

Typography CSS Properties