Now before everyone jumps to the comments section, I’m fully aware that there are other solutions including @font-face, Cufon and sIFR but they create their own problems with regards to font licensing. But there is a solution for certain situations and that’s to use more intelligent CSS font stacks.

What is a CSS font stack?

Anyone that is used to creating CSS will be familiar with a font stack:

body { font-family: helvetica, arial, sans-serif; }

The browser will use helvetica if it’s available (usually Mac’s), if it’s not available then it will use Arial (most PC’s) and then if neither of those fonts exist it will use the system’s sans-serif font. This is a fairly common concept and is used all over the web and most designers will stick to using a combination of Andale, Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

However, as mentioned earlier, these fonts were bundled with Windows XP. We now have many users on more modern versions of Windows and common software (like Microsoft Office) which comes bundled with other fonts which are now common to many more machines.

So we can use any font?

Not exactly.

But what we can do is use a font that isn’t included in the web safe font list and provide alternative similar fonts for users who don’t have that font installed on their machine.

For example:

p { Baskerville, "Times New Roman", Times, serif; }

Nathan Ford created an excellent article on CSS font stacks which has some great examples of using fonts by selecting your fonts using the following criteria:

font-family: ideal, alternative, common, generic

He also includes some great examples of good font stacks near the bottom of his post.

For more information on the use of certain typeface on different operating systems, codestyle.org/css/font-family/ has a ton of information and statistics on the subject.

A word of warning

Using font stacks isn’t just a case of picking fonts that look similar in style as letter spacing and sizing can vary significantly between certain fonts so it is always worth testing out how each of the fonts will look in practice. If in doubt then Nathan Ford’s list at the link above is a great starting point.

Also make sure that you set a client’s expectation right from the beginning. A lot of clients will be used to the way that print design works and therefore when you show the design using one font and the functional website uses a slightly different font due to the “ideal” font not being available on their machine, it can create some interesting and unwanted debate at the end of the project so I’d always advise any designer who is planning on using this method to be upfront right from the start and make sure that the client understands that the web is interactive and not all users will have exactly the same experience.

What is an em?

Firstly for anyone that hasn’t used ems before, here’s the definition:

An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font. Originally the unit was derived from the width of the capital “M” in a particular typeface. This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size. So, 1 em in a 16 point typeface is 16 points.

Using ems to set the font size

There’s many ways that you can use ems. Personally, I prefer to set the font size so that all HTML elements within the page are consistent and use 10px throughout a website using the following code:

body, select, input, textarea {
font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif;
}

This is just the starting point though to reset the font size to a consistent level. The 1.4 sets the line-height and following on from that is the font-family which will change depending on the project but the one thing that is consistent is the 0.625em regardless of the website I’m working with.

By doing this, it allows me to easily set font sizes for other elements and containers within the site. For example, if I want to set a font size to 12px then I can do so by declaring an em size of 1.2em; If I want 9px, then it’s 0.9em and so on.

As you can see from the following CSS code, creating font sizes using em values is actually just as easy as using pixels but with the advantage that they can scale regardless of the device or web browser being used:

#navigation {
font-size: 1.4em;
}
h1 {
font-size: 2.4em;
}
#content {
font-size: 1.2em;
}

What about inheriting ems

This causes the biggest confusion for a lot of web designers and is why a lot of people revert back to using pixels. Take the following example:

#content {
font-size: 1.2em;
}
#content p {
font-size: 1.1em;
}

Now, a lot of people might expect that the paragraph would display at 11px given what I explained earlier. However, ems are inherited and therefore the initial 10px would render at 12px due to the #content font value but then assuming that the paragraph is nested within the #content element, it would then be scaled to 1.1em of it’s initial value and would therefore actually appear larger than 12px.

In order to get around this I use the following chart: http://aloestudios.com/tools/emchart/ to determine which em size I need to use in order to inherit the correct font size.

So in the above example, you’d need to use the following:

#content {
font-size: 1.2em;
}
#content p {
font-size: 0.917em; /* this will render at 11px */
}

Summary

Using ems can take a little getting used to but if you want to create accessible font sizes then it really is the best solution and once you’ve got the hang of how ems are inherited they’re a powerful tool.

You can even create truly flexible websites by using ems for entire layouts so that they scale with the users default font setting but I’ll save that tutorial for another time.

Keith has put together an ie.css3.js file which allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined within them. You simply need to include his ie.css.js and the DOMAssistant JavaScript file within the head of your pages for it to work.

Supported Selectors

• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• :only-child
• :first-of-type
• :only-of-type
• :empty

There are some limitations which Keith Clark explains on the ie-css.js website but it does look very promising.

