History, print & paper

Guttenberg Bible

Nicolas Jenson, circa 1475

Bryan Innes

Seany Mac

Biberfan

(Our) digital history

Fonts as bitmaps

History

Adobe: PostScript — mid 80s
Apple: TrueType — late 80s
MicroSoft adopted TrueType — 1991 (Windows 3.1)
- Arial (Alternative to Helvetica)
- Times New Roman
- Courier
- etc.
OpenType by Adobe and MicroSoft — 1996
ClearType by MicroSoft — 2000
With Mac OSx, Adobe ignores instructions, rasterises fonts solely on their outlines

Not so fast forward

Netscape Navigator in 1994 — font embedding solution

<head>
	<link rel="fontdef" src="./path/to/portable_font_resources.pfr">
</head>
<body>
	<font face="portable font resources">huray!</font>
</body>

Also possible in Internet Explorer via plugin.

Not so fast forward

Core Fonts for the Web (Project begun by MS in 1996 to make a standard pack of fonts for the internet):

Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Web-Safe fonts!

Not so fast forward

@font-face — font downloading introduced in CSS2
Internet Explorer added support in version 4.0 — 1997

@font-face {
  font-family: 'my-awesome-font';
  src: url('my-awesome-font.pft') format(truedoc),
       url('my-awesome-font.ttf') format(truetype);
}

p {
  font-family: 'my-awesome-font';
}

Not so fast forward

@font-face removed from the spec in CSS2.1

:((

Not so fast forward, aka now();

@font-face {
  font-family: 'MyFontFamily';
  src: local('MyFontFamily'),
       url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
       url('myfont-webfont.woff') format('woff'), 
       url('myfont-webfont.ttf')  format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
}

The New Bulletproof @Font-Face Syntax:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

SMACK! MEGA MESS!

In the meantime ...

Image Replacement

PROS

It looks good
It gives control over other elements besides type

Cons

Difficult to update
Inaccessible in some situations
Potentially it differs from the source code

In the meantime ...

sIFR — scalable Inman Flash Replacement

PROS

Dynamic replacement
Degrades gracefully (good fallback solution)

Cons

Requires JavaScript and Flash
(Too) long load times
Text isn't scalable (Ctrl + "+/-")

In the meantime ...

Cufón

PROS

Easy to implement
Font displayed using Canvas (modern browsers), and VML in IE.
Does not require Flash

Cons

Requires JavaScript
Jumps through a couple of hoops to render fonts as vector graphics in your browse
Text isn't selectable

@font-face

@font-face reintroduced in CSS3

PROS

Endless possibilities
Better style emphasis for companies that use typography as a major part of their branding
Real text — dynamic, selectable and printable
Simple implementation

CONS

Endless possibilities
Piracy issues, protection is needed for font foundries
Flash of Unstyled Text (FOUT)
Rendering issues (due to font-aliasing techniques)

BINGO!

@font-face & Licensing

EULA — End User License Agreements

Law > Font foundries > Operating Systems > Browsers > Developers > Users
Complicated and difficult
Some foundries allows for embedding, others don't
The file referenced using @font-face is easily found on the server

Now what?

Commercial Font Embeding Services

TypeKit — https://typekit.com
Typotheque — http://www.typotheque.com/
Kernest — http://kernest.com/
Fontdeck — http://fontdeck.com/
Fontspring — http://www.fontspring.com/

Free Font Embeding Services

Font Squirrel — http://www.fontsquirrel.com/
Google Web Fonts — http://www.google.com/webfonts
The League of Moveable Type — http://www.theleagueofmoveabletype.com/
Fontspring — http://www.fontspring.com/

What about my own fonts?

Font (Converting) Tools

FontForge — http://fontforge.sourceforge.net/
Font Squirrel — http://www.fontsquirrel.com/

Implementation

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
		 url('myfont-webfont.woff') format('woff'), 
		 url('myfont-webfont.ttf')  format('truetype'),
		 url('myfont-webfont.svg#svgFontName') format('svg');
	}

The New Bulletproof @Font-Face Syntax:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Implementation

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot') format('embedded-opentype'), 
		 url('myfont-webfont.woff') format('woff'), 
		 url('myfont-webfont.ttf')  format('truetype'),
		 url('myfont-webfont.svg#svgFontName') format('svg');
	}

Downloaded by:: Internet Explorer

