Monthly Archives: August 2013

Ready for a new semester? Even if you’re not yet ready for all the homework and exams in store for you, our Back To School pinboard is a collection of images and fonts that are reminiscent of playgrounds, chalkboards, and learning how to connect your letters in writing with that thing called cursive that will help ease your mind. From fonts that remind you of elementary school like Lemonade Std Regular to fonts that hold memories of pep rallies and high school football games such as Yearbook Std Solid and Princetown Com.

Just so you know, we’re not all print all the time here at FontShop. In fact a great majority of my work here has been conveyed solely over the internet. In terms of graphic design, print’s my first love, but I distinctly remember some time in late 2009 that I heard something about webfonts, the canvas element, pseudo-selectors, transitions, and a number of other experimental and not-widely-supported web technologies, and thought, ‘I need to really dig down into this stuff.’ One ambitious autoinitiated web project later (it was something similar to Readability, before I knew it existed, indeed, perhaps before it did exist), and I was happily up to my nose in markup, CSS, JavaScript, and preprocessing, feeling good about the direction of the internet and electronic media in general.

Since then I’ve tried to keep up with at least the aspects that touch web typography, but I’m not a current practicing web designer, or a specialist in web composition. That distinction goes to people like Eric Meyer. I am though, like most typographers, a natural fiddler and figure-outer, and so briefly I’d like to share one tiny but important practice regarding sizing type on the web.

body { font-size: 100%; }

This is it. Start by specifying the font-size as 100%. Assuming that you are capable of controlling all other viewing conditions, this is the equivalent to specifying 12pt, 16px, 1em, the keyword medium, or its associated number value, 3. Actually, after testing it, I would never recommend using those old html number values, but the rest hold up. From here, all other font-size specifications should be in em units, e.g. this: h1 { font-size: 3em; }

So why percent? And why 100%?

First, percent holds up where the others don’t, namely in not interfering with font scaling, user overrides, and not wrecking everything in older browsers. About 100: It behaves predictably, and it’s large enough to comfortably read on just about any screen. (The text you’re reading now is set to 100% or 16px.) A caveat: There’s a strain of thought regarding font-size that says 16px is an unusual reference size, so why not shift the scale so that 1em is the same as 10px, 1.4em the same as 14px, and so on? To do so, divide 10 by 16, and set your body font-size at this percent, 62.5%. Then set subsequent elements in relation to this, in em units. This is easily achievable and works reliably in most browsers, but still gives you problems in the older browsers. So weigh your options, and stick with what you know works in the majority of cases.

Speaking of sticking with what works, you should also consider doing the opposite: abandoning older browsers for newer ones, taking advantage of newer CSS functionality, and letting a service such as Modernizr or Sass deliver more primitive CSS to the old browsers.

Hang on, what kind of new CSS functionality?

One that directly relates to this subject is calc(), which lets you do simple math in your CSS. It’s really handy for specifying fractional units simply, and for mixed-unit calculations. Another is a new unit of measure, rem, which unlike em, functions as a constant, referencing the root em rather than the em specified in the parent element.

So what size is it going to be, really?

We’ve arrived at the saddest part of this piece on sizing. At this point in time there’s no definitive answer. With screen resolutions all over the place, a pixel is not a pixel is not a pixel, and while absolute units such as the point, (1 in = 72 pt) ought to stay absolute, apparently doing so would break old designs, and we’re stuck with them being reduced to the task of stand-in multipliers for relative units. So an inch is 96 reference pixels, a point is 1.333333px, and a physical pixel may be anywhere from 1px to 2px or more in reference pixels.

The good news

If there’s anything I’ve learned about web standards in the past five years, it’s that people who care about this stuff are in a position to set the standards. At TypeCon in Atlanta back in 2009, there was a panel discussion about what form commercial webfonts would ultimately take. It was less than a year after that that all major browsers were planning to support the new format, woff. Standards bodies followed the lead of the browsers. So ultimately we’re the ones driving this.

Novel prominently displays its calligraphic roots, particularly in its compact italic. This naturally extends a close relation to Auto, a low contrast sans with a well-developed calligraphic flair. That’s understating it. Auto is to my knowledge the first typeface to initially ship with multiple sets of italics, each in a distinct style.

