Syntax Highlight Everything Kenneth Ormandy Designer @kennethormandy Front-Trends May 19, 2016 at Space Club, Warsaw, Poland

/** * Fetch all the file paths for a directory. * returns and array of all the relative paths. */ exports.ls = function(dir, callback) { walk(dir, function(err, results){ var files = [] results.map(function(file){ files.push(path.relative(dir, file)) }) callback(null, files) }) }

/** * Fetch all the file paths for a directory. * returns and array of all the relative paths. */ exports.ls = function(dir, callback) { walk(dir, function(err, results){ var files = [] results.map(function(file){ files.push(path.relative(dir, file)) }) callback(null, files) }) }

Reading code is reading

Syntax highlighting is designed

Typographic conventions

A visual hierarchy

Similarity through colour

Similarity

If it’s the same, make it the same. If it’s different, make it different. —All my graphic design instructors, September 2010–present

  • This qualifies as a talk on testing now, right?

Continuity & Symmetry

Familiarity

It is the readers’ familiarity with [type]faces that accounts for their legibility. …readers read best what they read most. —Zuzana Licko —While you’re reading, p. 43

Amy Allcock, Gutenberg Bible. Photograph. CC by 2.0.

  • Yes, feel free to take that idea and build a text editor plugin.

  • I’m sure you’ll open source it before my talk is even over.

  • Just…keep paying attention to the typography, okay?

Similarity through size?

Highlighting relationships

Berners-Lee, Tim. (1990).No title [Screenshot]. Retrieved from http://www.w3.org/ People/Berners-Lee/ WorldWideWeb.html

Ratdolt, Erhard. No title [Lithographed reproduction].

The End of Ideas

Reading was hard work — so hard, indeed, that one would usually read out loud —Marcin Wichary October 2014, First in, first out: The pilcrow’s strange typographic history

Provenance Online Project. Leaf a6r of an incunable… CC by 2.0.

Thanks to Frutiger it is now common practice to produce a dozen or more styles when working on a new type family. —Peter Biľak April 2012, Designing type systems

Typotheque. Greta Sans type system. 2012.

Advanced typographic features

OpenType features

kern Kerning

Kerning pairs

In CSS…

Kerning isn’t the goal

Implementation vs technique

  • Spacing establishes spacing

  • Spacing establishes spacing
  • Kerning improves spacing

  • Spacing establishes spacing
  • Kerning improves spacing
  • Ligatures improve spacing

liga Ligatures

infinite Hudson, John. (2006–2012). Brill Bold [Typeface].

infinite Hudson, John. (2006–2012). Brill Bold [Typeface].

body {
  font-variant-ligatures: common-ligatures;
}


body {
  font-variant-ligatures: common-ligatures;
}


/* The best-case scenario CSS… we’ll come back to this. */

body {
  font-variant-ligatures: common-ligatures;
}

dlig Discretionary Ligatures

Prince, Joe. (2006–2012). Klinic Slab Bold [Typeface]. Lost Type Co-op.

Prince, Joe. (2006–2012). Klinic Slab Bold [Typeface]. Lost Type Co-op.

h1 {
  font-variant-ligatures: common-ligatures;
}


h1 {
  font-variant-ligatures: common-ligatures;
}

Travis Gertz, Louder Than Ten, 2015. louderthanten.com.

calt Contextual Alternates

Edmondson, James T. (2012). Lavanderia [Typeface]. Lost Type Co-op.

Edmondson, James T. (2012). Lavanderia [Typeface]. Lost Type Co-op.

Nallaperumal, Shiva. (2014). Enemy [Typeface]. Lost Type Co-op.

h1 { font-variant-ligatures: contextual; }

aalt, calt, etc. Language-specific Considerations

English Dutch Underware. (2014). Typesetting the Dutch IJ.

Gandhi, Kimya. (2016). Design of a handwritten Devanagari typeface.

salt Stylistic Alternates

Edmondson, James T. (2012). Lavanderia [Typeface]. Lost Type Co-op.

Edmondson, James T. (2012). Lavanderia [Typeface]. Lost Type Co-op.

Titling Alts. Stylistic Alts. Contextual Alts. Stylistic Alts. Swashes Edmondson, James T. (2012). Lavanderia [Typeface]. Lost Type Co-op.

…provide simpler forms (no loops on top) for the lowercase b, h, f, l, and k. Simpler forms can work better in certain situations. —James T. Edmondson —Introducing Lavanderia

h1 { font-variant-ligatures: contextual; }

h1 { font-variant-ligatures: contextual; margin-bottom: 1em; }

h1 { font-feature-settings: “calt”; margin: 0 0 1em 0; }

h1 { font-feature-settings: “calt”, “salt”; margin: 0 0 1em 0; }

case Case-sensitive Forms

@kennethormandy @kennethormandy Homola, Wolfgang. (2011– 2014). Soleil [Typeface].

@kennethormandy @KENNETHORMANDY Homola, Wolfgang. (2011– 2014). Soleil [Typeface].

@kennethormandy @KENNETHORMANDY Homola, Wolfgang. (2011– 2014). Soleil [Typeface].

h1 { font-feature-settings: “case”; text-transform: uppercase; }

