Author Archives: David Sudweeks

David Sudweeks is a letterer and type designer. He works at his home studio in Berkeley and at FontShop’s San Francisco Office as their type expert. He writes for FontShop, blog.fontshop.com, and occasionally on The FontFeed, fontfeed.com.

Ice Flowers

This post is part of a daily series that adds one ornament per day to our blog, up till the new year.

Ornaments-9

We were greeted with ice on the sidewalks here in San Francisco this morning, commonplace elsewhere but quite rare here! It caused me to look up this one from my FontBook favorites once I made it into the office: from Kapitza, Ice Flowers.

The Ornament Series is produced collaboratively by David Sudweeks and Yves Peters.

PTL Roletta Ornaments

This post is part of a daily series that adds one ornament per day to our blog, up till the new year.

ornaments-8

A set of floral elements accompanies the chubby sans/slab serif Roletta family. These contemporary interpretations of classic ornaments allow the user to create typographic tiled backgrounds and borders.

The Ornament Series is produced collaboratively by David Sudweeks and Yves Peters.

Megaflakes

This post is part of a daily series that adds one ornament per day to our blog, up till the new year.

ornaments-7a

Nathan Williams’s Megaflakes captures the beautiful structures of winter’s most delicate and ephemeral of decorations.

The Ornament Series is produced collaboratively by David Sudweeks and Yves Peters.

Walbaum Ornaments

This post is part of a daily series that adds one ornament per day to our blog, up till the new year.

Ornaments-6

Frantisek Storm, in digitizing the work of Justus Erich Walbaum, did so with care to preserve not the original letterforms as drawn, cut, cast, and printed, but rather the intentions of the master behind their creation. In doing so he also brought to life these great bits of ornamentation.

The Ornament Series is produced collaboratively by David Sudweeks and Yves Peters.

HWT Star Ornaments

This post is part of a daily series that adds one ornament per day to our blog, up till the new year.

Ornaments-5

Prince used to sing “Everybody Is A Star” – in this case it’s dozens of them. HWT Star Ornaments offers a selection of stars and borders based on vintage wood type ornaments to add sparkle to your designs.

The Ornament Series is produced collaboratively by David Sudweeks and Yves Peters.

Mr Moustache

This post is part of a new daily series to count up to the new year, adding one ornament per day.

Ornaments-4

Georg Herold-Wildfellner’s whimsical Mr Moustache comes with a variety of dingbats, frames and ornaments. Hearts, flowers and angels’ wings frame your most intimate love notes.

The Ornament Series is produced collaboratively by David Sudweeks and Yves Peters.

Seravek

This post is part of a new daily series to count up to the new year, adding one ornament per day.

Ornaments-3

Those who have been to Eric Olson and Nicole Dotin’s studio will recognize this specimen of an Italian Greyhound found in the glyph palette of Seravek, as Charlie, the “silent third partner” at Process Type Foundry.  The background texture originated as a artwork for Sylvia and Daniel Janssen’s poster design for the Habour Museum Hamburg. Atlantik visualizes the maritime theme with hypnotic wave-like ornaments.

The Ornament Series is produced collaboratively by David Sudweeks and Yves Peters.

Fin-de-Siècle

This post is part of a new daily series to count us up to the new year, adding one ornaments as we go.

Ornaments-2

Since the notion of working with typographic devices like borders and frames is something seen more at the end of the 19th century, Astrida Valigorsky named her collection of beautiful stylized flowers Fin-de-Siècle. The wallpaper-like background texture is taken from Jörg Hemker’s FF Sero, set solid.

The Ornament Series is produced collaboratively by David Sudweeks and Yves Peters.

FF Quixo

This is the first of a new series to count us up to the new year, adding one ornament per day.

Ornaments-01a

We can only wonder how much longer the younger generations will recognize this icon from Frank Grießhammer’s FF Quixo as a telephone. The curly cord turns it into a playful ornament.

