The Hypsometry Blog.

XIV.

2011-02-17T16:15:00-08:00

This came from somewhere, I’m sure of it. I found it, used it, loved it, and here we are, years later, and I don’t have any recollection what that original source was, or who originally coined this simple idiom. Nonetheless, let me present to you a tiny little morsel of Ruby:

class Symbol
  def code(&block)
    block.call
  end
end

Include that in your project, and you can write code that does a better job of self-documenting. For example:

:filter.code do
  def reload_user
    # ..
  end
  
  def verify_humanness
    # ..
  end
end

:form.code do
  def required_status_classname
    # ..
  end
  
  def field_wrapper_classes
    # ..
  end
end

Simple Ruby syntactic sugar, helping you keep things clear and readable. Not only that, but if you’re using a block-folding text editor (such as TextMate), then you can navigate through your code a little bit more easily.

February 17, 2011.
Ashland, Oregon.

XIII.

2011-02-03T09:01:00-08:00

Hypsometry has a new design, inspired by the private press movement and its humanist reaction to the industrialization of printing in the nineteenth century.

This design, like my recent work on Hypsography, makes use of Sorts Mill Goudy, Barry Schwartz’s excellent revival of Frederic Goudy’s classic typeface Goudy Old Style. For its titling, it features CastleType’s typeface Goudy Trajan, which is a digital revival of Goudy’s translation of the Roman majuscules found on Trajan’s Column. (Yes, a double revival.)

The layout is built on a simple grid. (Too simple, really, and insufficiently humanist, at this point.) I’ve used, and included, Analog Coop’s #grid script, which means that you can type g and see the grid; type g + h and have the grid stay visible; or type g + f to have the grid displayed on top of the site’s content.

Again following in the traditions of the private presses, Hypsometry now has a printer’s mark, with which I’ve stamped the pages.

More is coming, and I have more to say about all this; but for now, this suffices.

February 3, 2011.
Ashland, Oregon.

XII.

2011-01-17T10:27:00-08:00

I guess I must have ink in my veins: When I first learned about the potential of digital printing technology, I couldn't resist putting the rest of my life on hold while I tried to adapt the typographic wisdom of previous centuries to the possibilities of the present day.

— Donald Knuth,
Digital Typography.

January 17, 2011.
Ashland, Oregon.

XI.

2010-07-22T10:26:00-07:00

Last fall, after years of creating highly dynamic websites and web applications, I reversed directions. Now I aim for as much static HTML as possible. It’s simpler, faster, cleaner, more elegant, easier to read, and for most projects it’s all you need.

Hypsography and Hypsometry, for example, are both entirely static. Hand written HTML, CSS, and Javascript, served up simple and fast.

This site, the Hypsometry Blog, is built with Jekyll, Tom Preston-Werner’s elegant little Ruby hacker blogging tool. Jekyll takes Liquid templates and fills them with marked-up text, sprinkling a little YAML data over the top, and outputs HTML ready for your server. That works well.

Hypsography, however, is getting to the point where I don’t want to be maintaining all the code by hand (albeit with heavy help from Textmate), but I also don’t want to lose the simplicity and speed of serving static files. There’s no need to migrate to a full-bore content management system, with all the configuration and maintenance hassles that inevitably entails. Jekyll’s wonderful, but it’s not usable on sites that aren’t simple blogs.

Since Jekyll was released, a slew of static site generators written in Ruby have come along (and some have gone right along too). They all have a basic philosophy similar to that originally outlined by Tom Preston-Werner:

They all take templates and content and merge them together, creating static HTML sites ready for deployment. They tend to use YAML for configuration. Most accept multiple markup formats as input. They all can watch your directory for changes in order to rebuild the site dynamically as you work on it.

Their differences are smaller, but important. Each has a slightly different approach to the same problem, and thus each meets a slightly different need.

Having spent the past couple days (for the second time in six months) going through the options and evaluating them, I thought I’d summarize what I’ve found. Let me point out that all the programs discussed below seem excellent and worth investigation. There are other programs out there which seem less excellent, and I’ve ignored those here. Please let me know if I’ve missed anything, of course.

