Overview: What We Will Cover Today

We’ll start with what you could call the fundamental properties and capabilities of CSS, ones that we commonly use to build CSS-based websites:

1. Padding vs. margin
2. Floats
3. Center alignment
4. Ordered vs. unordered lists
5. Styling headings
6. Overflow
7. Position

Once you are comfortable with the basics, we will kick it up a notch with some neat tricks to build your CSS website from scratch and make some enhancements to it.

1. Background images
2. Image enhancement
3. PSD to XHTML

1. Padding vs. Margin

Most beginners get padding and margins mixed up and use them incorrectly. Practices such as using the height to create padding or margins also lead to bugs and inconsistencies. Understanding padding and margins is fundamental to using CSS.

What Is Padding and Margin?

Padding is the inner space of an element, and margin is the outer space of an element.

The difference becomes clear once you apply backgrounds and borders to an element. Unlike padding, margins are not covered by either the background or border because they are the space outside of the actual element.

Take a look at the visual below:

Margin and padding values are set clockwise, starting from the top.

Practical example: Here is an <h2> heading between two paragraphs. As you can see, the margin creates white space between the paragraphs, and the padding (where you see the background gray color) gives it some breathing room.

Margin and Padding Values

In the above example of the heading, the values for the margin and padding would be:

To optimize this line of code further, we use an optimization technique called “shorthand,” which cuts down on repetitive code. Applying the shorthand technique would slim the code down to this:

Here is what the complete CSS would look like for this heading:

Quick Tip

Keep in mind that padding adds to the total width of your element. For example, if you had specified that the element should be 100 pixels wide, and you had a left and right padding of 10 pixels, then you would end up with 120 pixels in total.

100px (content) + 10px (left padding) + 10px (right padding) = 120px (total width of element)

Margin, however, expands the box model but does not directly affect the element itself. This tip is especially handy when lining up columns in a layout!

Additional resources:

• Box Model
• Margins and Padding
• The Definitive Guide to Using Negative Margins
• CSS Shorthand Guide
• CSS Margin
• CSS Padding

2. Floats

Floats are a fundamental element in building CSS-based websites and can be used to align images and build layouts and columns. If you recall how to align elements left and right in HTML, floating works in a similar way.

According to HTML Dog, the float property “specifies whether a fixed-width box should float, shifting it to the right or left, with surrounding content flowing around it.”

The float: left value aligns elements to the left and can also be used as a solid container to create layouts and columns. Let’s look at a practical situation in which you can use float: left.

The float: right value aligns elements to the right, with surrounding elements flowing to the left.

Quick tip: Because block elements typically span 100% of their parent container’s width, floating an element to the right knocks it down to the next line. This also applies to plain text that runs next to it because the floated element cannot squeeze in the same line.

You can correct this issue in one of two ways:

1. Reverse the order of the HTML markup so that you call the floated element first, and the neighboring element second.
   
2. Specify an exact width for the neighboring element so that when the two elements sit side by side, their combined width is less than or equal to the width of their parent container.
   

Internet Explorer 6 (IE6) has been known to double a floated element’s margin. So, what you originally specified as a 5-pixel margin becomes 10 pixels in IE6.

A simple trick to get around this bug is to add display: inline to your floated element, like so:

Additional resources:

• Floatutorial
• Clearing Floats
• CSS Float Theory: Things You Should Know
• CSS-Tricks: All About Floats
• Containing Floats
• W3Schools: Clear
• W3Schools: Float

3. Center Alignment

The days of using the <center> HTML tag are long gone. Let’s look at the various ways of center-aligning an element.

Horizontal Alignment

You can horizontally align text elements using the text-align property. This is quite simple to do, but keep in mind when center-aligning inline elements that you must add display: block. This allows the browser to determine the boundaries on which to base its alignment of your element.

To horizontally align non-textual elements, use the margin property.

The W3C says, “If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.”

Horizontal alignment can be achieved, then, by setting the left and right margins to auto. This is an ideal method of horizontally aligning non-text-based elements; for example, layouts and images. But when center-aligning a layout or element without a specified width, you must specify a width in order for this to work.

To center-align a layout:

To center-align an image:

Vertical Alignment

You can vertically align text-based elements using the line-height property, which specifies the amount of vertical space between lines of text. This is ideal for vertically aligning headings and other text-based elements. Simply match the line-height with the height of the element.

To vertically align non-textual elements, use absolute positioning.

The trick with this technique is that you must specify the exact height and width of the centered element.