Together, Auto’s young voice and Novel’s classic finish strike a chord full of depth and interest.

How many of you are excited to start a new school year? Ok, maybe you’re not excited for all the new books you have to read or all the lectures you have to sit through, but we have something that will keep you interested. Our Alphabetized board is a collection of interesting finds that showcase full alphabet designs ranging from posters, unique fonts, home decor, and character sets designed just for fun.

Together, the historic influences and softened details of each serve as a solid enough area of cohesion, while the overall difference in tone allows Brandon to ably direct the reader’s path. Just one note on Cooper—consider spacing the type more loosely to perform better at smaller sizes. The below example is set without any added spacing.

In 2008 exljbris released it’s first commercial typeface, Museo, with several weights offered for free. This strategy worked well, turning Museo into a bestseller. The foundry has continued to add additional typefaces, such as Anivers and Fertigo, with free weights. Below are some highlights from their EULA.

Basic EULA Rights

Desktop use supports up to the maximum number of simultaneous users specified in the applicable license, starting with 1 users.

You may provide the font to a designer, printer, or other service bureau that is exclusively working on your behalf only if they agree to the terms of the original license and retain no copies of the font software on completion of the work.

Non-editable embedding is allowed.

Restrictions

You cannot distribute the font or make it accessible to third parties beyond the scope of the original license.

Orphans are stranded bits of copy, a single word occupying its own line, such as the word type, above, at the top of the right column. Widows are longer bits of copy, a few words perhaps, occupying a single line that’s become estranged from its native text column, pushed to the top of the next column, alone.

Left unresolved, the presence of widows and orphans reveals to the reader the inattention of the typographer. They throw off the margins; they call undue attention.

Keep Options

In InDesign you can specify a minimum number of lines allowed to break between columns. To do it, apply a paragraph style to the paragraphs you’re working with and set the number of lines in the Keep Options page of that paragraph style’s dialog.

Note that the default Keep with Next value, 0, is probably best to keep at 0 until you know what you’re doing with it.

There. The two lines jumped over to clothe, feed, house, and otherwise eliminate the orphaned status of this previously lost word, type. Solved, right? No. What we’ve covered here is really just one aspect of the craft. The art of typography is creating the kind of flexible compositions that absorb the shocks—both of the problems, as well as those created by their solutions.

Look at the hole left behind in the left column created by our keep options. To fill it, we may have to bump something from a previous page, arbitrarily resize the text frame (and perhaps its surrounding text frames), try something funny with the leading or tracking, italicize some foreign words, or otherwise do some good old-fashioned copyfitting. Or, as I often do when setting longer works, most or all of these. A good layout will permit this kind of editing.

Alright, technically it’s called Malaussène Translation, and that’s because it’s the first of a series that explores different kinds of stroke contrast: translation, rotation, and expansion. If you haven’t read Gerrit Noordzij’s The Stroke, doing so will clear everything up in about a fifty pages. The face comes in four weights, the standard Roman, Italic, Bold—and then—out of nowhere a super-quirky topheavy black Display weight. Its overall feel in text is fresh and refined.

T-Star is a spare, rectilinear design in five weights, all but the heaviest accompanied by its italic. It also happens to have a monospaced variant in selected weights. Together the two serve to create an updated and contemporary palette capable of refreshing the eyes of their readers.

New family pages are here and they have some great features that you should be aware of. But first let’s define what we mean when we mention the term family.

A family is a collection of related typefaces which share common design traits, common name, and are from the same foundry.

When you look at a family page you’ll be able to filter by product, format, and a series of popular sortable list. For this example, we’ll use Univers.

Product

Singles will show you all styles that are available within the family. Packages with show you groups of those styles that are available. All will show you both singles and packages.

Format

If you know the format you need to license your fonts in, then you can choose those formats here. Other includes legacy formats like PC PostScript and Mac PostScript. All will show you every format available.

Did you enjoy our travel-themed newsletter this week? We have a few vacation boards on Pinterest from past trips our very own FontShoppers have taken. From Tokyo to London, check out non-Western type in use and find Old English in the UK.