Implementation

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot') format('embedded-opentype'), 
		 url('myfont-webfont.woff') format('woff'), 
		 url('myfont-webfont.ttf')  format('truetype'),
		 url('myfont-webfont.svg#svgFontName') format('svg');
	}

Downloaded by:

Chrome
Firefox
Opera

Supported by:

Internet Explorer

Implementation

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot') format('embedded-opentype'), 
		 url('myfont-webfont.woff') format('woff'), 
		 url('myfont-webfont.ttf')  format('truetype'),
		 url('myfont-webfont.svg#svgFontName') format('svg');
	}

Downloaded by:

Android
iOS
Safari

Supported by:

Chrome
Firefox
Opera
Internet Explorer

Implementation

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot') format('embedded-opentype'), 
		 url('myfont-webfont.woff') format('woff'), 
		 url('myfont-webfont.ttf')  format('truetype'),
		 url('myfont-webfont.svg#svgFontName') format('svg');
	}

Downloaded by:

iOS < 4.2

Supported by:

Chrome
Safari
Opera

Implementation

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot') format('embedded-opentype'), 
		 url('myfont-webfont.woff') format('woff'), 
		 url('myfont-webfont.ttf')  format('truetype'),
		 url('myfont-webfont.svg#svgFontName') format('svg');
	}

Downloaded by:

Internet Explorer

SMACK! NOT GOOD!

Implementation


@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot#iefix') format('embedded-opentype'), 
		 url('myfont-webfont.woff') format('woff'), 
		 url('myfont-webfont.ttf')  format('truetype'),
		 url('myfont-webfont.svg#svgFontName') format('svg');
	}

Internet Explorer fix

Rendering

Rendering factors

Type design philosophy
Font file and outline format
Hinting
Kerning
Operating systems
Web browsers
Font smoothing preferences
Antialiasing
Subpixel rendering

Rendering

Google Chrome

Chrome renders the rest of the page, but until the web font has loaded, it displays a blank space in place of the text that uses the font.

Rendering

Mozilla Firefox

Firefox first displays the text in the default font, and then re-renders text in the web font once it has loaded. (This behavior is known as a "flash of unstyled text.")

Rendering

Apple Safari

Safari renders the rest of the page, but until the web font has loaded, it displays a blank space in place of the text that uses the font.

Rendering

Microsoft Internet Explorer

Internet Explorer renders the rest of the page, but until the web font has loaded, it displays a blank space in place of the text that uses the font.

Note: For best display in IE, make the stylesheet <link> tag the first element in the HTML <head> section. In IE, if the link is placed after <script> tags, the entire page will block and not display anything until the web font is loaded.

To SUM it up:

Blank space in place of the styled text while the web font is loading:

Safari
Chrome
Internet Explorer

To SUM it up:

Default font, which switches over when the web font has loaded. Result: so-called Flash of Unstyled Text (aka FOUT).

Firefox
Opera

Optimisation

JavaScript and CSS techniques to minimize FOUT (More on that in a sec!)
Do not place SCRIPT tags above @font-face declaration (IE will not display page content until the font file is loaded)
Remove the un-common glymphs (if possible — EULA)
Unicode-ranges
Remove hinting (font recommended for smaller sizes)
Remove kerning
gzip (up to 70% savings in filesize)
Caching! (common sense)
UPDATE — As from January 9th 2012, Google Web Fonts implements Monotype Imaging's MicroType Express compression format, which yields an approximate 15% savings in file size over using gzip alone

WebFont Loader

JavaScript library that gives you more control over font loading
- when fonts start to download ('loading')
- when fonts finish loading ('active')
- if fonts fail to load ('inactive')
It was co-developed by Google and Typekit
Requires some knowledge of JavaScript

WebFont Loader
http://code.google.com/apis/webfonts/docs/webfont_loader.html

WebFont Loader

Changing styles when fonts finish loading

.wf-loading p { // Show paragraphs in serif font until fonts have loaded.
	font-family: serif; //or
	visibility: hidden;
}
.wf-inactive p { // Show paragraphs in serif font if fonts have failed to load.
	font-family: serif;
}
.wf-active p { // Show paragraphs in Tangerine when the fonts have loaded.
	font-family: 'Tangerine', serif;
}
.wf-loading p   { font-family: serif; font-size: 16px; }
.wf-inactive h1 { font-family: serif; font-size: 16px; }
.wf-active h1   { font-family: 'Cantarell', serif; font-size: 16px; }

