Syntax Highlight Everything

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) }) }

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].

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.

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.

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.

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].

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

smcp, c2sc Small Capitals

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.

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

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

Choose the typeface

Choose the typeface 2. Load the web font

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

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 & “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

Choose the typeface 2. Load the web font

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

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

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

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.

Syntax Highlight Everything

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75