(There is one other useful approach to all this: Writing your own generator using Rake, YAML, and Mustache. This is quite appealing, but not what I’m in the market for today. Chris Wanstrath wrote about his approach last year, if you’re interested.)

Here follows my one-sentence summaries of all the Rubyist static site generators that I’ve looked at recently:

Bonsai.

Beautiful, simple, flexible (uses Tilt for template handling), progressive (HTML5 by default), but the current version doesn’t work out of the box and it’s intended primarily for portfolio sites. (Project site, Github.)

Middleman.

Rails-like (in ways both good and bad), highly configurable and flexible, and includes automatic minification of CSS and Javascript, as well as other useful optimizations. (Introductory post, Github.)

Nanoc.

Extremely powerful and extensible, perhaps too much so, and prefers configuration to convention. (Project site, Github.)

Staticmatic.

Simple, clean, but strangely Haml-dependent. (Ruby Forge, Github.)

Webby.

Simple, flexible, quite Jekyllish. (Ruby Forge, Github.)

Webgen.

Powerful, extensible, slightly rigid in operation. (Ruby Forge, Github.)

Not quite a conclusion.

That’s the list, and those are my notes. You can probably guess which I’m going to try out on Hypsography, but whether or not you can, you’ll be hearing more about the results here.

A historical aside.

Since I wrote once before about static site generation, I’ve taken this opportunity to begin restoring old articles to the Hypsometry Blog. As such, there is now an article zero: Nulla, actually, since the Romans didn’t really have notation for zero.

Nulla serves as a marker. All articles older than it are reprints, numbered negatively (which is also an anachronism, but hey), and probably slightly altered from their original forms. All articles newer are indeed new, part of this latest iteration of the Hypsometry Blog.

As time passes, I’ll continue working my way through the Hypsometry archives, digging out other older articles perhaps worthy of a second look. Or at least worthy of having their links preserved. Don’t take them too seriously – they’re oldies, but not necessarily goodies.

July 22, 2010.
Ashland, Oregon.

X.

2010-06-29T19:11:00-07:00

June 29, 2010.
Ashland, Oregon.

IX.

2010-06-23T15:56:00-07:00

Sometime in the mid-nineties, around the time I stopped reading Mondo 2000, Jaron Lanier stopped annoying me. I assumed he was still out there, being all far out and dreaded and inter-disciplinary, but he no longer forced his way into my attention, and was thus out of mind.

Apparently he’s not yet out of sight. He has in the interim, however, become more articulate, more insightful, and more interesting. This past January his newest book, You Are Not a Gadget, was published, and in February Harper’s Magazine published an excerpt called ‘The serfdom of crowds.’

(The complete article is only available online to Harper’s subscribers, but there is an illicit version available on Scribd, in beautiful HTML5. That said, I recommend that you go to your local library and read the damn thing in print.)

Let me quote from it at length, to give you something of its full flavor. Here is Lanier discussing the collapse of the financial markets in 2008 and how that related to, and derived from, the essential inequality of the current structure of the web:

True believers in the hive mind seem to think that no number of layers of abstraction in a financial system can dull the system’s efficacy. The crowd works for free, and statistical algorithms supposedly take the risk out of making bets if you are a lord of the cloud. But who is that lord who owns the cloud that connects the crowd? Not just anybody. A lucky few (for luck is all that can possibly be involved) will own it. Entitlement has achieved its singularity and become infinite.

What has allowed this infinite entitlement, this neo-feudalism? We have, in a thousand little ways:

People degrade themselves all the time in order to make machines seem smart. We have repeatedly demonstrated our species’s bottomless ability to lower our standards to make information technology good.

I would amend the last sentence to refer more generally to ‘technology’, rather than just to ‘information technology,’ for this lowering of standards is wide-spread. For example, it is precisely what allows us to claim that items fabricated from synthetic chemicals and compounds and shaped roughly into the appearance of traditional foodstuffs are, in any way, actually food.

Lanier is focused here specifically on the web side of this argument, not on the general case; but many of the things he writes apply more generally. For example:

Enlightened designers leave open the possibility of metaphysical specialness either in humans or in the potential for for unforeseen creative processes that we can’t yet capture in software systems. That kind of modesty is the signature quality of being human-centered.

