It’s been awhile since I shared with you my ideas for the re-design of Inspiration Bit. Unfortunately, the makeover had to be pushed on a back burner due to many other obligations and lack of time. However, since starting from last week I went solo and building my own business, I definitely need to make my blog’s re-design a priority. So I’m back to the “drawing board”, searching for more sources of inspiration on meticulous design details.

With this post I’m starting from the area of a blog that’s often left ignored — headline, date, author data and number of comments. Take a look at the 16 exquisitely crafted headlines below. It’s obvious that the designers have put lots of thought and payed a very close attention in getting them to perfectly fit the design and add a distinct character to the site’s look and feel.

I called them “dramatic” because some of them indeed appear rather theatrical though not being too showy, others seem to be emerging from antique pages of books or magazines, while others simply manifest themselves with a bold statement without the use of Impact.

1. BEARSKINRUG

bearskinrug

Talented illustrator and designer Kevin Cornell most probably loves theatre, just check out his Shakespearean comic and, of course, the site’s design that looks more like a washed out old poster where every little detail was carefully thought out.
bearskinrug I also really like the way he displays the site comments in the adjacent to the post column.
Both the post’s heading and the date are using Georgia, although the title is displayed in a much larger (font-size: 160%) size and italicized. With just a little touch like adding an “elaborate” divider as a background image to the paragraph with the date, he makes it stand out among regular looking headlines on other blogs. Add to that a special treatment for links to previous and next posts: first, Kevin is not displaying those post titles, second, because of that he can safely replace the text with image links that glow on mouse hover (note that he’s still keeping the text link alternatives by moving them outside the windows area: text-indent:-9999px;).

2. VIGET-INSPIRE

viget

First of all, I hope that designers from Viget Labs will one day write a tutorial on how they achieved such perfect watercolour drawings for their site. They continued with the watercolour theme and even “washed out” the pictures of the authors.
The author’s name, along with the categories, cleverly listed as “on the topic of…”, are displayed in 0.85 em all caps Georgia with letter-spacing: 3px, and look very different from the post’s title that uses the same Georgia face, though sized as 1.8 em. The date and the number of comments are displayed in Verdana.
The gentle lines underneath the title, authors and dates section actually all come from a single image, that’s called from the DIV after the title’s H2 tag, but raised with a negative margin so that the title too shows up above the understated dividers of the background.

3. DESIGN*SPONGE

designspongeonline

If for some reason you haven’t visited this site yet, please, do yourself a favour and spend at least 15 minutes there. I guarantee you’ll get hooked with those DIY projects, sneak peaks at other people’s room decors, before & after transformations, and so much more.
A rather interesting approach on using HTML tables for building the structural carcass of the site, and only then going with DIV tags for further details. Once again we see one attractive background image underneath the category/date/title/ sections. An interesting detail is that there are eight different background images (as far as I could deduct) that alternate (according to an unknown to me formula). Everything is displayed in Georgia, but in different sizes and styling — uppercase for the categories, but lowercase and italic for the larger titles.

4. KHMERANG

khmerang

Thankfully, Mr. Khmerang has written a tutorial on how he achieved that worn type for the headlines. Rather than using sIFR where Flash is replacing the text, the text stays untouched but is “covered” with a worn image.

5. TYPESITES

typesites