It’ll be interesting to see how Keith continues to develop ie-css3.js as there are lots of other aspects of CSS3 which a lot of web developers are crying out for (rounded corners and multiple background being among my top priorities).

My only reservation is really from an accessibility point of view as developers need to be careful that they’re not excluding any users who don’t have JavaScript available from viewing the design of a web page. If it’s used in such a way that it can be done as progressive enhancement though then I’m all for it and along with the HTML5 JavaScript file we might actually start being able to make use of CSS3 and HTML5 before Microsoft catch up with the other standards compliant browsers.

IE8 was released in March 2009 and was a big step forward and a welcome addition to the browser market for most web developers due to its better support of web standards and CSS2.1 support. However, there was also a lot of frustration that Microsoft were launching a browser that even on its day of release was still some way behind Firefox, Opera and Safari browsers.

CSS3 is the next big thing for front end designers and developers as it will make simple things like rounded corners and multiple background images much easier to accomplish without additional HTML or JavaScript workarounds. But despite Firefox and Safari showing initiative and creating support for these CSS3 features, in reality they’re unusable until the market leader (Internet Explorer) decides to implement them.

So it’s welcome news that Internet Explorer 9 will finally support CSS3.

For more information please have a read over on the Blogs.MSDN website.

Summary

Once again, it’s good to see that Microsoft are developing their browser and focusing on what the web development community want but the Internet Explorer browser seems to be falling further and further behind the other browsers with every release. What Internet Explorer are working on now is already available in Firefox and Safari so by the time IE9 finally hits the shelves (which I wouldn’t expect to be any time soon), the other browsers could be a couple of years ahead in terms of development.

How long will we have to wait for HTML5 video and audio support? CSS3 transformations? Instead of trying to catch up with the other browsers, has the time come where Microsoft should simply use the Webkit engine used by Safari and Google Chrome? What do you think?

Up until recently I’ve been using my Rounded corners with one image method which does cut down on the amount of HTML and images required but when dealing with a lot of rounded corners the CSS can become a bit of a handful. But CSS2.1 didn’t have any alternatives so this was really the best solution to the rounded corners problem.

However, with CSS3 we can create rounded corners with a little bit of CSS.

#container {
width: 840px;
margin: 20px auto;
background: #fff;
padding: 30px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

This does currently only work in Mozilla and Webkit browsers (Firefox, Safari and Google Chrome) but does show the advantages of CSS3 which will be a huge welcome once Internet Explorer supports some of its features.

And here’s a quick example of how this could be put into practice:

• Rounded CSS Corners Example

As you should see, it works nicely in Safari, Firefox and partly in Google Chrome (which doesn’t seem to support the top rounded corners on the tabs) but also doesn’t break in Internet Explorer. When used correctly CSS3 can be used to progressively enhance a design but still be accessible within browsers which don’t support it.

For those people that want it to look identical in all browsers though, there are work arounds and you could apply the rounded corners to Internet Explorer using JavaScript which I’ll cover in my next tutorial.

Summary

So what do you think? Will you start using rounded CSS corners within your own work and client work at the moment or is Internet Explorer holding you back? Please feel free to leave any comments below.

• The Definitive Guide to Using Negative Margins

Personally, I don’t tend to use negative margins all that often as I’d usually use a combination of relative and absolute positioning to create the same effects as those mentioned in the article on Smashing Magazine but as a CSS developer it’s important to understand all aspects of CSS so if you haven’t encountered negative margins in the past then it’s definitely a good article to have a read through.

If nothing else, it adds another tool to your CSS toolbox which can only be a good thing.

If you’ve not tried CSS frameworks then YUI Grids is one of the more famous one’s but they’re popping up all the time with BluePrintCSS, Tripoli and Boilerplate are all worth taking a look at.

However, I’ve never personally understood why CSS frameworks are needed for projects as CSS itself isn’t an especially complicated language when compared to programming languages like JavaScript or PHP.

CSS frameworks are useful for creating quick, robust layouts and do prevent problems occurring especially in the cross browser department whilst for the most part have been thoroughly tested and will stand up to older browsers. But isn’t it better to understand CSS fully and what constraints some browsers have rather than relying on a framework to take care of any issues? How will a web designer feel about working on a project or debugging browser issues if they’ve been totally reliant on a specific framework for all their development projects?

Un-semantic naming conventions

If a web designer fully understands all the complexities of CSS and still decides to use a framework than that’s fair enough but I suspect that anyone that is experienced with CSS would just choose to create any code from scratch.