With the position: absolute property, an element is positioned according to its base position (0,0: the top-left corner). In the image below, the red point indicates the 0,0 base of the element, before a negative margin is applied.

By applying negative top and left margins, we can now perfectly align this element both vertically and horizontally.

Here is the complete CSS for horizontal and vertical alignment:

Related articles:

• Vertical Centering With CSS
• Centering Things
• CSS Centering 101
• CSS Centering: Fun for All!
• Two Simple Ways to Vertically Align with CSS

4. Ordered vs. Unordered Lists

An ordered list, <ol>, is a list whose items are marked with numbers.

An unordered list, <ul>, is a list whose items are marked with bullets.

By default, both of these list item styles are plain and simple. But with the help of CSS, you can easily customize them.

To keep the code semantic, lists should be used only for content that is itemized in a list-like fashion. But they can be extended to create multiple columns and navigation menus.

Customizing Unordered Lists

Plain bullets are dull and may not draw enough attention to the content they accompany. You can fix this with a simple yet effective technique: remove the default bullets and apply a background image to each list item.

Here is the CSS for custom bullets:

Resources for list items:

• CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices
• Style Your Ordered List
• CSS Design: Taming Lists

Using Unordered Lists for Navigation

Most CSS-based navigation menus are now built as lists. Here is a breakdown of how to turn an ordinary list into a horizontal navigation menu.

HTML: begin with a simple unordered list, with links for each list item.

CSS: we remove the default bullets (as we did when we made custom bullets) by specifying list-style: none. Then, we float each list item to the left so that the navigation menu appears horizontal, flowing from left to right.

Additional resources:

• CSS-Based Navigation Menus: Modern Solutions
• 30 Exceptional CSS Navigation Techniques
• Using CSS and Unordered List Items to Do Just About Anything
• Nifty Navigation Tricks Using CSS
• Centering List Items Horizontally
• Digg-Like Navigation Bar Using CSS

5. Styling Headings

The heading HTML tag is important for SEO. But regular headings can look dull. Why not spice them up with CSS and enjoy the best of both worlds?

Once you have the main styling properties set for your headings, you can now nest inline elements to target specific text for extra styling.

Your HTML would look like this:

And your CSS would look like this:

Additional typography-related resources:

• 10 Examples of Beautiful CSS Typography, and How They Did It
• 12 CSS Tools and Tutorials for Beautiful Web Typography
• CSS Gradient Text Effect
• 50 Useful Design Tools For Beautiful Web Typography
• 6 Ways to Improve Your Web Typography
• CSS Typography: Contrast Techniques, Tutorials and Best Practices
• 8 Simple Ways to Improve Typography in Your Designs
• How to Size Text in CSS

6. Overflow

The overflow property can be used in various ways and is one of the most useful properties in the CSS arsenal.

What Is Overflow?

According to W3Schools.com, “the overflow property specifies what happens if content overflows an element’s box.”

Take a look at the following examples to see how this works.

Visually, overflow: auto looks like an iframe but is much more useful and SEO-friendly. It automatically adds a scroll bar (horizontal, vertical or both) when the content within an element exceeds the element’s box or boundary.

The overflow: scroll property works the same but forces a scroll bar to appear regardless of whether or not the content exceeds the element’s boundary.

And the overflow: hidden property masks or hides an element’s content if it exceeds the element’s boundary.

Quick tip: have you ever had a parent element that did not fully wrap around its child element? You can fix this by making the parent container a floated element.

In some cases, though, floating left or right is not a workable solution — for example, if you want to center-align the container or do not want to specify an exact width. In this case, use overflow: hidden on your parent container to completely wrap any floated child elements within it.

Additional resources:

• HTML Dog: Overflow
• W3Schools: Overflow
• CSS Globe: Create Resizing Thumbnails
• CSS-Tricks: CSS Overflow Breakdown

7. Position

Positioning (relative, absolute and fixed) is one of the most powerful properties in CSS. It allows you to position an element using exact coordinates, giving you the freedom and creativity to design out of the box.

You have to do three basic things when using positioning:

1. Set the coordinates (i.e. define the positioning of the x and y coordinates).
2. Choose the right value for the situation: relative, absolute, fixed or static.
3. Set a value for the z-index property: to layer elements (optional).

With position: relative, an element is placed in its natural position. For example, if a relatively positioned element sits to the left of an image, setting the top and left coordinates to 10px would move the element just 10 pixels from the top and 10 pixels from the left of that exact spot.

