How to create drop caps with CSS (and CSS3)

Posted in CSS Typography on 2 February 2010 | Comments [1]

Drop caps are a nice typographic detail that look great on many websites; I’ve used these myself on several examples including Just Holiday Nannies (main page headings) and Occupational Synergy (leading paragraphs). There are a few ways of achieving this effect but the CSS selector I like to use is the :first-letter pseudo-element. This selector is reasonably well supported across most modern browsers (albeit with a few minor bugs here and there). Here’s how it works.

Read more ...

Web fonts make progress

Posted in CSS Typography on 21 July 2009 | Comments [1]

There has been quite a lot of progress on the subject of web fonts in recent months. Rather than sticking to a core set of web-safe fonts, web designers might soon be able to use a much wider range, by choosing one of several new methods. Here’s a short summary of recent developments.

The CSS method that seems to have sparked the recent progress is the @font-face rule which is also described here on CSS3.info and in an article on A List Apart. There’s quite a few legal and licensing issues with the use of fonts in this way but browser support for @font-face is increasing.

Read more ...

Universal style sheet for Internet Explorer 6

Posted in CSS Typography on 22 May 2009 | Comments

Andy Clarke has written an interesting blog post called Universal Internet Explorer 6 CSS where he advocates the use of a stripped down style sheet [similar to a print style sheet in some ways] that is directed at IE6 users. If you are viewing a site that uses this method with IE6, you will see a stripped down version like this. The main reason for doing this is so that you do not “waste hours in time and a client’s money on lengthy workarounds in an unnecessary attempt at cross-browser perfection”. As we all know, IE6 is an ancient browser in today’s terms. Therefore, why waste time on this. Let’s just supply a default style sheet with great typography and be done with it!

I agree and disagree on this. Sitting on the fence or what!? On the one hand, I agree that wasting hours on IE6 is not so useful. However, I doubt if most of my clients would be too happy with the Universal Internet Explorer 6 CSS method if their web visitor statistics show a significant number of people with IE6. The other argument that I want to put forward is that if your website is relatively simple, you may not be spending too much time on IE6 and its foibles in any case. I know I don’t. That’s just my approach I guess.

Still, the Universal Internet Explorer 6 CSS method is worth considering in some cases and will work well for some people I’m sure.

Web typography and font stacks

Posted in CSS Typography on 21 May 2009 | Comments

I have been reading more about typography on the web since I went to Skillswap Goes Typographic earlier this year. Richard Rutter has put together a good summary of the event and the slides from his and Jon Tan‘s presentations are well worth reading. Despite some advances with web fonts or font embedding and other methods for displaying and using different fonts in websites, many web designers and front-end developers stick with a core set of fonts and specify these using a font stack in their website style sheets.

Read more ...

CSS Tip: Expand your font horizons

Posted in CSS Typography on 1 May 2008 | Comments

It is sometimes easy to get into the habit of always using the same font declaration in your style sheet for every website you do. Even though the number of fonts that are common to both Mac and Windows systems is pretty small, there are a few variations worth trying.

Read more ...