Nice Web Type Likes: Graublau Sans with Lucida sanserif

Here’s how this page should look. If not, maybe poor @font-face support or a lousy understudy are to blame (see footnotes 1 and 2). Could also be caching?

Download

Like this sample? Try it out.
Here’s everything you need.

Read the related Note.

Graublau is German for “Gray Blue.” Sort of like Blue Steel. Are you not aware that I need a condensed sanserif for my headlines and subheads? My mistake, Jacobim. Your mistake, indeed! Graublau Sans Web is a workhorse; one that will turn heads both right and left. Graublau Sans Web regular and bold are both free and licensed for @font-face embedding on the web. They’re part of a larger family, Graublau Sans Pro, designed by Georg Seifert and issued by FDI Fonts.info.

ee LL RR aa DD pp WW

While excellent and economical for headlines, the Web Graublaus’ utility wanes at text sizes. It sets too tightly and its counters are too small for extended reading. Lucida Grande is a good choice as a textual alternative: it is structurally similar save for several personality differences, and its x-height is the same. Many characters stick and move like shadowboxers when the two typefaces are paired. Above, Graublau (left)¹ with a Lucida sanserif stack (right)², in regular and bold weights. Below, note how the more condensed Graublau Sans Web paragraphs save two lines of space. Note also the differences in color and legibility between the Graublau and Lucida text blocks.

Here, it’s nice and readable.
Look how much you can fit!
Might be good for captions.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Next, observe the same two typefaces at a larger text size. They have switched places with regard to legibility! See how much more smoothly Graublau Sans Web flows? By comparison, our Lucida friends are awkwardly spaced. What were once merits of legibility are now detrimental; features that at smaller sizes made individual letters easier to distinguish (large counters, generous letter spacing) now sacrifice line coherence by filling the block with gaps.

OO ll mm AA ff ZZ ss QQ kk

High, tight, and bright

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Graublau’s regular weight works particularly well for narrow column headings. Above, its character firmly resonates with the column it heads.

Blockquotes work pretty well, but might be even better with Graublau Sans Pro’s fine italic.

A little gummy in boldface

Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Lining numerals: 1234567890

Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

GG gg

Above, one of the aforementioned personality differences between Graublau and Lucida. The capital G is quite similar; the lowercase, not. Each lowercase g serves its face well, however. Neither is “right.” Maecena nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

Great for small headlines, too

Extended introductory decks like this one work well when set in Graublau’s regular weight. They afford a transition, in both form and color, from the headline’s bold display face to the text weight.

Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus donec. There you go. Graublau Sans Web and Lucida sanserif. How they look together and the roles for which each is particularly suited. Perhaps they will fit your needs. You might also care to peruse the specimens at FDI Fonts.info, and consider using Graublau Sans Pro.³

Nice Web Type

Glyphs of steel

Bend words to your will with its mighty mitts: Graublau Sans Web

Download

High, tight, and bright

A little gummy in boldface

Lining numerals: 1234567890

Great for small headlines, too

Try your hand at web typography

Footnotes