Relative positioning is also commonly used to define the new point of origin (the x and y coordinates) of absolutely positioned nested elements. By default, the base position of every element is the top-left corner (0,0) of the browser’s view port. When you give an element relative positioning, then the base position of any child elements with absolute positioning will be positioned relative to their parent element — i.e. 0,0 is now the top-left corner of the parent element, not the browser’s view port.

An element with a value of position: absolute can be placed anywhere using x and y coordinates. By default, its base position (0,0) is the top-left corner of the browser’s view port. It ignores all natural flow rules and is not affected by surrounding elements.

The base position of an element with a position: fixed value is also the top-left corner of the browser’s view port. The difference with fixed positioning is that the element will be fixed to its location and remain in view even when the user scrolls up or down.

The z-index property specifies the stack order of an element. The higher the value, the higher the element will appear.

Think of z-index stacking as layering. Check out the image below for an example:

Additional resources:

• W3Schools: CSS Positioning
• CSS-Tricks: Absolute, Relative, Fixed Positioning
• Stopping the CSS Positioning Panic
• Learn CSS Positioning in Ten Steps
• In-Depth Coverage of CSS Layers, Z-Index, Relative and Absolute Positioning

Adding Flavor With CSS

Now that you understand the basics, step up your game by adding a bit of flavor to your CSS. Below are some common techniques for enhancing and polishing your layout and images. We’ll also challenge you to create your own website from scratch using pure CSS.

9. Background Images

Background images come in handy for many visual effects. Whether you add a repeating background image to cover a large area or add stylish icons to your navigation, the property makes your page come to life.

Note, though, that the default print setting excludes the background property. When creating printable pages, be mindful of which elements have background images and include image tags.

Using Large Backgrounds

With monitor sizes getting bigger and bigger, large background images for websites have become quite popular.

Check out this detailed tutorial by Nick La of WebDesigner Wall on how to achieve this effect:

Also be sure to read the article on Webdesigner Depot about the “Do’s and Don’ts of Large Website Backgrounds.”

Text Replacement

You may be aware that not all standard browsers yet support custom fonts embedded on a website. But you can replace text with an image in various ways. One rather simple technique is to use the text-indent property.

Most commonly seen with headings, this technique replaces structured HTML text with an image.

You may sometimes need to specify a width and height (as well as display: block if the element is inline).

Articles on text replacement:

• Nine Techniques for CSS Image Replacement
• Using background-image to Replace Text
• Image Placement vs. Image Replacement
• Revised Image Replacement

CSS Sprites

CSS Sprites is a technique in which you use background positioning to show only a small area of a larger single background image (the larger image being actually multiple images laid out in a grid and merged into one file).

CSS Sprites are commonly used with icons and the hover and active states of images that have replaced links and navigation items.

Why use CSS Sprites? CSS Sprites save loading time and cut down on CSS and and HTTP requests. To learn more about CSS Sprites, check out the resources below!

Articles on CSS Sprites:

• The Mystery Of CSS Sprites: Techniques, Tools and Tutorials
• Advanced CSS Menu
• CSS Sprite Navigation Tutorial
• Creating Easy and Useful CSS Sprites
• Building Faster Websites with CSS Sprites
• CSS Sprites: Image Slicing’s Kiss of Death
• CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
• What Are CSS Sprites?

10. Image Enhancement

You can style images with CSS in various ways, and some designers have made a lot of effort to create very stylish image templates.

One simple trick is the double-border technique, which does not require any additional images and is pure CSS.

Your HTML would look like this:

And your CSS would look like this:

Nick La of WebDesigner Wall has a great tutorial on clever tricks to enhance your images. Do check it out!

11. PSD to HTML

Now that you have learned the fundamentals of CSS, it’s time to test your skill and build your own website from scratch! Below are some hand-picked tutorials from the best of the Web.

• Slice and Dice that PSD
• Converting a Design from PSD to HTML
• From PSD to HTML, Building a Set of Website Designs Step by Step
• Coding a Clean and Illustrative Web Design from Scratch
• Build a Sleek Portfolio Site from Scratch
• How To Build Your Own Single Page Portfolio Website
• Converting a Photoshop Mockup: Part Two, Episode One

Conclusion

Developing a strong foundation early on is critical to mastering CSS. Given how fast Web technology advances, there is no better time than now to get up to speed on the latest standards and trends.

Hopefully, the techniques we’ve covered here will give you a head start on becoming the ultimate CSS ninja. Good luck, stay hungry and keep learning!

