Baseline – a designer framework

Build with typographic standards in mind. Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser default behavior, build a basic typographic layout – including style for HTML forms and new HTML 5 elements – and build a simple grid system. […]

CSS Font-Sizing: a Definitive Guide

Font sizing in CSS sounds as though it should be easy. Until you try it. Many developers use the force; they tinker with the font-size property until it looks right only to find it’s different in another browser. A little understanding can go a long way…

Web fonts and standards

It remains to be seen whether a font-licensing standard and universal browser support for @font-face will kill the middlemen, or whether the middlemen will prove so successful that they delay or stifle the adoption of a font-licensing standard and allow Microsoft to shrug its shoulders indefinitely at supporting @font-face for anything beyond its proprietary EOT […]

Typetester – Compare fonts for the screen

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated…

CSS Type Set

A neat online tool that allows you to quickly experiment with different typefaces. You just enter a block of text and play with the options. You can then copy the CSS rules and easily add them to your stylesheet…

16 Web Safe Fonts To Use With CSS

A list of web safe fonts that you can use with CSS stylesheets. “Web Safe” fonts mean that they will be extremely common on most versions of Windows, Mac, Linux etc, so they will be viewable by more or less everyone. Along with each font is a preview image of what it looks like, and […]

Fonts available for @font-face embedding

There can be license issues when using fonts with @font-face embedding. Here’s a useful list of fonts that specifically allow @font-face embedding…

What are webfonts?

Webfonts are font files embedded in websites using the @font-face rule. This technique was first available in Netscape Navigator 4 using Bitstream’s TrueDoc standard but was discontinued in Netscape Navigator 6. Microsoft developed the Embedded OpenType format .eot which is supported in Internet Explorer since version 4. In march 2008 Apple introduced Safari 3.1 which […]

Create letterpress type using only CSS

The letterpress effect is one of the 2009 trends and is present in a lot of websites. It simply works because it adds a touch of “tactile” to the overall design and at the same time looks good with gradients, shadows, etc. Let’s see a quick way to add this effect to our sites using […]

CSS Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using […]

« Previous PageNext Page »