The Ornament Series is produced collaboratively by David Sudweeks and Yves Peters.

Ornaments

Here at the end of the year, we’re starting something new. Through the holidays, counting up to January 1, Yves Peters and I will be decorating this blog with ornaments – one per day. The good stuff, often tucked away at the bottom of the glyph palette, ornamental glyphs constitute an interesting area where type designers can play and experiment with contrasting typographic texture, where type can easily decouple from its associated meaning and serve as pure form.

The series will span faces that introduce a little something extra, say, a single fleuron or border set, to faces entirely decorative in nature. And we’ll also take on the symbolic ‘also functional’ category, dingbats, which we find underutilized and ripe graphic / textural material. (We’ll be taking a very inclusive approach to what one might consider ornaments.) That all starts Sunday. Until then, to the Americans and anyone else who observes it — Happy Thanksgiving. We’ll be closed over the holiday to spend time with our families.

Ornaments-0

The above sample is just a taste of the series, set in Jonathan Perez’s Cadence (background) and featuring a fleuron from Jim Parkinson’s redrawing of Dwiggins’s Electra.

The Ornament Series is produced collaboratively by David Sudweeks and Yves Peters.

Fine Print: Fonts for Small Sizes

Type designed specifically for use at small sizes attempts to solve the problem of too much to say in too little space. When conserving resources (ink, paper, etc.) comes at the cost of legibility, it’s best to plan your type palette around faces made to perform below conventional text sizes. How will you know which faces hold up small? Here are a few principles to consider:

Picture 1

Choose something generally robust.

Picture 3

The x-height should be relatively large. Counterforms need to be accentuated. Spacing should be pretty generous. And careful with fine lines—they tend to disappear. Notice above how ITC Bodoni Six differs from a larger optical size Bodoni Seventy Two. This brings up another point. Sometimes a font’s name includes a reference to its optical size, such as a number, or the terms agate, pearl, or micro. Any others come to mind?

Size-specific optical corrections

Picture 2

As if reproduction concerns weren’t enough on their own (managing inevitabilities such as ink spread and so forth), at small sizes your eyes tend to further distort the letterforms. For example, when strokes intersect, (especially at acute angles) the negative space closes up near the intersection. This is remedied by forcing white up into the crotches and joins by way of light wells or ink traps, as you can see above in Matthew Carter’s Bell Centennial. Other phenomena, such as the flattening and squaring off of curves are counteracted by enlarging the gestures of each form. These are easy to compare in faces that have a range of optical sizes. Without, it just takes testing and practice recognizing what works and why. To get you started in the right direction, here’s a FontList of type that works at small sizes curated by a friend and fellow typographer, Nick Sherman.

Picture 4

Take these principles into consideration and you’ll find they apply not only to print, but also to screen media that’s meant to be viewed from a distance. You may also find, as many have, that the unusual texture of faces designed for small print, such as  Joshua Darden’s Freight Micro above, can be quite appealing at larger sizes. That’s it. Using Type continues here Thursday. Thanks to Nick Shinn’s Scotch Modern for setting the opening title.

Le Monde Journal and Parisine

Today we pair a couple of Jean François Porchez’s masterfully understated faces, Le Monde Journal and Parisine.

Le-Monde-Journal-and-Parisine-1 Le-Monde-Journal-and-Parisine-2

From Le Monde Journal emanates a certain strength, mostly due to its forceful rhythm and its forms’ careful balance between robust gestures and delicate details. The face is designed to set compactly both horizontally and vertically, with a narrow fit, a large x-height and modest extenders. It also comes in a range of tightly-stepped weights to accommodate various factors of scale and output. As a companion to Le Monde Journal, Parisine operates as a sophisticated humanist sans, adding a softer dimension to the pairing. Together the two create a versatile set that lends care and credibility to its message. Should you require something even more playful, see Parisine Plus.Le-Monde-Journal-and-Parisine-3 Le-Monde-Journal-and-Parisine-4 Le-Monde-Journal-and-Parisine-5