To return to my example, this is the difference between manufacturing bread in factories and baking loaves in a wood-fired oven. (Brief aside: When did we begin using ‘manufactured’ to mean ‘not manufactured?’)

The former method asserts that there is nothing special about having a human bake bread; everything involved can be simplified down such that mechanical and software systems can handle it. The latter method, on the other hand, recognizes that there is potential inherent in the baking process that only a baker can explore. Choosing the first method devalues the second – devalues the method, devalues the bread, and devalues both the baker and the eater.

To return to Lanier, on this devaluation and its causes:

What computerized analysis of all the country’s school tests has done to education is exactly what Facebook has done to friendships. In both cases, life is turned into a database. Both degradations are based on the same philosophical mistake, which is the belief that computers can presently represent human thought or human relationships. These are things computers cannot currently do.

And on the resultant effects of this devaluation, this forced technological simplification, this database as life:

When technologists deploy a computer model of something like learning or friendship in a way that has an effect on real lives, they are relying on faith. When they ask people to live their lives through their models, they are potentially reducing life itself.

June 23, 2010.
Ashland, Oregon.

VIII.

2010-06-14T12:56:00-07:00

As you know, Safari 5 came out last week. Two of its best features are the Safari Reader and much improved support for HTML5.

Reader you know about. You might not know, however, that Safari 5 now outscores all other browsers on the HTML5 test. That’s exciting. It’s not complete support, but it’s a lot of the essentials. And, after all, the spec itself isn’t even complete yet.

Another thing you might not know is that I’m working almost exclusively in HTML5 these days. If there’s a reason not to use it, I’m not; but it’s my default and my preference. That means that my photography portfolio site – Hypsography – is all HTML5 under the surface. And that, in turn, means that the news articles I write for Hypsography make appropriate use of the article element, along with many other semantic elements. One <article> equals one article. Simple and clear.

Let’s review what Apple says about Safari Reader:

As you browse the web, Safari detects if you’re on a web page with an article. Click the Reader icon in the Smart Address Field, and the article appears instantly in one continuous, clutter-free view. You see every page of the article — whether two or twenty.

Totally. And it works really well, at least when you’re reading the Times. When you’re reading Hypsography, however, it works a little less well:

That’s not ideal. The ice photograph that’s intruding in the middle of the text is enclosed in an aside, which should be considered “tangentially related to the content around” it, but Safari apparently doesn’t get that. But at least it’s readable, somewhat. And, looking under the surface with the Web Inspector, this misinterpretation looks fixable via CSS.

What’s worse is what happens when you scroll to the end of the article:

Safari has decided that the article ends there. Arbitrarily decided, it seems, since the article does not end there. In fact, of the five sections into which that article – An end of the year review, inspired by Mr. Dalton Rooney – is divided, Safari has chosen to include only two of them. The first and the third sections. Naturally.

Let me clarify this a smidge more: The five sections into which this article is divided are delineated by section tags, all of which are contained with the one parent article. This is semantic, this is simple, and this is clear. You might figure it’d be easy too.

Oh well.

If anybody out there has an understanding of what precisely Safari Reader looks for in an article, please let me know. Thanks, and good luck.

June 14, 2010.
Ashland, Oregon.

VII.

2010-06-07T13:59:00-07:00

After a diapause of several years, Hypsometry again has a portfolio section.

June 7, 2010.
Ashland, Oregon.

VI.

2010-01-15T11:27:00-08:00

One small, but quite good, reason to rejoice at the coming of a widely useable @font-face: True small capitals are now possible on the web.

Small capitals are, as Alec Julien put it, “upper case glyphs drawn at a lower case scale.” They are not, however, simply regular capitals shrunk down; they are properly their own font, with their own characteristics, designed to work with both regular capital and lower case letters.

To be more precise: 1. The cap height of a small capital is the same as, or just slightly larger than, the x-height of the typeface’s lower case letters. 2. The weight of the strokes of a small capital are comparable, visually speaking, to the weight of the strokes of the typeface in general, at the size being used. 3. The proportions of a small capital are also comparable, visually speaking, to the proportions of the characters of the typeface in general, at the size being used.