Note: If all requested fonts fail to load, wf-inactive is applied.

WebFont Loader

<html>
  <head>
    <script type="text/javascript">
	  WebFontConfig = {
	    google: { families: [ 'Tangerine', 'Cantarell' ] }
	  };
	  (function() {
	    var wf = document.createElement('script');
	    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
	      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	    wf.type = 'text/javascript';
	    wf.async = 'true';
	    var s = document.getElementsByTagName('script')[0];
	    s.parentNode.insertBefore(wf, s);
	  })();
    </script>
    ...

This code reproduces Firefox's default behavior in all other modern browsers.

WebFont Loader

<html>
  <head>
    <script type="text/javascript">
	  WebFontConfig = {
	    google: { families: [ 'Tangerine', 'Cantarell' ] }
	  };
	  (function() {
	    var wf = document.createElement('script');
	    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
	      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	    wf.type = 'text/javascript';
	    wf.async = 'true';
	    var s = document.getElementsByTagName('script')[0];
	    s.parentNode.insertBefore(wf, s);
	  })();
    </script>
    ...

This code reproduces Firefox's default behavior in all other modern browsers.

WebFont Loader

You can choose from specified providers:

google
typekit
ascender
monotype

In addition to options above, there is also a custom module that can load a stylesheet from any web-font provider:

WebFontConfig = {
   custom: { families: ['OneFont', 'AnotherFont'],
   urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
  'http://yetanotherwebfontprovider.com/stylesheet2.css' ] }
};
...

The FUTURE

Multiple Columns

Allowing long chunks of text to wrap to multiple columns. This technique is widely popular in editorial design of magazines and newspapers.

Multiple Columns

Code

element {
  (-prefix-)column-width: <length unit> | auto; // or
  (-prefix-)column-count: <integer> | auto;
  
  (-prefix-)column-gap: <length unit> | normal;
  
  (-prefix-)column-rule-color: <color>;
  (-prefix-)column-rule-style: <border-style>;
  (-prefix-)column-rule-width: <border-width>;
}

Multiple Columns

Code

h1 {
  /* Control how the content displays within each column. */
  break-before: always | auto | avoid | inherit;
  break-after:  always | auto | avoid | inherit;
  break-inside: always | auto | avoid | inherit;
}

Multiple Columns

Code

element {
  /* none: The element does not span multiple columns. */
  /* all: The element spans across all columns. */
  column-span: none | all;
  
  /* balance: Balance content equally between columns, if possible. */
  /* auto: Fills columns sequentially. */
  column-fill: auto | balance;
}

Multiple Columns

Source: W3C Editor’s Draft — CSS Multi-column Layout Module.

Multiple Columns

Source: Smashing Magazine — Six CSS Layout Features To Look Forward To.

Multiple Columns

Source: Smashing Magazine — Six CSS Layout Features To Look Forward To.

Multiple Columns

Supported by:

Firefox 2+
Chrome 4+
Safari 3.1+
Opera 11.1+
Internet Explorer 10+

Regions

The CSS regions module allows content to flow across multiple areas called regions. It provides an advanced content flow mechanism.

Threading content — Content that flows from one area to another.
Arbitrarily shaped containers — Text displayed in non-rectangular areas.
Region styling — Styling content depending on the area in which it flows.

Regions

Layout requiring sophisticated content flow:

Source: W3C Editor’s Draft — CSS Regions Module.

Regions

The following HTML code snippet shows the content to flow between the regions 1, 2, 3 and 4. Region A represents an image.

<article id="article">
  <h1>Introduction</h1>
  <p>This is an example ...</p>

  <h1>More Details</h1>
  <p>This illustrates ...</p>
  <p>Then, the example ...</p>
  <p>Finally, this ...</p>
</article>

Examples of HTML elements, used as regions.

<div id="region1"></div>
<div id="region2"></div>
<div id="region3"></div>
<div id="region4"></div>

Regions

Source: W3C Editor’s Draft — CSS Regions Module.

Regions

The following HTML code snippet shows the content to flow between the regions 1, 2, 3 and 4. Region A represents an image.

#article {
  (-prefix-)flow: foo;
  (-prefix-)flow-into: foo;
}