Great Pairs continues here Wednesday.

Two Spaces After a Period—The Definitive Guide

When you’re typing, you may out of habit put in an extra space at the end of a sentence; That’s two spaces between the closing punctuation of one sentence and the beginning of the next. Or it may not be out of habit, but rather, on principle. Let’s talk about that principle.

Two-Spaces-2

Before common use of the space, early Latin writing ran in a continuous script, a stream of letters, line-breaking often in the middle of (what we call) a word. With the addition of spaces, and later, punctuation, words as we now know them developed, and along with them, sentences, grammar. As to the amount of space between sentences, that would vary by hand and circumstance until moveable type.

Screen Shot 2013-11-14 at 6.17.33 PMNicolas Jenson, Venice, 1475.

And after. You see, spaces come in a variety of standard sizes. The earliest works printed from moveable type were all set in justified columns, meaning that the width of each word space expanded or contracted slightly from the normal word space to fit different numbers of characters per line as needed. In these early samples, the amount of space between sentences ranged from quite wide, to slightly narrower than the space between words. The most obvious reason for using a narrower space here is to maintain an even typographic color, since the period traps quite a lot of negative space on its own. By the late 18th century, conventions favored more generous sentence spacing. My take from all this early letterpress stuff—counting the number of spaces after a period is as pointless in samples of early printing as it is in handwritten manuscripts. This holds up until of course, typewriters.

Two-Spaces-1Published by Anson D. F. Randolph, New York, 1864. The text is a Caslon.

With typewriters, we get three things—unjustified type, fixed-width typefaces, and typists. The first two pertain to our discussion because we can now count precisely the number of spaces after the period. The third, because our usual scheme of submitting something to be published just got another layer. The typewritten page became both an interim format and a final format for papers and books. Scholarly papers, for instance, were submitted as typewritten manuscripts which then did the rounds between editors, and on to typographers, and ultimately, typesetters. In contrast, for some publications, the typewritten page (or a copy of it) was the final. Whether two spaces after a period arose as a standard under the first typing instructors’ imitation of the printed page, or the practice began independently of what came before, is unclear. Ultimately however the question of how to compose the input should be settled by its output.

The common convention for published works today is a single space between paragraphs.

If you’re submitting your writing to be published, save the typographer the trouble of finding and removing all those additional spaces by not keying them in in the first place. If you’re producing final output on your own (writing for a blog, etc.) the same rule applies.

Unless

Keep putting two spaces in if:

  • You’re typing on a manual typewriter, or your final output will emulate the look of that of one.
  • If you’re specifically pursuing a naïve style.
  • If your style guide requires it.

This last one you should be careful to do begrudgingly, like I do when occasionally required to capitalize the word ‘Internet.’ Which arcane style guide requires two spaces after a period, you ask? APA Style does. MLA, Chicago, and AP have all questioned the usefulness of that second space and decided it’s best to go without.

And that’s it. Thanks for reading. Thanks also goes to Evert Bloemsma’s FF Legato for setting this week’s nameplate. Using Type continues here Thursday.

FF Yoga and FF Sero

Today we look at Xavier Dupré’s FF Yoga and Jörg Hemker FF Sero.

FF-Yoga-and-FF-Sero-1 FF-Yoga-and-FF-Sero-2

FF Sero’s understated humanized gothic, fully capable of text setting on its own, puts the emphasis on FF Yoga’s statelier qualities. Together the two create a warm, firm, yet flexible feel, suitable for contemporary work. If FF Yoga looks familiar, it’s because the face is heavily influenced by Eric Gill’s Joanna, but not without a fresh take all its own.FF-Yoga-and-FF-Sero-3 FF-Yoga-and-FF-Sero-4 FF-Yoga-and-FF-Sero-5

Great Pairs continues here Wednesday.

Doing Responsive Typography

