Tag: Typography

Have you ever attempted to use a condensed or expanded font face from a particular font family using CSS? How did you do it? Did you create a new web font with a subset of the condensed or expanded versions? Well, thanks to CSS3 there’s now a better way, sort of. CSS font-stretch The CSS

Paul Irish created and maintains a site devoted to Ampersands. The site is a collection of open source web fonts that only contain the ampersand character. He created it based off an article from 2008 regarding the usage of ampersands and the fact that certain variants of the character in some fonts are more interesting

For those of you who have taken advantage of web fonts you’ve likely noticed various levels of quality. Sometimes, in some browsers, they look great. Other times, in other browsers, they look thin grainy. And if you’re like me you probably just cringed a little and dealt with it. Well, fortunately we now have help

Often when creating a web design mock-up you’ll have the need to wrap text around objects. Illustrator makes this very quick and easy to do. Here’s How it Works Just add the object that you want to wrap the text around in front of the text Make Text Wrap Then select the object and the

Do you ever use browser developer tools just to figure out what fonts and font styles are being applied on your site and perhaps others? Well, there’s an easier way thanks to Chengyin Liu an engineer at Backplane. He has created the Whatfont Bookmarklet extension for Chrome. It’s pretty simple, just install the chrome extension,

Kerning is a very important aspect when it comes to setting type. Unfortunately, until more recent times, it has been left out when it comes to the web. For those of you that may not be clear on what kerning is, it deals with the spacing between certain pairs of letters letters such as W

www.fontwalk.de is a site that was created as a marketing tool for www.fontshop.com. I’m not so interested in their fonts, although it looks like they have a nice selection. I am more interested in the great design ideas behind the Font Walk site. It is a very non-traditional user experience that takes the parallax scrolling

Ever needed to use small caps in a website? They can add a really nice typographic touch in certain circumstances, but I’ve never really taken advantage of them with CSS. It’s really easy to add small caps using font-variant, here’s how: The CSS: The HTML: The Demo: See I’m Using Small Caps Browser Support: The

CSS drop caps came up in a discussion with a co-worker the other day. I don’t use drop caps in web sites I design, but there’s really no reason why I shouldn’t. Example Here’s how you can create drop caps with CSS using the :first-letter pseudo-class: The Code: Demo: Lorem ipsum dolor sit amet, consectetuer

You may have noticed that your phone tends to scale up text automatically in an attempt to make things more readable on the smaller screen. The intentions are great but the effects may be undesired for the person in charge of the design. Well, you have the ability to prevent mobile device text inflation with