A presentation at CSSConf.Asia 2016 in in Singapore by Kenneth Ormandy
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
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.
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
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
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; }
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
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; }
utility-opentype.kennethormandy.com
$ npm install —save utility-opentype
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.
A developer employs syntax highlighting to visually differentiate portions of her code; for centuries, designers, printers, and scribes have done the same for readers. Today, advanced features built into fonts can subtly signify types of content, increase a text’s authority, and are actually necessary for many languages.
This talk introduces designers and developers to highlighting syntaxes beyond code. Learn how to access these advanced typographic features using CSS and JavaScript, and—more importantly—where to apply them.
for free. You
can too.