Chris Coyier’s Icon Fonts are Awesome demo pushed me up to the edge, and seeing how fuzzy image icons look next to ultra-crisp retina display text threw me over. Now, I’m testing out an icon font on this site for the comments, 3 footer links, and even my logo (why not push it all the way). The icons I use are a hodge-podge, pulled from my own stuff,... Read more
I’ve been working on a responsive project with lots of content that will need to be updated frequently. Rather than using a more traditional HTML & CSS column/grid approach, I opted for column-count to keep everything extra efficient & scalable. The trouble is, sometimes content gets split across columns awkwardly. For example, In webkit browsers I noticed numbered list items were being split in half, which is less... Read more
I’ve been tinkering with the font-size and the media queries that trigger width-based changes for this site regularly over the past month. I thought that maxing out at 20px for body copy at widths above 900px would be my final answer, but I decided to drop in one more increase last week: media screen and (min-width: 1234px) and (min-height:700px) { body {font-size: 137.5%;} } This bumps body copy up... Read more
The time for New Adventures is nearly upon us! I’ve been building slides for my talk as well as prepping materials for my workshop on controlling web typography. The plan is to spend some time exploring the finer points of using web fonts and setting type on the web, then experiment with newer CSS properties and Lettering.js. Throughout the workshop, we’ll discuss fluid content and responsive web design... Read more
Molly Holzschlag wrote a great article for .Net Magazine outlining seven things still missing from CSS. She gets into web fonts on #5, which is my favorite. I particularly liked this point: Fine control remains elusive – kerning, character spacing – controlling these aspects are both difficult to specify for numerous reasons. This is frustrating to designers who love typography and want to have that finer control. Huzzah! I couldn’t... Read more
I recently wrote a tutorial on texturizing web type for .Net magazine (Issue 221). One of my favorite CSS properties for text, mask-image, is covered in-depth from creating a semi-transparent texture in Photoshop to implementing it with HTML & CSS. To take things further, I added in a CSS transform to get that skew, then dropped in FitText to make it all scalable for use in your fluid/responsive layout.... Read more