#region1, #region2, #region3, #region4 {
  content: (-prefix-)from-flow('foo');
  (-prefix-)flow-from: foo;
}

Regions

Source: Adobe: CSS3 regions: Rich page layout with HTML and CSS3.

Regions

Supported by:

Chrome 15+
Safari 6+
Internet Explorer 10+

Exclusions

They define arbitrary areas around which inline content can flow.
Can be positioned with any CSS positioning schemes.
Geometric shapes used for wrapping inline flow content outside or inside an element.
Allows sophisticated layouts — content flow into and/or around circles or other complex shapes.

Exclusions

Exclusions

An element becomes an "exclusion element" when wrap-flow is set to a value that is not auto. The following values are avaliable:

#exclusion {
  wrap-flow: auto | both | start | end | maximum | clear;
}

Exclusions

Other avaliable properties:

#exclusion {
  shape-image-threshold: <alphavalue>;
  shape-inside: outside-shape | auto | <shape> | <uri>;
  shape-outside: auto | <shape> | <uri>;
  wrap: <wrap-flow> || <wrap-margin> [ / <wrap-padding>];
  wrap-flow: auto | both | start | end | maximum | clear;
  wrap-margin: <length>;
  wrap-padding: <length>;
  wrap-through: wrap | none;
}

Exclusions

The following CSS code snipplet shows the use of exclusions.

#exclusion {
  position: absolute;
  background: lightblue;
  wrap-flow: auto | both | start | end | maximum | clear;
}

The example of HTML to form the following examples.

<article>
    <section id="exclusion">Donec metus messa, mollis...</section>
    Lorem ipsum dolor sit amet... 
</article>

Exclusions

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

Source: Smashing Magazine — Six CSS Layout Features To Look Forward To.

Exclusions

Supported by:

Internet Explorer 10+

Grid

Websites have evolved from simple documents into complex, interactive applications
Current tools for layout not necessarily well suited for application layout:
- Floats
- Positioning
- display: inline-block
- Negative margins
Now the grid can be used to achieve many different layouts
They work in a rather similar manner than tables.

Grid

Define your grid with rows and columns
Do that by setting the element's display value to grid
Avaliable values: length values, auto or fr, which is shorthand for fraction

Grid

body {
  display: grid;
  grid-columns: 150px 1fr;
  grid-rows: 50px 1fr 50px
}

The first column is 150px wide beginning from the starting edge.
The second column uses fractional (fr) sizing, which is a function of the remaining space in the Grid.
Three rows, where the top and below row is 50px high
The middle row expands automatically to fit its content.

Grid

Grid

Once the grid is created, we can position content (HTML5 sectioning elements) on it.

#header { grid-column: 1; grid-row: 1; }
#nav { grid-column: 1; grid-row: 3; }
#article { grid-column: 2; grid-row: 1; grid-row-span: 2; }
#aside { grid-column: 1; grid-row: 2; grid-row-align: start; }
#footer { grid-column: 2; grid-row: 2; grid-column-align: center; }

Grid

Supported by:

Internet Explorer 10+

This talk is NOT about:

This talk IS about:

Why even bother?

(Our) digital history

History

Not so fast forward

Not so fast forward

Not so fast forward

Not so fast forward

Not so fast forward, aka now();

In the meantime ...

Image Replacement

PROS

Cons

In the meantime ...

PROS

Cons

In the meantime ...

PROS

Cons

@font-face reintroduced in CSS3

PROS

CONS

@font-face & Licensing

Now what?

Commercial Font Embeding Services

Free Font Embeding Services

What about my own fonts?

Font (Converting) Tools

Implementation

Implementation

Implementation

Implementation

Implementation

Implementation

Implementation

Rendering

Rendering factors

Rendering

Google Chrome

Rendering

Mozilla Firefox

Rendering

Apple Safari

Rendering

Microsoft Internet Explorer

To SUM it up:

To SUM it up:

Optimisation

WebFont Loader

WebFont Loader

WebFont Loader

WebFont Loader

WebFont Loader

text-shadow

PROS

Cons

Implementation

Implementation — multiple shadows

text-shadow

Multiple Columns

Multiple Columns

Code

Multiple Columns

Code

Multiple Columns

Code

Multiple Columns

Multiple Columns

Multiple Columns

Multiple Columns

Regions

Regions

Regions

Regions

Regions

Regions

Regions

Exclusions

Exclusions