Weaver, John, 1980- author

This is a quick experiment that reproduces an image from I Love Typography using semantic HTML, CSS 2.1, a little CSS3. Along the way, I learnt about a few modern browser bugs and inconsistencies.

• See the demo: CSS typography experiment.
• See the bugs: Some new CSS 2.1 and CSS3 bugs in modern browsers.

I came across an image on I Love Typography that I thought could be reproduced using only semantic HTML and CSS.

The idea was to reproduce the image from simple markup, and to rely as much as possible on what can be achieved with CSS.

This is the HTML I ended up using.

<p>I love <strong>typography</strong> <em>a lot</em></p>

This is the CSS that controls the presentation of that content.

body {
  padding: 0;
  margin: 0;
  font-family: Times New Roman, serif;
  background: #000;
}

p {
  position: relative;
  width: 1100px;
  padding: 100px 0 0;
  margin: 0 auto;
  font-size: 175px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -13px;
  color: #0caac7;
  transform: rotate(-20deg);
}

/* "i" */
p:first-letter {
  float: left;
  margin: -137px -20px 0 0;
  font-size: 880px;
  line-height: 595px;
  text-transform: lowercase;
}

/* "love" */
p:first-line {
  font-size: 200px;
}

/* "typography" */
p strong {
  display: block;
  margin: -80px 0 0;
  font-weight: normal;
  letter-spacing: -2px;
  text-transform: capitalize;
}

p strong:first-letter {
  margin-right: -30px;
  color: #fff;
}

/* "a lot" */
p em {
  position: absolute;
  z-index: 10;
  top: 100px;
  left: 147px;
  width: 136px;
  overflow: hidden;
  padding-left: 64px;
  font-size: 200px;
  font-style: normal;
  text-transform: lowercase;
  color: #fff;
}

p em:first-letter {
  float: left;
  margin: 130px 0 0 -55px;
  font-size: 80px;
  font-style: italic;
  line-height: 20px;
  color: #fff;
}

/* create the heart shape */
p:before,
p:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 225px;
  left: 120px;
  width: 75px;
  height: 50px;
  background: #000;
  transform: rotate(45deg);
  border-radius: 25px 0 0 30px;
}

p:after {
  left: 138px;
  transform: rotate(-45deg);
  border-radius: 0 25px 30px 0;
}

/* hide the tip of the "t" from "a lot" */
p strong:before {
  content: "";
  position: absolute;
  z-index: 11;
  top: 205px;
  left: 341px;
  width: 7px;
  height: 7px;
  background: #000;
  border-radius: 7px;
}

The final CSS typography experiment approximates the original image in all modern browsers that support the CSS3 properties of border-radius and transform.

Some browsers render type (especially after rotational transformations) better than others. Note that all the screenshots are taken from browsers running on Windows Vista OS.

Browser bugs and inconsistencies

I’ve put together a small test page to highlight some new CSS 2.1 and CSS3 bugs in modern browsers. It includes two new CSS 2.1 bugs in Internet Explorer 8.

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for each part of the effects.

Demo: Pure CSS speech bubbles

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

Progressive enhancement with pseudo-elements

With HTML as simple as <div>Content</div> or <p>Content</p> you can produce speech bubble effects like this:

Add a child element, for example, <blockquote><p>Quote</p></blockquote> and you can even produce speech bubble effects like this:

I’d encourage you to adapt the examples to your needs and use any other associated elements available to you in your existing HTML document. The key is to use the :before and/or :after pseudo-elements to produce basic shapes.

By applying CSS3 properties such as border-radius and transform you can produce more complex shapes and orientations. This is how the heart-shape in my CSS typography experiment was created.

Example code

This is an example of how to create a basic speech bubble with a few enhancements. For further examples see the demo page and the heavily commented CSS file that it uses.

/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background: linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}

A note on progressive enhancement

This approach is one of progressive enhancement. Styles are built up in layers from simple coloured boxes, to boxes with a “speech tick” of some kind, to rounded rectangles or circles with gradient backgrounds. Browsers render the styles that they are capable of rendering.

Browsers (such as IE6 and IE7) that do not adequately support CSS 2.1 or those (such as IE8) without support for the necessary CSS3 properties will not look broken; they will simply not get the full speech bubble effect. However…

A warning about Firefox 3.0

Firefox 3.0 supports the necessary CSS 2.1 pseudo-elements but does not support the positioning of generated content.

Some of the examples are close to what I consider to be unacceptably broken in Firefox 3.0. It is the only browser above 2% market share — currently at ~4% as of March 2010 according to NetApplications — that cannot handle even the basic speech bubble effects.

Before applying this technique, consider the importance of Firefox 3.0 support and the percentage of your visitors currently using this browser. Eventually it will become a rare browser but due to it’s partial CSS 2.1 support you should be aware that there is no graceful fallback for Firefox 3.0 when using this technique.