HTML and CSS work fantastic together because they separate the content from the presentation, however with the majority of frameworks this simply isn’t the case. Yes, they may well use class’s and ID’s appended to div and span elements but when you look deeper into how the code has been written, it’s no different to actually writing styles inline.

For example, take the following code:

class="column span-15 gutter-1"

Now assume that the column class is floated left, the span-15 class is 150px wide and the gutter-1 class applies a right margin of 10px. How is this any different to just writing the following?

style="float: left; width: 150px; margin-right: 10px;"

One does use an external stylesheet but whichever way you look at it, a designer is still going to have to go into the HTML code and change the class in order to alter the presentation, but isn’t this what CSS is supposed to be for?

Imagine if you’d created a site that had grown over the years to a 1000+ pages and you needed to tweak the width of one column? I’d much rather go into one CSS file and change the width of that ID or class rather than trawl through every page of the site and have to change the class in the HTML page.

Bloated CSS

When I’m creating CSS from scratch, I’ll only create CSS that I’m going to use. Sometimes I’ll also throw in an ID for generic messages like .error or .confirmation for example which I know may come in handy but the idea of CSS frameworks is that grids and presentational styles are created for a huge array of possibilities which in reality a web designer will never use on that project and therefore a large CSS file has to be served up to the end user despite only a fraction of it being used.

Summary

As you may have gathered, I don’t use CSS frameworks when it comes to web development and in the majority of cases believe that it simply increases the amount of code used and makes it harder for designers working on the project later to update and manage the code.

What do you think? Do you use CSS frameworks? Have they ever saved you time when developing websites or have they ever presented you with unexpected problems further down the line?

1. CSS Reset

A consistent starting point across all browsers is a great place to begin when working with HTML and CSS.

2. IE6 CSS Bugs and Fixes Explained

Internet Explorer 6 can be a pain for even experienced web developers but within this article, I explain the main bugs and how to solve these annoying little issues.

3. Block and Inline Elements Explained

It’s important when learning CSS that you understand how block and inline elements work. This guide takes you through the fundamental differences and explains how each can be manipulated with CSS.

4. 100% Height using CSS

This one is a problem that’s encountered quite frequently but once explained is quite a simple technique to achieve 100% height.

5. CSS Equal Height Columns

Creating equal height columns using CSS is tricky but using a background image trick known as faux coumns, it’s easily achievable.

6. CSS Fixed Footer

Another frequent problem is getting a footer to stick to the bottom of the browser window which isn’t dependant on content. This article explains how it’s done.

7. CSS Rounded Corners

Creating rounded corners is usually a tricky process creating lots of small rounded images to simulate a rounded corner. However, this article explains how it can be done by using just one small image.

8. CSS Image Replacement

A number of ways to replace some text with an image using CSS.

9. Float and Clear: A Comparison of CSS Clearing Techniques

Understanding how float’s and clearing float’s works is important in any modern web designers toolkit. This artice explains the fundamental basics of this layout technique.

10. Creating FAQs using a definition list

Definition lists are often overlooked by web designers but can sometimes be more useful than a simple unordered list.

When adding things like headings to an HTML document, I’d always recommend adding them as though they were part of a sentence and not consider how the case of the words will appear visually on a page. During the coding stage, developers tend to use their own preferred method of displaying headings, some will captilize the first letter of each word, others will only capitilize longer, more important words, which can lead to inconsistencies on projects that have a number of developers on board.

However, by using CSS we can control how these headings will appear when rendered on a page. For example:


<h1>Here's a heading for the content</h1>


This works absolutely fine as it is and is grammatically correct, however if we want to style this, we can do so by simply using the text-transform CSS property to make all the letters in the heading uppercase.


h1 {
text-transform: uppercase;
}


The possible values for the text-transform property are: capitilize, uppercase, lowercase and none; which provide plenty of flexibility when working with the case of your text.

Summary

I’m sure that many of you are already aware of the text-transform property and use it for this very purpose to ensure consistent letter case across a website. Is this something you already do and if not would you now consider it in future projects?

I first heard the news from Peter’s blog over at Broken Links and thought it would be of great interested to most of the readers here.

Essentially, you’ll be able to declare a variable in your CSS using the following syntax

@variables { keyColor: #f00; }

And then you can call this variable wherever you need to use it in your CSS by using

h1 { color: var(keyColor); }

Presumably using this method you’ll be able to declare all your colour scheme in a bunch of variables at the top of your CSS

@variables { firstcolor: #f00; secondcolor: #300; thirdcolor: #300; }

Sounds like it’s going to be an extremely useful improvement within CSS and something I’m sure that anyone who deals with CSS will be eagerly awaiting.