Two implications of the latter two points are that the strokes and proportions of a given small capital letter will be heavier and more spread out than the strokes and proportions of the same letter upper cased, at the same point size. This is because small capitals have the form of regular capital letters, but the characteristics of the lower case.

Unfortunately, true small capitals are hard to come by these days. Computer software, as a rule, uses fake small capitals, created simply by scaling down upper case letters so that they are smaller than the originals, but larger than the associated lower case. This is true of web browsers as well as word processors, desktop publishing applications, and vector editors.

For instance, the second line above should look about like this, using true, properly designed small capitals: But, had I not @font-face to rely on, your web browser’s fake small capitals would make it look more like this: Not at all the same thing, clearly. The proportions of the second example are all wrong – simultaneously too big and too thin, tracked too tightly, and rather difficult to read. The first example is balanced, strong, eminently legible.

Using true small capitals on the web was not possible until recently, at least not with type that is actually type. Let’s look at how it works, and also, along the way, at several ways to fake small capitals. Comparing them all side by side will make even clearer the import of the differences I described above.

1. Setting the `font-variant` property to `small-caps`.

This is what should work. The W3C CSS standard tells us that font-variant: small-caps will instruct the browser to do the right thing. “A value of ‘small-caps’ selects a small-caps font”, it says.

This is how your browser interprets font-variant: small-caps:

Giambattista Bodoni: February 16, 1740 in Saluzzo – November 29, 1813 in Parma.

That looks okay, I guess. In comparison to the small capitals, the upper case letters and numerals look overly heavy. Some of the small capital letters – the t and the m, for instance – have strokes that are so thin as to almost vanish.

Let’s look at a second example, to make the differences clearer:

A a a — M m m — X x x

Now you can see quite clearly that the cap height of the small capitals is substantially larger than the x-height of the lower case letters, to say nothing of the overshoot of letters like a and m. Also, you can see how the proportions and weights of these fake small capitals match neither the upper case nor the lower case. All in all, this style of fake small capitals works quite poorly.

But why is this? The typeface in which this page is set – IM Fell Great Primer – has a small capitals variant, so why do the browsers not use it? After all, the CSS standard says that they should when font-variant: small-caps is used.

Sadly, no browser has actually implemented this. Instead of looking to see whether true small capitals are available, they all jump to the next portion of the standard:

It is acceptable (but not required) if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled upper case characters.

I’m not sure who, precisely, thinks that that is acceptable, but even if it were, it is surely not acceptable to ignore existing small capital fonts created by proper methods in favor of bogus ones created on the fly.

2. The Joe Clark method.

Faced with the problems above, Joe Clark suggested a simple alternative: Convert the text to capitals and reduce its size. This is, of course, exactly what the browsers do when you specify font-variant: small-caps. The slight theoretical advantage provided by Joe Clark’s method is that you can more precisely and carefully control how much the fake small capitals are scaled down, leading, perhaps to better matching of heights, proportions, and weights. A simple example:

Giambattista Bodoni: February 16, 1740 in Saluzzo – November 29, 1813 in Parma.

Of course, applied like that, Joe Clark’s method forces all letters and numerals to small capitals, even if that’s not what you desired. A slightly more sophisticated version of his method would apply the technique selectively – say, to letters that are already lower cased. Let’s assume that you have an automatic way to do so – a CMS plugin, for example, or a clever piece of Javascript:

Giambattista Bodoni: February 16, 1740 in Saluzzo – November 29, 1813 in Parma.

This, of course, is a total pain in the ass, and it makes a bit of a hash of the text’s HTML. On the other hand, it does allow for more precise control of the size of the fake small capitals, which might be helpful.

To see that more clearly, here is a third example – the same as the one in §1:

A a a — M m m — X x x

You see the same problems as in §1: The Joe Clark small capitals are too big and their proportions are wrong. The weights, however, are not quite as bad. Let’s look at a fourth example, comparing the font-variant method and the Joe Clark method, in that order, to see how the two compare:

a a — m m — x x

