Warning: This slide deck depends on having locally installed Adobe Caslon Pro.
Some examples will not work without it. If the text “Adobe Caslon Pro”
is no different than the rest of this paragraph, then you don’t have it.
Lecture 18
Typography
Typography can enhance or hinder communication
The design of a typeface has meaning, it's not just decoration.
Every typeface has a unique personality and purpose.
It enhances communication when used for things
where its design is in tune with the message,
and can fight against the message when used improperly,
looking funny at best, and disturbing at worst (often both!).
There are different categories of typefaces, and each evoke different adjectives and emotions.
You can read on font psychology to learn more about this.
Often, the importance of using appropriate fonts is understood better
when one sees examples of it being badly violated.
Comic Sans is probably the world's most hated typeface,
and improper usage on a massive scale is one of the main reasons.
Comic Sans was intended to look playful and casual
(in fact it was designed to be used in the comic-like talk bubbles of a program called Microsoft Bob),
so using it on serious, formal content, especially about delicate matters, is highly inappropriate.
In typography, a [serif](https://en.wikipedia.org/wiki/Serif) is a small line or stroke regularly attached to the end of a larger stroke
in a letter or symbol within a particular font or family of fonts.
Serif typefaces
Older. More formal.
Sans serif typefaces
1920+. More modern feel.
Therefore, “serif” typefaces are typefaces with serifs,
and “sans-serif” typefaces, are typefaces without serifs.
Web Open Font Format file
Compressed font file for the Web. Prefer when available. WOFF 2 provides better compression.
*.otf, *.ttf
Font files.*.otf is OpenType, *.ttf is TrueType, a subset of OpenType.
*.otc, *.ttc
OpenType/TrueType Collection: multiple faces in one file.
Currently not supported in @font-face but there are plans for this.
*.eot
Embedded OpenType file
Older, IE-specific. Historically significant, but serves no purpose today.
What is in a font file?
Glyph.n.
The visual representation of character(s)
Character
Smallest component of written language that has semantic value
U+0065
e
U+0066
f
U+0069
i
U+00E9
é
U+00B4
´
Glyph
Visual representation of character(s)
fi
é
A character is the symbol representing a letter.
A glyph is the specific shape, design, or representation of a character.
Characters are basically codepoints.
Text to speech has no glyphs, but it does have characters.
The first
& final efficient flash
select affliction
font-variant-ligatures: ;
1234567890ABC 1234567890abj
font-variant-numeric: ;
1/2 3/4 5/8 13/27 86/483
font-variant-numeric: ;
House 1
$112,113.56
House 2
$89,546.87
House 3
$286,111.10
font-variant-numeric: ;
1st, 2nd, 3rd, 4th
font-variant-numeric: ;
1er, 2e, 3e, 4e
font-variant-numeric: ;
These features are language-aware, as long as you declare the language properly, via the `lang` attribute.
C12H22O11 + HCl → CH3COH + ClO2 + H2O
font-feature-settings: ;
There are far more OpenType features than nicely readable CSS properties about them.
As an escape hatch, there is also a low-level `font-feature-settings` property,
that allows you to access invidivual OpenType features,
through their 4-letter identifier.
👨👨👧
character(s), glyph(s)
Emoji “ligatures”
👨👨👧 = 👨+ + 👨+ + 👧
👨👨👧
font-variant-ligatures: ;
Character & Line spacing
Character spacing
Kerning: Spacing between pairs of letters (kern OT feature)
Tracking: Overall spacing adjustment (+/-)
Leading: Spacing between (base)lines of text
[Kerning](https://en.wikipedia.org/wiki/Kerning) is the process of adjusting the spacing between individual character pairs, to achieve a visually pleasing result.
We may think that the characters in text we read are equidistant,
but in reality type designers have poured blood, sweat, and tears to make them look that way
by manually adjusting spacing between each pair of characters to make them look equidistant to the human eye.
JAVA Table Water
font-kerning: ;
letter-spacing:0em;
Note that kerning is not the same as letter-spacing, which applies to all characters indistriminately.
keming. (kĕmˈ-ĭng) n. The result of
improper kerning.
Font Metrics
Adequate line spacing is necessary to make word shapes recognizable in a vertical dimension, but too much line spacing makes it harder for the eye to track back to the start of the next line.
Line spacing is also called leading (pronounced like “ledding”). The leading is the distance between baselines of adjacent lines. Both font size and leading are important.
line-height:1;
Leading & Accessibility
People with some cognitive disabilities struggle to track text where lines are close together.
“For people with some reading or vision disabilities, long lines of text can become a significant barrier. They have trouble keeping their place and following the flow of text.
Having a narrow block of text makes it easier for them to continue on to the next line in a block.
Lines should not exceed 80 characters or glyphs (40 if CJK), where glyphs are the element of writing in the writing system for the text.”
— Web Content Accessibility Guidelines
max-width:40em;
Justified alignment can really improve a layout, as it facilitates following the design principle of alignment on both sides.
However, it can also break a layout when done sloppily and without care.
Without hyphenation, there are often uneven spaces between words creating uncomfortable trapped space.
The narrower the line width, the worse the problem.
If a language is set in the HTML, CSS offers basic hyphenation via the hyphens property.
Avoid justification on very narrow line widths; no amount of hyphenation will save you.
text-align:left; max-width:40ch; hyphens:none;
Further typographic improvements
Ben Bitdiddle
Education
MIT, Cambridge, MA (2013-2016)
Publications
"7x8: A harder - and subtler - problem than previously recognized." Journal of Resumé Padding, 2014
Ben Bitdiddle
Education
MIT, Cambridge, MA (2013–2016)
Publications
“7×8: A harder — and subtler — problem than previously recognized.” Journal of Resumé Padding, 2014
Punctuation
Use proper quotes: “”, not ""
Use proper dashes:
hyphens (-) for compound words like "well-being"
en dashes (–) for ranges
em dashes (—) to create a strong break in the structure of a sentence
Variable fonts
When digital fonts begun, every character was a bitmap, and thus every size had to be drawn separately.
If you enlarged a character instead of using the larger design, you'd see pixels.
So font designers had to do a ton of work, and if you needed a size that was not pre-drawn, you were out of luck.
Vector fonts were a revolution: Designers drew one graphic, and the character looked super high quality in all sizes.
Variable fonts are a similar revolution of turning something that was previously discrete and drawn and stored separately
into a single, flexible design.
37
files
Regular web font
37 files, about ~45KB each (1.5 MB total), discrete design space
Variable font
1 file, interpolate along design axes, ~90KB/axis (180 KB total), continuous design space
Often, typefaces have specially designed glyphs for small caps, superscripts, and subscripts.
These are not just smaller versions of these glyphs (we can do that by just adjusting font size),
but designed to be used together with larger glyphs and look harmonious, as they have thicker strokes.
When that is not the case, and small caps, superscripts, and subscripts are simulated by adjusting font size,
the results look sloppy, as they all have uneven stroke widths due to the shrinking and growing.
Variable weight fonts can help us with that too.
Custom axes
font-family: '-OC Format Shards', sans-serif;
font-variation-settings: 'SHTR' ;
/* Decovar: An experimental variable font
by David Berlow
with multiple custom axes */
@font-face {
font-family: "Decovar";
src: url(fonts/decovar.ttf);
}
p {
font-family: Decovar;
font-variation-settings:
"TRMC" [TRMC], /* Rounded slab */
"TRMB" [TRMB], /* Flared */
"SKLA" [SKLA], /* Inline Skeleton */
"TRMK" [TRMK]; /* Inline Terminal */
}
