This is the second installment in my quest on going behind the scenes of web sites with exquisitely crafted typography and revealing their beauty secrets.

If you find yourself or someone else grumbling that there are just not enough web safe fonts available to design a stunning website with a striking typogrpahy, head over to the site of Jesús Rodríguez Velasco, a Berkeley Professor at The Department of Spanish and Portuguese.

The site was designed by Miguel Ripoll, who also designed the professor’s university site. Of course, the imagery used on the site is absolutely gorgeous. I also like the use of lines going up and down, and the polygon shapes framing the search box (try searching something on this site – you’ll be amazed at how search functionality is implemented there).

Jesús Rodríguez Velasco

Although, saved as images, various highly decorative typefaces are used throughout the site’s design, the actual content of the site is using only one typeface – Georgia.

Base font

Right at the beginning of the CSS code a typographic rule for the font has been established:

body {
font:68% Georgia,Garamond,"Times New Roman","MS Serif","New York",serif;
line-height:1em;
}

And from then on all the headings, side notes, dates, comments, links, all other elements of the site are inheriting that initial face definition. It’s a bit strange for me to see the stacking order of fonts in the font-family definition above. Usually the browser uses the first font on the list and reverts to the consequent fonts only as a backup, in case the previous font doesn’t exist on the user’s computer. We all know that Georgia is one of the dozen available web safe fonts, so it’s a bit puzzling to see who won’t have Georgia installed on their computers but will have “New York” and “MS Serif” available. If anyone is aware of what’s that all about, please let me know.

You can actually see how the default font looks like at 68% font-size checking the “Click to continue reading” link, with the post title in the read more section displayed in italics.

Date, Heading and Post entry

The heading in the title of the article is set in uppercase letters with the font size 1.8em. An interesting layout is presented for the Date display. It is floated to the left, with the date number displayed in 2em, and the month inheriting the heading style of the title. Notice how closely positioned are the month and the number above? That’s achieved with a break tag that is set with the 2px height. Plus of course, Georgia is a perfect choice of type for formatting the numbers.

The post entry itself is set in 1.5em font size and the same line height.

Drop Caps

You can’t help but admire the elegant drop caps that start the text in every post. There are many different ways how you can add Drop Caps to your post, but I really like the way it was achieved here with just the right size at 5.5em, the striking burgundy colour (#990000), floated to the left, and the right margin spaced with 15px.


.entry sup {
color:#990000;
float:left;
font-size:5.5em;
font-weight:normal;
line-height:100%;
margin-right:15px;
text-transform:uppercase;
vertical-align:top;
}

Links and Colours

The linked text on the site is inheriting the default font-size of 68% and is simply decorated in different ways, depending on its purpose, with the use of colours and uppercarse vs. lowercase letters. For the site’s navigational menu it is engraved into a large black rectangles, the text itself is in white and uppercase letters.

Throughout the entire site’s dynamic content you can see the use of only three colours: black, white and burgundy and its combinations. It’s either white text on a black background (menu, calendar dates, hover in breadcrumbs and post’s meta data), or white on burgundy (the hover on the sidebar links), the drop caps, date and links are coloured in a rich burgundy shade, and the rest of the site’s content is in black.

Here are most of those text manipulations that are presented on Velasco’s web site:

velasco close up typography

Now you too can try them out on your site and sprinkle it with some typographic magic that was hidden behind the scenes of the Berkley professor’s site.

In the next installment of my research on web typography I will show a couple more tricks that you could try on your site from a designer who’s known for his meticulous attention to details. So make sure you’re subscribed to Inspiration Bit for another dose of exquisite web typography. And if you have a web site in your bookmarks whose typography you absolutely love, please, share it with us here, and we’ll see what we can uncover there.

Recent Bits
Related Bits
Behind The Scenes Of Exquisite Web Typography – Part Four
Behind The Scenes Of Exquisite Web Typography – Part Three
Behind The Scenes Of Exquisite Web Typography – Part Five
Behind The Scenes Of Exquisite Web Typography
8 Bits From The Past
Striking Web Sites with Font Stacks that Inspire
Meticulous Design: Dramatic Headlines
Behind The Scenes Of Inspiration Bit
Comment Bits

9 Insightful Bits in response to “Behind The Scenes Of Exquisite Web Typography – Part Two”

  1. Reading these posts want me to learn more than the basics of CSS. I know how to edit CSS just not write it!

  2. Jacob, Have you installed FireBug for your Firefox? It’s the best way to learn CSS – by checking others code.

  3. A great idea this series. Well, I hope it will continue as a series. I love Miguel’s work–he’s really an artist-designer.

    And, yes, FireBug is a great way to manipulate and learn CSS.

  4. Thanks for the encouragement, John. I’ll be continuing the series, and already have something drafted out for next week.

  5. Another great article!
    Good call on Georgia being safe :P I guess if some people were really crazy in cleaning out disk space they might have deleted it?
    I have Georgia, but not Garamond.

Pingbacks and Trackbacks

  1. Behind The Scenes Of Exquisite Web Typography - Part Three » Inspiration Bit

    [...] previous installments in this series, you can still catch up with us by checking out Part One and Part Two on going Behind The Scenes Of Exquisite Web [...]

  2. Behind The Scenes Of Exquisite Web Typography - Part Four » Inspiration Bit

    [...] my previous installments in this series, you can still catch up with us by checking out Part One, Part Two and Part Three on going Behind The Scenes Of Exquisite Web [...]

  3. Behind The Scenes Of Exquisite Web Typography - Part Five » Inspiration Bit

    [...] previous articles in Exquisite Web Typography series, be sure to check the past issues: Part One, Part Two, Part Three and Part [...]

  4. Georgia On My Mind - Inspiration Bit

    [...] previously dedicated an article to my study of Velasco’s web site that was designed by talented Miguel Ripoll, so head over to see how he pulled it off so well with [...]

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 programming, play with my daughter and try to balance family, work, friends and a somewhat active social life on