The proportions and weights of Joe Clark’s fake small capitals are better than those of the font-variant method, but only because the letters themselves are even larger. Hard to call that an improvement.

3. The Nick Shinn method.

This problem of how to fake small capitals when no proper ones exist, or the software will not let you access them, is not unique to the web. Nick Shinn has suggested that, in addition to capitalizing and reducing the size of the text, you should increase its weight. This allows for making the small capitals a little smaller – a little closer to the actual x-height of the typeface – while better preserving their weights and proportions.

A simple example:

Giambattista Bodoni: February 16, 1740 in Saluzzo – November 29, 1813 in Parma.

A more sophisticated example, again – as in §2 – imagining some sort of automated helper, and ignoring the complexity of the technique and the hash it makes of the HTML:

Giambattista Bodoni: February 16, 1740 in Saluzzo – November 29, 1813 in Parma.

This looks better in some ways, and worse in others. It is still basically unacceptable. Perhaps in some contexts, with some combinations of typeface and size, this might work well. Here, despite the improvement in small capital size, the overly heavy weight is too much. Of course, the typeface you see here has no true bold weight, so your browser is faking it; perhaps it is too much to hope that a faked heavy weight could help us, in turn, fake small capitals.

Let’s compare upper case, lower case, and Nick Shinn small capitals:

A a a — M m m — X x x

Correct height and proportions with excessively heavy weight is no better than incorrect height. And it turns out that the x-heights are not in fact correct: They only appear correct at this size of type. Try resizing the text in your browser window, and you’ll see that the evenness is limited to the sizes I’ve set here.

A fourth example, this time comparing the font-variant method, the Joe Clark method, and the Nick Shinn method, presented in that order:

a a a — m m m — x x x

Of these three, the browser scaling method seems the best, despite is many flaws. None produce good results, and it’s far and away the simplest.

4. Using `@font-face`.

There is an additional problem here, besides the technical failings of the browsers and the limits of what you can express using CSS: Proper small capital fonts are a rarity. Type designers design them, foundries sell them, but few non–professionals have them on their computers.

The typeface in which the Hypsometry Blog is set is IM Fell Great Primer, a beautiful typeface first cut by Peter de Walpergen, acquired by John Fell in the late 1680s, and digitally revived by Igino Marini. In its original metal, IM Fell Great Primer consisted of romans, italics, and small capitals. Sr Marini has created OpenType versions of all three, and made them freely available. As such, I can use @font-face to specify the use of the small capitals variant.

An example:

Giambattista Bodoni: February 16, 1740 in Saluzzo – November 29, 1813 in Parma.

And, again, a comparison with the upper and lower cases:

A a a — M m m — X x x

Glorious. The cap height of the small capital x is precisely the same as the x-height of the lower case x – and this holds true even if you resize the text away from how I’ve set it here. The cap heights of the small capitals a and m are smaller than the overshoot of the lowercase a and m. The visual weight and proportions of the small capitals are all quite similar to those of the lower case letters, even while the forms of the small capitals remain true to the appearance of the upper case.

Just to be absolutely clear, let’s see all four methods lined up side by side – font-variant: small-caps on the left, followed by the Joe Clark method, the Nick Shinn method, and the true small capitals of @font-face:

a a a a — m m m m — x x x x

The @font-face method is far and away the best. Unfortunately, it is the best in appearance and the worst to use.

The biggest problem, as mentioned above, is that few typefaces have proper small capital variants. Of those that do, some include them within the regular roman file, which puts them off limits to web use. Unicode currently does not define a place for small capitals, which means that browser cannot access them.

For example, you’re likely to have the typeface Didot on your computer. The roman of that Didot includes small capitals, but as glyphs 264–389, located in the Unicode range called “Glyph Variants”, which you cannot access within a browser.

Assuming that you’re using a typeface that includes proper small capitals, and that those small capitals are included as their own distinct font file, then you must declare a @font-face rule that makes use of them. In theory, you would do have already defined your romans and italics something like this:

@font-face {
  font-family: "IM Fell Great Primer";
  src: local("IM FELL Great Primer");
}

@font-face {
  font-family: "IM Fell Great Primer";
  font-style: italic;
  src: local("IM FELL Great Primer Italic");
}