(al)

But all of this change can be stressful, too. How do you keep up with all of the new techniques and make sure your Web pages look great on the increasing number of browsers and devices out there? In part 1 of this article, you’ll learn the five essential characteristics of successful modern CSS websites. In part 2 of this article, you’ll learn about the techniques and tools that you need to achieve these characteristics.

We won’t talk about design trends and styles that characterize modern CSS-based layouts. These styles are always changing. Instead, we’ll focus on the broad underlying concepts that you need to know to create the most successful CSS layouts using the latest techniques. For instance, separating content and presentation is still a fundamental concept of CSS Web pages. But other characteristics of modern CSS Web pages are new or more important than ever. A modern CSS-based website is: progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich.

• Progressively enhanced,
• Adaptive to diverse users,
• Modular,
• Efficient,
• Typographically rich.

Progressive Enhancement

Progressive enhancement means creating a solid page with appropriate markup for content and adding advanced styling (and perhaps scripting) to the page for browsers that can handle it. It results in web pages that are usable by all browsers but that do not look identical in all browsers. Users of newer, more advanced browsers get to see more cool visual effects and nice usability enhancements.

The idea of allowing a design to look different in different browsers is not new. CSS gurus have been preaching this for years because font availability and rendering, color tone, pixel calculations and other technical factors have always varied between browsers and platforms. Most Web designers avoid “pixel perfection” and have accepted the idea of their designs looking slightly different in different browsers. But progressive enhancement, which has grown in popularity over the past few years, takes it a step further. Designs that are progressively enhanced may look more than slightly different in different browsers; they might look very different.

For example, the tweetCC website has a number of CSS 3 properties that add attractive visual touches, like drop-shadows behind text, multiple columns of text and different-colored background “images” (without there having to be actually different images). These effects are seen to various extents in different browsers, with old browsers like IE 6 looking the “plainest.” However, even in IE 6, the text is perfectly readable, and the design is perfectly usable.

tweetCC in Safari.

tweetCC in IE 6.

In CSS 3-capable browsers like Safari (top), the tweetCC website shows a number of visual effects that you can’t see in IE 6 (bottom).

These significant differences between browsers are perfectly okay, not only because that is the built-in nature of the Web, but because progressive enhancement brings the following benefits:

• More robust pages
  Rather than use the graceful degradation method to create a fully functional page and then work backwards to make it function in less-capable browsers, you focus first on creating a solid “base” page that works everywhere.
• Happier users
  You start building the page making sure the basic functionality and styling is the same for everyone. People with old browsers, mobile devices and assistive technology are happy because the pages are clean and reliable and work well. People with the latest and greatest browsers are happy because they get a rich, polished experience.
• Reduced development time
  You don’t have to spend hours trying to get everything to look perfect and identical in all browsers. Nor do you have to spend much time reverse-engineering your pages to work in older browsers after you have completed the fully functional and styled versions (as is the case with the graceful degradation method).
• Reduced maintenance time
  If a new browser or new technology comes out, you can add new features to what you already have, without altering and possibly breaking your existing features. You have only one base version of the page or code to update, rather than multiple versions (which is the case with graceful degradation).
• More fun
  It’s just plain fun to be able to use cool and creative new techniques on your Web pages, and not have to wait years for old browsers to die off.

Learn more about progressive enhancement:

• Progressive Enhancement: What It Is, And How To Use It?
• Progressive Enhancement on Wikipedia
• Progressive Enhancement: Paving the Way for Future Web Design

Adaptive to Diverse Users

Modern CSS-based Web pages have to accommodate the diverse range of browsers, devices, screen resolutions, font sizes, assistive technologies and other factors that users bring to the table. This concept is also not new but is growing in importance as Web users become increasingly diverse. For instance, a few years ago, you could count on almost all of your users having one of three screen resolutions. Now, users could be viewing your pages on 10-inch netbooks, 30-inch widescreen monitors or anything in between, not to mention tiny mobile devices.

In his article “Smart columns with CSS and jQuery” Soh Tanaka describes his techniques that adapts the layout depending on the current browser window size.

Creating Web designs that work for all users in all scenarios will never possible. But the more users you can please, the better: for them, for your clients and for you. Successful CSS layouts now have to be more flexible and adaptable than ever before to the increasing variety of ways in which users browse the Web.

Consider factors such as these when creating CSS layouts:

• Browser
  Is the design attractive and usable with the most current and popular browsers? Is it at least usable with old browsers?
