Most of what willshake has to offer is text. What we add to that—structure and guidance—also comes in the form of words. We can use typefaces in a significant way to communicate a difference between these different types of text. Here we describe how we use font “families” to distinguish essentially “architectural” lettering from printed work.

The concept of font families has its roots in the art of typography, which in turn took its first cues from calligraphy. What we now call “serif” fonts (those whose characters feature “finishing strokes, flared or tapering ends"¹), trace their origin to the earliest typefaces, which naturally maintained continuity with the traditional style of hand-writing. Only much later—and originating in the realm of architecture, not print—could letterforms be abstracted from their manual origins, leading to the more geometric and minimalist typefaces that we now call sans serif. “These ‘sanserif’ letters,” writes James Mosley,

appeared in the drawings of English architects like John Soane, they began to be used by some sculptors too, and then they were taken up by signwriters.

We will use “sans” type according with this history, using it for our signs and messages, while “serif” fonts will be used for the work of other authors, whether in extracts or long form.

In the “old days” of CSS level 1, the web still didn’t have much to offer in the way of typefaces. Browsers could use whatever fonts were available on the system, and authors could select from these by name or family; but other fonts could not be provided for use by the site. It was not until CSS Level 2 introduced the @font-face rule, along with a few standard font formats, that authors had a way to provide typefaces themselves along with their content³. (Although @font-face became an official recommendation in 1998, it was at least ten years before the web fonts were widely adopted.)

We have to ship the fonts:

: foreach $(ROOT)/assets/fonts/* \
|> !link_from \
|> $(SITE_STYLE)/fonts/%b

This symlinks the files to the site folder in the expected place. A symlink is sufficient in this case because these files are not going to change.

$loadAllWeights = false

font-weight(w)
    font-weight: w
    if w == 400
	font-weight: normal
    if w == 700
	font-weight: bold

font(family, file, weight = 400, style = normal)
    $base = "fonts/" + file

    @font-face
	font-family family
	src url($base + '.eot')
	src: url($base + '.eot?#iefix') format('embedded-opentype'),
	     url($base + '.svg#' + file) format('svg'),
	     url($base + '.woff') format('woff'),
	     url($base + '.ttf') format('truetype');
	font-weight weight
	font-style style

    // Part of the attempt to deal with bad web font rendering on Windows Chrome
    @media screen and (-webkit-min-device-pixel-ratio:0)
	@font-face
	    font-family family
	    src url($base + '.svg#' + file) format('svg')
	    font-weight weight
	    font-style style

font('IM Fell DW Pica', 'IMFellDWPicaBasic-Regular')
font('IM Fell DW Pica', 'IMFellDWPicaBasic-Italic', style: italic)

font('TeX Gyre Schola', 'TexGyreSchola-Regular')
font('TeX Gyre Schola', 'TexGyreSchola-Bold', bold)
font('TeX Gyre Schola', 'TexGyreSchola-Italic', style: italic)
font('TeX Gyre Schola', 'TexGyreSchola-BoldItalic', bold, italic)

lato(variant, weight)
    $regular = (variant == 'Bold') ? '' : '-Regular'

    $prefix = 'LatoLatin' + (variant == '' ? '' : '-') + variant

    font('Lato', $prefix + $regular, weight: weight)
    font('Lato', $prefix + '-Italic', weight: weight, style: italic)

lato('Hair' , 100) if $loadAllWeights
// Right... so why not specify 300 for light instead of 200?  I think 300 is
// what you mean.  Fira 200 is also light, and that's in fact what you get on FF
// Mobile if you don't load web fonts.
// 
// While you're at it, make a light-weight construct with Stylus so you can
// change this in one place.
lato('Light', 200)              // "Thin" is the Lato 200, but it's too thin
lato('Light', 300) if $loadAllWeights
lato(''     , 400)
lato('Med'  , 500) if $loadAllWeights
lato('SemBd', 600) if $loadAllWeights
lato('Bold' , 700)
lato('ExtBd', 800) if $loadAllWeights
lato('Black', 900) if $loadAllWeights

This is written to its own stylesheet bundle (font-face-rules), allowing it to be used independently by SVG graphics wishing to use these fonts, simply by referencing it.

This is needed for the program graph, as long as I’m not bundling the stylesheets. See also document-graph-rules.css

: $(CSS)/font-face-rules.css \
|> !copy_to |> $(SITE_STYLE)/%b

Last I checked, the fonts were by far the largest share of a cold start (byte-wise). I’ve already subsetted Lato, but somewhat cursorily.

http://www.sitepoint.com/improving-font-performance-subsetting-local-storage/

I’m pretty attached to Lato. But the fonts are currently by far the largest part of a cold download. And mobile devices (especially lower-resolution (i.e. non-retina)) tend to ship with an optimized font set built in.