Responsive typography makes it possible to serve typographic compositions that adapt to fit their various environments, resizing, reflowing as necessary to best serve the reader, whether they’re viewing the content on a phone, a cathode ray tube, a large display, in print, or something in between. With this piece, we’ll take apart a simple example of responsive typography I made, and see how it works. Adapting other aspects of typography beyond size, measure, etc. is certainly open to further exploration, but I’m keeping this first one simple.

Responsive typography is just typography.

All normal principles apply. The new principles involved deal mainly with being mindful of in-between states—the areas just outside your control. Ready? Let’s go.

Doing-Responsive-Typography-1

Here’s the demo I made.

I started by setting up a development environment on my computer (an Apache web server), and tested on real devices as I went. I wrote the markup and styling (HTML and CSS) in a text editor (BBEdit). And I did a lot of fiddling with the styles in the browser (using Firebug, an add-on to Firefox).

I built out the structure of a two-column layout with the idea that as the width of the page contracts, the right column is hidden. (I could have just as easily turned the right column into a footnote or something.) I styled the page following my own CSS advice: specify as little as possible. In the HTML header, I added this important meta tag:

<meta name="viewport" content="width=device-width"/>

This prevents smaller-screened devices from displaying a scaled-down desktop version of the page. It keeps the text from getting too small. Don’t underestimate the importance of this step.

Set the body font-size to 100%.

Type that’s sized smaller or larger from here should be specified in em units. Since em units change depending on the font-size specified in a given element, you may want at times to refer to the original em you specified. You can. They’re called root ems, or rem units. In the right column, I give the line-height in rem so that I’m able to maintain the same baseline rhythm as the normal body copy. (Since the body’s line-height is in rems, I could have just as easily set the right sidebar’s line-height to inherit.)

Just as an aside, reorienting from portrait to landscape has become commonly understood as a simple way to make the text a bit larger. Some (those with poorer eyesight) are in fact counting on this. So just because you can maintain a consistent text size across different orientations doesn’t mean you necessarily should.

Screen Shot 2013-11-07 at 7.55.06 PM

Give yourself margins.

One common problem with typography on the web generally is a lack of margins. Setting margins to auto works fine until the window or viewport causes that auto value to go down to zero. So in this example, I put an additional 2em body margin outside the content wrapper’s auto margins.

Breakpoints

It’s precisely at this spot where the auto margins hit zero that I place my first breakpoint. More like a transition/squish-point, really. All that changes when the viewport goes down to 52 ems is that the content wrapper goes from a specified 45 ems in width, to taking up 100% width of its parent element, the body. In CSS, that looks like this, just below everything else in the file:

@media only screen and (max-width:52em) {
 #wrapper {
    width: 100%;
 }
}

Screen Shot 2013-11-07 at 7.56.15 PM

As the two columns shrink in size, their text reflows as needed until the right sidebar column gets too narrow. At this point, for simplicity’s sake, I just take it out, and let the main column take up the full width.

@media only screen and (max-width:45em) {  
  #sidebar {
     display: none;
  } 
} Screen Shot 2013-11-07 at 7.57.38 PM And it's that simple.

What’s left to improve here? Well, for starters, I think I could show more variety in terms of type size and webfont specification. Maybe the right sidebar could go up a touch in weight. I could get those baselines to reconcile.  I could demonstrate how to target different screen resolutions differently. Seems like the measure on the iPhone is a bit narrow. And I could definitely do something more interesting with the layout at larger sizes. Maybe add a nav area to show how to scale and selectively show/hide links. There’s really a lot I’ve got left to explore.

I’ll return to this series on responsive design from time to time with demos of stuff I find interesting.

Using Type continues here each Thursday. Thanks to Nicole Dotin’s Elena for setting the nameplate, and of course Michael Abbink’s FF Milo Serif Web for the live demo text.

Follow

Get every new post delivered to your Inbox.

Join 59,537 other followers