• Platform
  Does the design work on PC, Mac and Linux machines?
• Device
  Does the design adapt to low-resolution mobile devices? How does it look on mobile devices that have full resolution (e.g. iPhones)?
• Screen resolution
  Does the design stay together at multiple viewport (i.e. window) widths? Is it attractive and easy to read at different widths? If the design does adapt to different viewport widths, does it correct for extremely narrow or wide viewports (e.g. by using the min-width and max-width properties)?
• Font sizes
  Does the design accommodate different default font sizes? Does the design hold together when the font size is changed on the fly? Is it attractive and easy to read at different font sizes?
• Color
  Does the design make sense and is the content readable in black and white? Would it work if you are color blind or have poor vision or cannot detect color contrast?
• JavaScript presence
  Does the page work without JavaScript?
• Image presence
  Does the content make sense and is it readable without images (either background or foreground)?
• Assistive technology/disability
  Does the page work well in screen readers? Does the page work well without a mouse?

This is not a comprehensive list; and even so, you would not be able to accommodate every one of these variations in your design. But the more you can account for, the more user-friendly, robust and successful your website will be.

See these resources on user diversity and Web page adaptability:

• Market Share by Net Applications
• Actual Browser Sizes
• Screen Resolutions and Better User Experience
• Fixed vs. Fluid vs. Elastic Layout: What’s the Right One for You?
• Mobile Web Design Trends for 2009

Modular

Modern websites are no longer collections of static pages. Pieces of content and design components are reused throughout a website and even shared between websites, as content management systems (CMS), RSS aggregation and user-generated content increase in popularity. Modern design components have to be able to adapt to all of the different places they will be used and the different types and amount of content they will contain.

Object Oriented CSS is Nicole Sulivan’s attempt to create a framework that would allow developers to write fast, maintainable, standards-based, modular front end code.

Modular CSS, in a broad sense, is CSS that can be broken down into chunks that work independently to create design components that can themselves be reused independently. This might mean separating your style into multiple sheets, such as layout.css, type.css, and color.css. Or it might mean creating a collection of universal CSS classes for form layout that you can apply to any form on your website, rather than have to style each form individually. CMS’, frameworks, layout grids and other tools all help you create more modular Web pages.

Modular CSS offers these benefits (depending on which techniques and tools you use):

• Smaller file sizes
  When all of the content across your website is styled with only a handful of CSS classes, rather than an array of CSS IDs that only work on particular pieces of content on particular pages, your style sheets will have many fewer redundant lines of code.
• Reduced development time
  Using frameworks, standard classes and other modular CSS tools keeps you from having to re-invent the wheel every time you start a new website. By using your own or other developers’ tried and true CSS classes, you spend less time testing and tweaking in different browsers.
• Reduced maintenance time
  When your style sheets include broad, reusable classes that work anywhere on your website, you don’t have to come up with new styles when you add new content. Also, when your CSS is lean and well organized, you spend less time tracking down problems in your style sheets when browser bugs pop up.
• Easier maintenance for others
  In addition to making maintenance less time-consuming for you, well-organized CSS and smartly named classes also make maintenance easier for developers who weren’t involved in the initial development of the style sheets. They’ll be able to find what they need and use it more easily. CMS’ and frameworks also allow people who are not as familiar with your website to update it easily, without screwing anything up.
• More design flexibility
  Frameworks and layout grids make it easy, for instance, to switch between different types of layout on different pages or to plug in different types of content on a single page.
• More consistent design
  By reusing the same classes and avoiding location-specific styling, you ensure that all elements of the same type look the same throughout the website. CMS’ and frameworks provide even more insurance against design inconsistency.

Learn more about modular CSS techniques:

• Object-Oriented CSS
• Making Modular Layout Systems
• Definitive List of CSS Frameworks: Pick Your Style

Efficient

Modern CSS-based websites should be efficient in two ways:

• Efficient for you to develop,
• Efficient for the server and browser to display to users.

As Web developers, we can all agree that efficiency on the development side is a good thing. If you can save time while still producing high-quality work, then why wouldn’t you adopt more efficient CSS development practices? But creating pages that perform efficiently for users is sometimes not given enough attention. Even though connection speeds are getting faster and faster, page load times are still very important to users. In fact, as connection speeds increase, users might expect all pages to load very quickly, so making sure your website can keep up is important. Shaving just a couple of seconds off the loading time can make a big difference.

