Microformats Logo Design Using Scalable CSS and HTML

What are Microformats?

For those of you who may not have heard of them they are a mini revolution in (X)HTML for web sites. By wrapping data in some readily available and widely supported elements Microformats can free it from the web site and help webcast it for use in meaningful ways. Microformats have the potential to heal the Web and bridge what I've come to call the legacy gap, described in more detail in the SIDE (Semantic Information Design Ethics) article. Ok, enough preamble... on to the meat of the sandwich.

The Original Microformats Logo

The logo was designed with the excellent Microformats website by Dan Cederholm.

Of course, it's an image. A great piece of representational and iconic design. Logos are mostly a fixed size and will stay that way until we have support for Scalable Vector Graphics. However, as an image they can't be resized by users with impaired vision. Text doesn't suffer from that problem if a web site is constructed using relative values so that's what I used to create this experiment.

A HTML and CSS Version

In this version, all of the logo including the icon scales gracefully using relative values in CSS. Try increasing the text size in your browser to see it scale. The text is a meaningful HTML header two <h2> and a hyperlink to the Microformats site making it perfect for use as a page section heading. I've just used it in an unreleased redesign for the first Scooch download that we're working on at the moment. It has been tested in Firefox 1.5.0.1/Win, IE6/Win, Opera 8.5.3/Win, Safari 1.3.2/Mac, IE5.2/Mac, Camino 1.0b1/Mac.

This experiment was inspired by one of Rohit Khare's excellent logos found on the Microformats buttons page.

Limitations

The icon corners will only appear rounded in Firefox or Camino browsers. The Mozilla -moz-border-radius property has been used to acheive the rounded corners and as far as I know there is no equivalent in other browsers. The primary font specified is Arial Narrow and therefore the text facsimillie replies on that font being present on the client computer. Smooth anti-alias of the font is dependant on the browser.

HTML / CSS Code

The size of the whole logo can be changed easily by changing a single font-size selector value in the CSS (highlighted). White space and inline styling inserted for clearer reading. Feel free to use for any purpose.

<div 
 style="font-size:1em;background:#f6f6f6;
 border:2px solid #e0e0d6;padding:1em;margin:0 0 1em 0;
 -moz-border-radius:2%;">

 <div style="position:relative;margin:0;line-height:1em;
  height:2.66em;width:2.66em;background-color:#690;
  border:0.2em solid #f6f6f6;-moz-border-radius:19%;"> 
	
  <span style="position:absolute;top:-0.5em;
   right:-0.5em;height:2em;width:2em;line-height:1em;
   background-color:#8b0;border:0.2em solid #f6f6f6;
   -moz-border-radius:19%;"> 
		
   <span style="position:absolute;top:-0.4em;right:-0.4em;
    height:1.25em;width:1.25em;line-height:1em;
    background-color:#ad0;border:0.2em solid #f6f6f6;
    -moz-border-radius:27%;"> 
   </span>

  </span>
  
  <h2 style="position:absolute;left:2em;top:0;margin:0;
   padding:0;font:2em 'arial narrow',arial,sans-serif;
   line-height:1em;color:#666;width:5em;">
   
   <a href="http://www.microformats.org" rel="bookmark" 
   title="Permanent bookmark for the Microformats web site" 
   style="color:#666; text-decoration:none;border:0;">
   <span style="color:#222;">micro</span>formats
   </a>

  </h2>

</div>

</div>

Other Sizes and Colour Versions

1.33em font size - Green

1.66em font size - Green

1em font size - Orange

1.33em font size - Orange

1.66em font size - Orange

More articles