Typesites is a new blog (launched in January, 2008 by Kyle Meyer) that offers a “weekly showcase of websites with interesting typographic design”. I’ve discovered this site only a couple of weeks ago, after my own “investigations” on sites with exquisite web typography. Kyle used Helvetica Bold for the headlines and Helvetica Neue in a much smaller size for all the byline details like the date, author’s name and the number of comments. He achieved a very dramatic effect by displaying them on an almost black background (#181818), with the text set either in white or bright yellow (#FFD200) — so simple, yet so effective.

6. I LOVE TYPOGRAPHY

iLT

Of course, it is expected to see type magic in action on a site that belongs to none other but Mr. Typography himself. Aside from the outstanding content, John’s superb eye on typography and focus on details cannot leave us disappointed. The post’s title is set in large Georgia, while a clever addition of a byline, à la 2nd title, set in Lucida Grande with an elegant branch divider in the background image, makes the articles look designed more for a book than a site.

The date treatment is very simple, yet attractive with the bigger number in red (#CC0000) and so perfectly aligned with the comments are. The trick used to display the comments is quite ingenious — the raised numbers with the opening curly brace are set inside the SUPerscript, the closing curly brace is displayed in a big size, while the word ‘comments’ inherits the parent style:

<span class="bigdate"><sup> {74</sup></span>
comments <span class="bigdate">}</span>

7. GROW COLLECTIVE

grow

Grow Collective was designed by Jon Tan, whose personal site was featured in my series on going behind the scenes of exquisite Web typography. So it’s not surprising to see beautiful type treatment on Jon’s company site.

Everything is set with lots of breathing room that makes the beginning of every article very open and inviting. The title is set in Georgia, in a rich coffee colour (#331100), the summary below is displayed in italicized grey (#999999) Georgia. The rest of the auxiliary data (author’s name, comments, categories, tags) is set in small Verdana.

8. A LIST APART

alistapart

I’ve already dissected this stunningly designed site in my behind the scenes of web typography series, so I won’t be repeating myself on how to achieve the headline effects of A List Apart, but I just couldn’t omit listing this site here as well.

9. BLISSFULLY AWARE

blissfullyaware

Designed by Joshua Lane, this site looks more like a menu of a high-end restaurant, so the use of decorative elements fits the style very well. All text in the post header is displayed using Georgia, and is distinguished with the use of different sizes and styles. An interesting detail here is that to achieve the pale, fading text effect Joshua is using CSS property opacity rather than picking a pale font colour. For the previous/next entry links he specified text colour to be white, but with opacity:0.25, however the entry’s byline (with the author, date and comments) is not using the opacity feature anymore, it’s set with colour: #E6D9BF.

10. ROB WEYCHERT

robweychert

As Rob Weychert himself confessed, the design of this site was inspired by his love of “the densely ornate editorial layouts from the late nineteenth and early twentieth centuries”. Despite relying on only one font, Georgia, Rob’s use of different colours (#000033 for the title and #993333 for the date), styles (all caps vs. normal), sizes and an unusual alignment (the date is set with a specified width and floated to the left, allowing the content to wrap around it), made the header section of the posts highly attractive. When you mouse over the prev/next links, the title of the linked posts will popup, so you can see what they link to.

11. CAMERON MOLL

cameronmoll

If you rather go with something simple, you would appreciate a classic look of Cameron Moll’s style. Add a decorative divider above the title, stick to Georgia, use letter spacing to control the look (letter-spacing:-1px; was used for the headline) and add special characters before/after the date. One thing I’m missing in Cameron’s headline treatment is the absence of a link — I have to scroll all the way down to find the permalink or click to read the comments.

12. MATT NORTHAM

mattnortham

Matt is playing with two fonts — Times and Verdana — to style the post’s header. The decorative swooshes before and after the date are separate images. The date text itself is set with letter-spacing:0.33em, all caps Verdana in bold. The headline is displayed in a bold big lowercased Times. All the additional meta data once again is set in Verdana.

13. COUDAL PARTNERS

coudal

Even though Coudal Partners is not a blog, the way Coudal has styled the headlines can be easily adopted for blogs. The difference in sizes between the two titles is striking. Interestingly enough, H4 was used for the large headlines, while H1 is used for the smaller additional title, displayed in Gill Sans. I also liked the use of two colours in the top title.

14. LADY OMEGA

ladyomega

Can you find a more dramatic site than this one? To achieve a similar effect on your blog you should set the title in Georgia, in dark pink (#EA3690) on a black background, add some cute icons before/after all the auxiliary data below the post, float the date to left and style it as you like.

15. WEB DESIGNER WALL

webdesignerwall

Even though it’s a very popular site and most of you frequently visit it, I had to feature it here as well. A simple watercolour brush stroke in the background makes the header look artsy, and the comments cloud only adds the magic feel to the site.

16. SHAUN INMAN

shauninman

It is impossible to talk about the type treatment for headlines and skip sIFR (Scalable Inman Flash Replacement) technique. And what a better site to show as an example than Shaun Inman’s (the originator of sIFR) own blog. Shaun uses Univers 59 Ultra Condensed typeface in the Flash replacement, with a striking alteration in colours for the words in headlines. I’m not too crazy about the disappearing headlines on mouse over, but I do like the minimal modern look of the site.


Hope you found those examples inspiring. What other sites would you add to this list of dramatic headlines?

Recent Bits
Related Bits
Meticulous Design: Image Styling
Secret Formula To Writing Headlines That Catch Your Eyes
Second Contest with Inspiration Bit
8 Bits of Unforeseen Traffic From Search Engines
Connecting People
Meticulous Design: Information Architecture
Can Silence Say More Than A Thousand Words?
8 Bits Of Evolution In Perception, Promotion And Values
Comment Bits

25 Insightful Bits in response to “Meticulous Design: Dramatic Headlines”

  1. Thanks for the note! We’re definitely working on a how-to post for the watercolor style, I hope it’ll be ready soon…

  2. Good idea, going from the top down.

    Maybe I should have posted websites I like on my site when I was doing this kind of research, but instead I put them all into a PDF, opening it up to respond to your question. :)

    I love JohnTangerine.com with the title big and dark and then small, light date displayed inline.

    sr28.com is cool (funny how this site got so big without actually having any content!) I love how the title uses different colours, like the Shaun Inman example.

    RobGoodlatte.com is a good example of serif and sans mix and using all caps too.

    I love your examples… I see you like the the headings with the flourishes and borders. They’re very cool. Heh, I think ILoveTypography.com could be used as an example of every blog design element!

  3. Thanks for the mention, Vivien. Good topic for a post.
    Love the Coudal newspaper-style headlines. I also like Shaun Inman’s redesign. I wasn’t aware he’d redesigned until I read this post.
    I’ve also discovered a couple of new sites in your list, so off to take a closer look.

  4. You’re very welcome, Doug. I can’t wait to read your upcoming tutorial on watercolour.

    Kristarella, thanks a lot for adding to the list. I was considering adding RobGoodlatte’s site, but then changed my mind and decided to use Shaun’s site instead as an example with sIFR. Didn’t really want to go with too many sIFR examples, because once you choose to go with sIFR, the type options have no limits. Interesting about sr28.com site, I’ve seen it before, and I thought I’ve seen it a long time ago, but just checked it now again and see that it’s been only recently re-designed and contains only one post about it.
    You know, you’re right about iLT, I can use John’s site as an example for pretty much all design elements (except the footer – haha)

    Sorry, John, I’ll keep bugging you about adding a big footer to iLT until I see it there ;-)
    oh, I’m glad you’ve discovered some new sites in my list.

  5. Am designing a footer as I type. However, don’t hold your breath ;)

  6. Didn’t realise Rob’s site was using sIFR, but I loaded it just now and actually saw the transition from the alternate text to the one usually seem… I don’t know how sIFR works, does it use images?
    Hmm, I only just realised that you wouldn’t acheive what he has with CSS because small-caps would give different letter sizes – I’m surprised there isn’t a caps font-variant!

    Look forward to seeing what you do with the footer Johno :) Although at present it’s still more useful that just copyright info… your page is quite long so it’s good that there’s navigation down there.

  7. oh, I can’t help it, John… you have a talent on getting people all fired up with your innuendos on upcoming posts or projects. I’ll hold my breath as long as I can, and then will bug you again if needed ;-)
    Good luck!!

  8. Kristarella, we were commenting at the same time ;-)
    Re: sIFR, it’s using a combination of Flash, JavaScript and CSS to display any typeface you desire.

    If you click on sIFR link in this post, you can learn all about it. It’s not very difficult to implement.

    There’s also a showcase of sites using sIFR.

  9. Reading the links helps :)

  10. This is a great source of design inspiration – thanks so much for sharing your research. I especially like that you have covered both detailed and simple designs, showing that confident Photoshop skills can give great results but at the end of the day a good design eye is the most important thing, and sometimes it’s all you need.

  11. Yes!! You always have the right posts at the right time, Vivien! Love these! Have you seen the Elements of Design gallery yet?

    I remember seeing a similar technique (perhaps the same one) to the worn type but with a gradient… it was a “web 2.0″ effect and now I can’t remember where I saw it.

    As for me, I’m now concentrating on getting the details finished (there are SO many!) for my blog design. I really hope to start building it this weekend. I’m excited!

  12. Cool link Lauren! I was thinking recently there should be something like that because all I found was one of the CSS galleries had a section on menus. Ironically I can’t see a menu section on that site!

    Sweet – you’re up to details?! There are definitely heaps…

  13. Thanks, Tracey. You’re right — sometimes simple is the best way to go as long as it comes with class, elegance and fits the theme/design.

    Lauren, thanks for that link. I did see that site before, and bookmarked it, but forgot all about it, glad you reminded about it. Are you talking about WDW’s tutorial on gradient headlines with PNG and CSS?

    Kristarella, which browser are you using? Do you mean you can’t see “Pick a Showcase” menu links on the left on that Elements of Design site?
    It is a great site, and I thought exactly the same thing like you did when I first saw it. It doesn’t cover all the design elements though, like bulleted lists, menus, sidebars, RSS icons/feed count, headers, etc. So perhaps I could fill the gap and cover those parts in my upcoming Meticulous Design series ;-)

  14. Yes, the WDW tut is exactly the one! I should’ve guessed it would be one of Nick’s.

    I think what Kristarella means about the menus is that there is no “Menu” section in the site’s navigation for nifty menu styles. That’s a good observation, btw, Kris. There should be a menu style section! Although it probably wouldn’t vary much, a link style would be interesting, too. I’ve seen some neat stuff before. Oh, and bulleted lists! I’m glad you’ll be showing some of those, Vivien! I like the EOD gallery because it helps you see all the possibilities without being overwhelmed by the whole design.

  15. Every time I read a post like this, it makes the redesign of my site feel that little bit more urgent. My next task is to add that footer!

    Thank you for the inspiration.

  16. I’m struggeling myself with a new design for my weblog, your research is great! I like a minimal look/feel in combination with big type. Coudal, Cameronmoll and Robweychert are just fabulous.

    Thanks for creating the inspiration and huge research article in search of your new design. Looking forward to your new design. Good luck.

  17. Lauren, recently I’ve seen several link implementations that I noted down, so I’ll definitely be dedicating a post to them, as soon as I collect enough examples to show.

    Alan, you’re not alone in feeling the urgency of our own site’s makeover ;-) Good luck with yours.

    Sander, you’re very welcome. Glad you found the examples here inspirational. Btw, I like the huge, nicely organized footer on your site. Good luck with the headlines ;-)

  18. Thanks for this compilation. I have just bookmarked this site to come back again when i need some inspiration!

  19. Many of the headlines look a bit old-fashioned to me. But some are interesting.

  20. You’re welcome, Musashi. Come back anytime ;-)

    Andreas, often new fashion is just a well re-used old fashion, isn’t it? :-)

  21. dramatic headlines can be important , and you have some great examples !

Pingbacks and Trackbacks

  1. Enlaces para leer y ver 79 « el50

    [...] Diseño miticuloso: Titulares [en] | Inspiration Bit. Un repaso a algunos de los mejores diseños en  titulares que encontramos en las páginas web. [...]

  2. Meticulous Design: Information Architecture » Inspiration Bit

    [...] Once again, while thinking about the Information Architecture for Inspiration Bit, I did some research and want to share with you what I found on how other blogs organize their site’s information flow. [...]

  3. Meticulous Design: Image Styling » Inspiration Bit

    [...] part of my meticulous design series, I now present you with eight different ways to style images in your [...]

  4. 25 fantastic design articles from 2008 | David Airey » graphic designer, logo designer

    [...] Meticulous design: dramatic headlines I’m always inspired by small details that initially may go unnoticed but subconsciously make a great impact, and I’m always intrigued by how one tackles attention to details in design, hence my research on meticulous design, that many others find helpful as well. [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach, play with my daughter and try to balance family, work, friends and a somewhat active social life on