We’ve already discussed how modular CSS reduces development and maintenance time and makes your workflow a lot faster and more efficient. A myriad of tools are out there to help you write CSS quickly, which we’ll cover in part 2 of this article. You can also streamline your CSS development process by using many of the new effects offered by CSS 3, which cut down on your time spent creating graphics and coding usability enhancements.

Some CSS 3 techniques also improve performance and speed. For instance, traditional rounded-corner techniques require multiple images and DIVs for just one box. Using CSS 3 to create rounded corners requires no images, thus reducing the number of HTTP calls to the server and making the page load faster. No images also reduces the number of bytes the user has to download and speeds up page loading. CSS 3 rounded-corners also do not require multiple nested DIVs, which reduces page file size and speeds up page loading again. Simply switching to CSS 3 for rounded corners can give your website a tremendous performance boost, especially if you have many boxes with rounded corners on each page.

Writing clean CSS that takes advantage of shorthand properties, grouped selectors and other efficient syntax is of course just as important as ever for improving performance. Many of the more advanced tricks for making CSS-based pages load faster are also not new but are increasing in usage and importance. For instance, the CSS Sprites technique, whereby a single file holds many small images that are each revealed using the CSS background-position property, was first described by Dave Shea in 2004 but has been improved and added to a great deal since then. Many large enterprise websites now rely heavily on the technique to minimize HTTP requests. And it can improve efficiency for those of us working on smaller websites, too. CSS compression techniques are also increasingly common, and many automated tools make compressing and optimizing your CSS a breeze, as you’ll also learn in part 2 of this article.

Learn more about CSS efficiency:

• 7 Principles of Clean and Optimized CSS Code
• Simplifying CSS Selectors
• Best Practices for Speeding Up Your Website
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
• 35 CSS Lifesavers For Efficient Web Design

Rich Typography

Rich typography may seem out of place with the four concepts we have just covered. But we’re not talking about any particular style of typography or fonts, but rather the broader concept of creating readable yet unique-looking text by applying tried and true typographic principles using the newest technologies. Typography is one of the most rapidly evolving areas of Web design right now. And boy, does it need to evolve! While Web designers have had few limits on what they could do graphically with their designs, their limits with typography have been glaring and frustrating.

Until recently, Web designers were limited to working with the fonts on their end users’ machines. Image replacement tricks and clever technologies such as sIFR have opened new possibilities in the past few years, but none of these is terribly easy to work with. In the past year, we’ve finally made great strides in what is possible for type on the Web because of the growing support for CSS 3’s @font-face property, as well as new easy-to-use technologies and services like Cufón and Typekit.

The @font-face rule allows you to link to a font on your server, called a “Web font,” just as you link to images. So you are no longer limited to working with the fonts that most people have installed on their machines. You can now take advantage of the beautiful, unique fonts that you have been dying to use.

@font-face in action: Teehanlax.com

Craigmod

Nicewebtype

The three screenshots above are all examples of what @font-face can do.

The main problem with @font-face, aside from the ever-present issue of browser compatibility, is that most font licenses—even those of free fonts—do not allow you to serve the fonts over the Web. That’s where @font-face services such as Typekit, Fontdeck and Kernest are stepping in. They work with type foundries to license select fonts for Web design on a “rental” basis. These subscription-based services let you rent fonts for your website, giving you a much wider range of fonts to work with, while avoiding licensing issues.

For A Beautiful Web uses the Typekit font embedding service for the website name, introductory text and headings.

Ruler of the Interwebs uses the Kernest font embedding service for the website name and headings.

We still have a long way to go, but the new possibilities make typography more important to Web design than ever before. To make your design truly stand out, use these modern typographic techniques, which we’ll cover in even greater detail in Part 2.

See these resources on current CSS typography techniques:

• Webfonts.info Wiki
• Beautiful Fonts With @font-face
• Why Web Font Services Are the Future of Fonts on the Web
• The Direction Forward with Web Fonts
• Roundup of Font Embedding and Replacement Techniques

Summary

We’ve looked at five characteristics of modern CSS websites:

• Progressively enhanced,
• Adaptive to diverse users,
• Modular,
• Efficient,
• Typographically rich.

In part 2 of this article, coming soon, we’ll go over the techniques and tools that will help you implement these important characteristics on your CSS-based Web pages.

About the author

Zoe Mickley Gillenwater is a freelance Web designer specializing in CSS and accessibility. She is the author of the book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, plus a whole bunch of articles. Find out more about her on her blog and on Twitter.