smcp, c2sc Small Capitals

Front Trends HQ Hudson, J. (2006–2012). Brill [Typeface].

Front Trends HQ Hudson, J. (2006–2012). Brill [Typeface].

Front Trends HQ Hudson, J. (2006–2012). Brill [Typeface].

Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us. Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us.

Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us. Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us.

Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us. Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us.

Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us. Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us.

No is better than faux

ront Trends HQ ront Trends HQ ront Trends HQ Capitals Small Capitals Faux Small Capitals Hudson, J. (2006–2012). Brill Bold [Typeface].

ront Trends HQ ront Trends HQ ront Trends HQ HQ Capitals Small Capitals Faux Small Capitals Hudson, J. (2006–2012). Brill Bold [Typeface].

Butterick, M. (2010–2014). Butterick’s Practical Typography.

/* Don’t do this! Creates faux Small Caps. */ .caps { font-variant: small-caps; }

/* Real Small Caps. */ .caps { font-variant-caps: small-caps; }

Surge.sh, 2015. surge.sh.

Unlimited publishing Custom domain Custom SSL Force HTTP to HTTPS

<ul> <li>Unlimited publishing</li> <li>Custom domain</li> <li>Custom <span class=”caps”>SSL</span></li> <li>Force <span class=”caps”>HTTP</span> to <span class=”caps”>HTTPS</span></li> </ul>

“Figures.”

Numbers

  • No, it wouldn’t.

onum, lnum Old-Style & Lining Numbers

MAY 19, 2016 Edmondson, J. Edmondsans [Typeface]. Lost Type Co-op.

May 19, 2016 Hudson, John. (2006–2012). Brill Bold [Typeface].

MAY 19, 2016 May 19, 2016 Carter, Matthew. Georgia & Verdana [Typeface].

pnum, tnum Proportional & Tabular Numbers

231,000 229,000 216,000 200,000 199,000

231,000 229,000 216,000 200,000 199,000

231,000 229,000 216,000 200,000 199,000 231,000 229,000 216,000 200,000 199,000

231,000 229,000 216,000 200,000 199,000 231,000 229,000 216,000 200,000 199,000

table { font-variant-numeric: tabular-nums; }

table { font-variant-numeric: tabular-nums; }

  1. Choose the typeface

  1. Choose the typeface 2. Load the web font

  1. Choose the typeface 2. Load the web font 3. Enable the features

  1. Choose the typeface

Typefaces are different

11:20 Demo Reel & Tiny JavaScript 11:55 Syntax Highlight Everything 12:30 Lunch break 13:55 Lightning talks 14:25 Coffee break 14:40 Computer Assisted Arts and Crafts

11:20 Demo Reel & Tiny JavaScript 11:55 Syntax Highlight Everything 12:30 Lunch break 13:55 Lightning talks 14:25 Coffee break 14:40 Computer Assisted Arts and Crafts

11:20 Demo Reel & “ny JavaScript 11:55 Syntax Highlight Everything 12:30 Lunch break 13:55 Lightning talks 14:25 Coffee break 14:40 Computer Assisted Arts and Crafts

Developers & Typographers

  1. Choose the typeface 2. Load the web font

  1. Choose the typeface 2. Load the web font 3. Enable the features

table { font-variant-numeric: tabular-nums; }

table { font-variant-numeric: tabular-nums; }

table { font-feature-settings: “tnum”; }

table { font-feature-settings: “tnum”; }

table { @supports not (font-variant-numeric: tabular-nums) { font-feature-settings: “tnum”; } font-variant-numeric: tabular-nums; }

table { @supports not (font-variant-numeric: tabular-nums) { font-feature-settings: “tnum”; } font-variant-numeric: tabular-nums; }

table { @supports not (font-variant-numeric: tabular-nums) { font-feature-settings: “tnum”; } font-variant-numeric: tabular-nums; }

  • Uh…I’m not going to do all that.

utility-opentype.kennethormandy.com

$ npm install —save utility-opentype

<table class=”tnum”> <thead> <tr> <th>Time</th> <th>Speaker</th> </tr> </thead> <tbody> <tr> <td>2:40<abbr class=”smcp”>pm</abbr></td> <td>Mariko Kosaka</td> </tr> <tr>

Syntax highlight everything.

Thanks Kenneth Ormandy Designer @kennethormandy Front-Trends May 19, 2016 at Space Club, Warsaw, Poland

Works cited The WorldWideWeb browser. Sir Tim Berners-Lee. N.d. Basscss design principles. Brent Jackson. 2015. Echo font family, OpenType font features. Typotheque. 2015. Designing type systems. Peter Biľak. 2012. Design Of A Handwritten Devanagari Typeface. Kimya Gandhi. 2016. While you’re reading. Gerard Unger. 2007. Butterick’s practical typography. Matthew Butterick. 2010–2016. OpenType features in web browsers. Gustavo Ferreira. 2012. Flipping tables: Displaying data on small screens. Stephanie Hobson. 2015. OpenType specification. Microsoft, et al. 1997–2015. Font-Variant css. Mozilla, et al. 2014–2016. State of web type. Bram Stein. 2014–2015. First in, first out: The pilcrow’s strange typographic history. Marcin Wichary. 2014.