You’re reading Nice Web Type likes, a series of CSS @font-face examples and typesetting advice. Follow.
Try Museo and Sans
You’re reading Nice Web Type likes, a series of CSS @font-face examples and typesetting advice. Follow.
Try Museo and Sans
• Check the footer for colophon and additional notes. Here’s how this page should look.
Museo and Museo Sans are available in several freights. Er, weights. Use these to your advantage by setting display text in light weights for even typographic color, or heavier weights for pop.
Web layouts, like railroads, must oblige a hodgepodge of constituent aesthetics. Our job is crud mitigation. Helvetica can understudy both Museo and Sans, but it isn’t a perfect choice.
Linking serif with sans can be difficult, but typefaces designed as siblings make things much easier! Use the free Museo Sans italic, for instance, in your 500- weight Museo. And more.
You might as well buy that as-seen-on-TV locomotive alarm clock at this point, because there’s no hope of graceful recovery from this metaphor. Relax with your hobo soup and read on…
Rail gauge is like leading, especially for Museo with its transitive pipelike serifs. The ideal distance between two lines of Museo depends on factors like its typeset size and measure, of course, but you’ll find long lines of Museo set surprisingly well with tight line-height, probably because individual words and letters connect well horizontally and keep the reader’s eye on track.
OO oo OO 0 oo OO oo OO
kk
Let’s consider this for a moment. We’ve been suggesting Verdana, Helvetica, and Lucida in our CSS for years, choosing these instead of – or, via our font stacks, ahead of – their less beautiful, less readable, less available counterparts.
But now, as in today, many of the latest browsers are capable of interpreting CSS @font-face suggestions. In this world of possibilities, we will find no better sans to explore our new typographic surroundings than Museo Sans. Its mid-weight roman and italic are free and licensed for web use. It is a versatile, vanilla, geometric sans, a breed of type that resonates with many of the mathematic CSS effects on our aesthetic horizon. And it has a charismatic, serifed sibling waiting for tonal shifts in the texts we typeset. Try it. You may even find that its utility and character can endure this transitory period in our craft and earn a place in your go-to bag of bits.
aaa bbb ccc eee fff ggg
Each grouping, from left to right: Museo 700, Museo 500, Museo 300
First of all, we’re not talking color as in crayons and paint; read this Typesites piece for more about typographic color.
Museo and Museo Sans are available in several weights.
As for using them, my advice is: be conscious. Tschichold wrote, "Feelings have to mature into knowledge about the consequences of formal decisions. For this reason, there are no born masters of typography, but self-education may lead in time to mastery." Look at our example headings.
Scrutiny will reveal truths at which the headings hint: there are strong reasons to use lighter and heavier weights in display situations. Thin headings recede into the textblock, serving as part of the whole and channeling a refined calm perfected during the dawn of our craft. Heavy headings call attention to themselves and get right to their point.
Using body-weight type for display text has its place, but generally this path is trodden by amateurs and careless folk.
By the way, the attention-grubbing quality of headings needn’t always come from a shift in weight. Note the blue heading above this very column; it achieves balance via weight, yet still catches the eye.
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. Aenean vulputate eleifend tellus.
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. Aenean vulputate eleifend tellus.
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. Aenean vulputate eleifend tellus. Cum sociis natoque penatibus et magnis dis parturient montes.
aaa mmm fff RacecaR yy
From left to right: Futura, Museo, Helvetica; Museo Sans, Museo, Helvetica; Verdana, Museo, Helvetica; Museo (Race), Helvetica (caR); Museo, Helvetica
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
A stand-in geometric sanserif would be nice, and Futura is fairly available for summons, but its color, counters, and alphabet length are too different. Using it could change a whole layout’s look and feel. Plus, it’s too iconic to play second fiddle in a CSS font stack.
Verdana is a very good choice. Its open counters, x-height, and notan show similarities to the Museos, and its sweeping availability is a boon. Problem is, it’s just a little too big. If acting as a substitute, lines may wrap where they hadn’t for the Museos. Columns may stretch. Things may look horsey.
Which leaves Helvetica. Its color and body size are a close match for the Museos and, with the aid of its illegitimate clone Arial, it stands a significant chance to be on your visitors’ machines. Its alphabet length is more narrow than the Museos’, so obnoxious line wrapping might be lessened.
What we’re trying to do here is find a suitable typographic understudy, should Museo and/or Museo Sans not be available to your site’s visitors. “But Tim,” you might say, “Viva @font-face! Backup typefaces are a thing of the past.”
Remember that the web is always – always – about content.
For this deep-seated reason, the technologies we employ as web designers to make text look one way or another are merely an optional layer of presentational instructions. Visitors may take, or leave, our educated suggestions.
CSS @font-face may not deliver your ideal typeface to everyone. Your visitor’s browser may not support @font-face. Your visitor may have settings that override your suggestion, or may have disabled CSS. Your typeface might not load with the rest of your site, for whatever reason.
As responsible typographers, we must respect the nature of this medium and plan for situations that are less than ideal.
Give some thought to the typeface that will understudy your @font-face-parceled Museo and Museo Sans, because even a handsome typeface can look awful when dressed in pants for which its body or rhythm lack adequate measurement.
The assumptions I make about typeface availability have been culled from these CSS font stack resources.
EE LL RR HUZZAH! 22 33
Each grouping, from left to right: Museo Sans, Museo; also, Museo Sans (HUZ), Museo (ZAH!)
When is it okay to mix serif and sans? Usually, when emphasis is needed. And not just inline stuff like em and strong.
Try alternating your text face with its counterpart for things like headings, navigation, pullquotes, and drop caps.
Special effects like the “Huzzah!” above or the dramatic sans-and-serif k from higher up in this spec can also be quite playful and rewarding, but obviously require more attention.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien nec mauris aliquet vitae congue tellus ultricies. Duis in ante nec tortor bibendum viverra. Nulla elit risus, eleifend tincidunt ullamcorper adipiscing, gravida ac nunc. Donec eget vehicula quam. Nunc eu est et neque sodales rutrum. Aliquam erat volutpat. Donec nulla eros, bibendum eu mattis at, tincidunt in massa.
“I am here to say what needs to be said more emphatically.” — Museo 300
Pellentesque at lacus et magna porta consectetur. Phasellus faucibus arcu vitae lorem venenatis interdum ultrices eget velit. Donec eu eros ac ipsum auctor semper quis ut erat. Praesent ac arcu erat, interdum euismod enim. Aenean sit amet elit ac lacus sagittis accumsan. Quisque consequat diam eu orci tincidunt ut dictum dui commodo. Aliquam tellus odio, aliquam quis placerat vitae, fringilla quis magna. Nam ac nunc felis. Mauris vel felis est. Nam ornare pulvinar velit, sit amet lobortis metus scelerisque a. Donec eu eros ac ipsum auctor semper quis ut erat. Phasellus faucibus arcu vitae lorem venenatis interdum ultrices eget velit.