In other words, we’re defining a font family named IM Fell Great Primer, the roman of which can be found locally as “IM FELL Great Primer”, and the italic of which as “IM FELL Great Primer Italic.” The browser loads both of those fonts, and when a reference to font-family: IM Fell Great Primer is found it uses the former when font-style is normal, and the latter when italic.

According to the W3C standard, there should be no difference when defining a small capitals variant:

@font-face {
  font-family: "IM Fell Great Primer";
  font-variant: small-caps;
  src: local("IM FELL Great Primer SC");
}

In other words, the font referred to by this @font-face rule is the small capitals variant of the IM Fell Great Primer family, and can be found locally under the name “IM FELL Great Primer SC.” When the browser encounters a reference to font-family: IM Fell Great Primer with font-variant: small-caps, it should then go ahead and use the font referenced above. An example of such a reference:

p strong {
  font-variant: small-caps;
}

However, the browsers do not yet understand this. Firefox, for instance, only understands font-weight and font-style within @font-face rules. That means that you cannot rely on the browsers to automatically use the proper small capitals variant, even when you have explicitly told them the necessary details. Instead, you must define a redundant rule like this:

@font-face {
  font-family: "IM Fell Great Primer SC";
  src: local("IM FELL Great Primer SC");
}

And then use it like this:

p strong {
  font-family: "IM Fell Great Primer SC";
}

That way you have explicitly told your browser where to find the small capitals variant and when to use it. And, when forced in this fashion, the browsers do finally get things right.

5. Other details.

It’s a bit convoluted, all this, and I haven’t even touched on how to properly prepare your font files for browser use, or how to really make use of @font-face. To summarize, use the Font Squirrel.

To see the CSS for all the methods discussed above, take a look at my Hypsometric CSS project. If you have any questions or suggestions, do let me know.

January 15, 2010.
Ashland, Oregon.

V.

2010-01-07T11:00:00-08:00

Over at Hypsography my work is continuing apace, and that pace is increasing. I’m continuing my explorations of humane typography there. The site is now set in Sorts Mill Goudy, an excellent revival of Frederic Goudy’s incomparable Goudy Old Style.

If you view the site using a recent version of Firefox, you’ll even see that the f and i of field are joined into one ligature – as they should be. Firefox is currently the only browser that supports serious OpenType typographic enhancements. Where by serious I mean kerning and ligatures. Yes, 460 years have passed since Gutenberg began printing with moveable type, and we are just now returning to those basic capabilities.

At any rate, Sorts Mill Goudy is a beautifully rendered typeface. Barry Schwartz is its author, and he has made it available under both the Open Font License and the MIT License: OFL Sorts Mill Goudy and MIT Sorts Mill Goudy. You can also find it in the Typedia, along with another excellent, though less completely realized, Goudy revival by Mr Schwartz: Goudy Bookletter 1911.

I used the Font Squirrel’s @font-face generator to prepare the files for Hypsography, and I highly recommend it. To make the process even simpler, the Font Squirrel already has OFL Sorts Mill Goudy in its archive, along with a pre-generated @font-face kit. Or, if you prefer, both Kernest and Typekit also include Mr Schwartz’s Goudy revival.

From the information available on the project site, Sorts Mill Goudy appears to be a work in progress. Nonetheless, it seems quite ready for use right now. Using Tim Brown’s web font specimen, I’ve put up a demonstration page for Sorts Mill Goudy on Hypsography, for your further inspection.

To return to my initial point: Hypsography has a new look, a new section for news and other ephemera, and a newly added tetraptych. Enjoy.

January 7, 2010.
Ashland, Oregon.

The Hypsometry Blog.

XIV.

XIII.

XII.

XI.

Bonsai.

Middleman.

Nanoc.

Staticmatic.

Webby.

Webgen.

Not quite a conclusion.

A historical aside.

X.

IX.

VIII.

VII.

VI.

1. Setting the font-variant property to small-caps.

2. The Joe Clark method.

3. The Nick Shinn method.

4. Using @font-face.

5. Other details.

V.

1. Setting the `font-variant` property to `small-caps`.

4. Using `@font-face`.