Professional Web Typography by Donny Truong

Professional
Web Typography
SECOND EDITION
Donny Truong
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
3. Selecting Body Text
4. Setting Type in the Browser
5. Choosing Headings
6. Picking Type for User Interface
7. Discerning Typographic Details
8. Discovering OpenType Features
9. Exploring Variable Fonts
10. Practicing Typography
Conclusion
Download
Professional Web Typography. Copyright © 2015, 2019 by Donny Truong. All rights reserved.
PROFESSIONAL WEB TYPOGRAPHY
SECOND EDITION
Introduction
The first edition of this book published in May 2015. I wrote it as an independent study for one of my
graduate courses in graphic design. I also wrote it for myself because I could not find a book that
combined theory and practicality on web typography at the time.
By relying on my own experience as a web designer for almost two decades and keeping the technical
aspects as simple as possible, my goal was to prove that typesetting on the web is fun and rewarding—not
intimidating.
Four years later, this book desperately needed a revisit as webfonts continue to grow and variable fonts
begin to emerge. For the second edition, I removed outdated information, reorganized the content, and
expanded on new materials. I redesigned the book website, added more illustrations, and reworked all the
demos.
I hope you will follow along and enjoy exploring this craft. Typography remains a craft that is honed,
nurtured, and acquired over time, with patience and practice.
History of Web Typography »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
History of Web Typography
Since the invention of the Internet, text plays a major role on the web. For thirty years, the web has
revolutionized our daily communications, interactions, and business transactions, but the true
transformation of typography to the web only took off in the last few years. For the first twenty years, the
web had gone through many changes, such as adopting web standards, using CSS for layouts, and
processing dynamic data. Even though the web embraced text from the beginning, they were not well
integrated until recent years.
The First Website
On December 12, 1990, Tim Berners-Lee published the first website on the Internet after he figured out
the concept of Uniform Resource Locator (URL), Hypertext Transfer Protocol (HTTP), and Hypertext
Markup Language (HTML). The project Berners-Lee launched was about the World Wide Web, in
which he defined, “a wide-area hypermedia information retrieval initiative aiming to give universal access
to a large universe of documents.” (Berners-Lee 1990) His site has only texts and links to other documents.
As a result, it still works today as it did thirty years ago despite the changes and advancements in web
technologies.
Type on Screen
The lowercase g in pixels with vector outlines. Design: Young Sun Compton, 2013.
In the mid-1990s, Matthew Carter designed Georgia and Verdana—two widely used typefaces for screen-
based media. Commissioned by Microsoft specifically for texts on webpages, Georgia and Verdana were
designed first in bitmaps to match the pixels of the screen resolutions at the time and then translated into
outline fonts. For legibility and readability on screens, Carter designed these fonts with large x-height,
open aperture, and generous space.
Image as Text
Newyorker.com’s old page using images as texts.
As graphic design was making the transition to the web from mid-1990s to mid-2000s, designers wanted
to use more typefaces than just the handful that came with the operating system: Georgia, Verdana, Arial,
Helvetica, and Times New Roman. The simplest alternative was to use image as text. Designers could use
any typefaces available on their computer, but the downside was that each piece of text had to be sliced
up individually using tools such as Photoshop and Illustrator. One popular site that used images as texts
was The New Yorker. To be consistent with its printed publication, each headline on the newyorker.com
served up images as texts in order to use NY Vogue Goat as its branded typeface. Until November 2010
when the publication started using Typekit to serve its custom fonts, someone’s job at he publication was
to slice up those images every day.
Image Replacement Techniques
A major issue of using image as type was that text was not searchable, selectable, or translatable. To get
around this problem, web practitioners came up with various image replacement techniques to fill the
void. In April 2004, Shaun Inman developed a technique called Scalable Inman Flash Replacement
(SIFR) to embed custom fonts in a small Flash movie. He also used JavaScript and CSS to make the text
selectable.
While SIFR solved the issue of image slicing, its main drawback was relying on Flash, an Adobe’s
proprietary software program for delivering rich contents on the web. Furthermore, setting up SIFR
required some web knowledge. In April 2009, Simo Kinnunen created a new and improved technique
called Cufón (Scalable Vector Graphics, SVG). Cufón used JavaScript to render generated fonts (SVG
format) to the browser. This technique was easier to set up and did not rely on Flash. Although many
image replacement techniques have continued to be developed and advanced over the years, they are not
genuine web typography.
Webfonts
Web typography is not a new concept. In 1998, the Cascading Style Sheet (CSS) Working Group
proposed the support of the @font-face rule to allow any typeface to be displayed on webpages. Internet
Explorer 4 was the first browser to implement it, but with no success. The proposal had no piracy
protection or licensing agreement in place. As a result, @font-face was stalled for almost a decade.
In 2008, @font-face made a comeback when Apple Safari and Mozilla Firefox implemented it. In May
2009, Jeffrey Veen introduced Typekit, a type hosting service that let designers use high-quality fonts on
websites with the ease of implementation and the worry-free of licensing and cross-browser compatibility.
In just two years, Adobe acquired Typekit bringing more classic types such as Garamond Pro, Minion
Pro, and Myriad Pro to the web.
In 2010, Google launched its own library of open-source fonts. With its simple API (application
programming interface), Google has succeeded in making webfonts more approachable.
The @font-face rule is now supported in all modern browsers (Internet Explorer, Firefox, Chrome,
Safari, and Opera) and mobile browsers (iOS Safari, Android, and Chrome). In addition to Google Fonts,
many type foundries began to offer webfont services. In just a few years, webfonts have swept the world of
web design.
Variable Fonts
On September 14, 2016, Adobe, Apple, Google, and Microsoft joined forces to introduce variable fonts at
the ATypI conference in Warsaw, Poland. The power of this new OpenType font variation technology is
in its ability to pack multiple fonts into one without increasing the file size, which is a huge advantage for
delivering webfonts. Variable fonts solve the issue of loading individual font file to get various weights,
widths, heights, styles, and other attributes. With flexibility, variable fonts provide an exciting opportunity
for responsive typography on the web.
Illustration: 3-axis variable font by John Hudson. Typeface: Kepler designed by Robert Slimbach.
With the rise of responsive web design and the emerging of variable fonts, typography is going through a
new transformation like never before. Unlike printed publications, the flexibility of the web gives designers
no control of their work. Whether through smartphones, tablets, laptops or game consoles, they have no
idea how their work will be viewed on a user’s device. In order to accommodate the growing number of
devices coming to the market continuously, they have to embrace the fluidity of the web and let go of the
notion of pixel-perfect control. Designing for the unknown can be intimidating, but also challenging,
rewarding, and exciting.
Serving Webfonts »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Serving Webfonts
To use webfonts, you need to understand how to serve them. Third-party services such as Adobe Fonts
and Google Fonts make embedding fonts effortless. You select the fonts you want, copy and paste a
stylesheet link to your HTML document, and then refer to the fonts in your CSS. While Adobe Fonts
gives you access to thousands of typefaces, you will be locked into an Adobe’s subscription for as long as
you want to use those fonts. On the other hand, Google Fonts hosts only open-source typefaces, but
Google collects, stores, and uses end-user’s data. As a result, the preferred method is to host webfonts on
your own server along with your website. Whether licensing from a type foundry or using an open source,
self-hosting your font files gives you reliability, independency, and privacy. As browsers continue to
improve their font-rendering methods, hosting your own font files has become less intimidating.
To use the @font-face rule for self-hosting, you simply define webfonts in your CSS:
@font-face {
font-family: 'Spectral';
src:
url('spectral-regular.woff2') format('woff2');
}
Font Family
In an @font-face rule, the font-family property declares the name of the typeface. In the example
above, Spectral, by Production Type, is the font name and the src property instructs browsers the
location of the font file (spectral-regular.woff2).
Font Formats
Today, the three widely supported formats for webfonts are Web Open Font Format 2 (WOFF2), Web
Open Font Format (WOFF), and TrueType (TTF). For modern browsers, I recommend serving woff2,
which has 30% reduction in file size over woff. Include woff and truetype only if you need to support
older browsers.
@font-face {
src:
url('spectral-regular.woff2') format('woff2'),
url('spectral-regular.woff') format('woff'),
url('spectral-regular.ttf') format('truetype');
}
Font Style
The font-style property specifies the style of the font family, which can be normal, italic, or
oblique.
@font-face {
font-style: normal;
}
Font Weight
The font-weight property defines the weights, which can be specified in numerical value or keyword:
400 or normal, 700 or bold, and 900 or black. I recommend using specific numerical values: 100–900.
@font-face {
font-weight: 400;
}
Font Display
The font-display property determines how a typeface is displayed: auto, block, fallback, optional,
or swap. In most cases, I recommend using swap to tell browsers to display text with fallback font right
away and then swap to custom font as soon as it loaded.
@font-face {
font-display: swap;
}
Here’s the final CSS to serve your font file:
@font-face {
font-style: normal;
font-weight: 400;
font-display: swap;
src:
url('spectral-regular.woff2') format('woff2'),
url('spectral-regular.woff') format('woff'),
url('spectral-regular.ttf') format('truetype');
}
Using Webfonts
With the font file defined, you can apply it to your text in CSS:
body {
font: 100%/1.5 'Spectral', serif;
}
The shorthanded font property lets you specify the font size (100%) and the line height (1.5) of the font.
The name of the font, Spectral, is referred back to the @font-face declaration. The keyword serif is
added to specify the default fallback font if Spectral had not fully loaded or failed to load.
To get the source code for this demo, head over to the download page.
Selecting Body Text »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Selecting Body Text
When typesetting for the web, I recommend begin with the body text. People spend most of their time
reading the main content; therefore, you want to provide an uninterrupted experience. The typeface
needs to be unobtrusive, legible, and readable. In selecting body text for the web, I look for the following
characteristics: generous x-height, open apertures, even spacing, clear terminals, distinguishable ascenders
and descenders, styles and weights, contrast, and context.
Generous X-height
X-height is the vertical measure of a lowercase x. The x-height is often slightly bigger than half of the cap
height, which is the distance between the baseline and the top of the capital letter. The shorter the x-height,
the smaller the letter will appear, which can cause the type to become illegible. Likewise, legibility is also
reduced if the x-height is too tall. For instance, a large x-height makes the letters n and h difficult to
distinguish. The ideal lowercase letters should be just tall enough to be harmonious with their uppercase
partners.
x-height
Garamond (left) has a small x-height. Minion Pro (center) has a decent x-height. Lora (right) has the most generous x-height out of the
three faces.
Open Apertures
Apertures are the opening gaps found in certain letters such as c, e, and s. Open apertures aid readers to
decipher the letters. In contrast, closed apertures negatively affect legibility. For example, in geometric
typefaces like Arial and Helvetica, the tiny gap in c can be mistaken for o at smaller sizes.
apertures
Myriad Pro (left) has larger apertures than Helvetica (right).
Even Spacing
Well-designed typefaces for the web should have even letter-spacing to establish a steady rhythm for reading.
The space around the letters are as important as the space within them. Letters should not be too close to
or too far away from each other. Even spacing speeds up the reading process. Readers can pick out the
shapes quicker if the spacing is well balanced.
Even Spacing
ITC Officina Serif has even rhythm.
Clear Terminals
Terminals come in three forms: ball (circular), beak (spur), and teardrop (globular). They can be found in
the letters a, c, f, j, r, and y. In long-form text, letters with clear terminals (distinguishable shapes of ball,
beak, or teardrop) are easier to spot; therefore, they are more readable than letters with lacking terminals.
Terminals
Hoefler Text (left), with teardrop terminals, and Méridien (center), with beak terminals, are more readable than Helvetica (right), without clear
terminals.
Distinguishable Ascenders and Descenders
Ascenders refers to the strokes that extend above the mean line and descenders refer to the strokes that extend
below the baseline. The more distinguishable the ascenders and descenders are, the more legible the
letters. Most serif typefaces are often ideal choices for reading text due to the noticeable strokes in their
ascenders and descenders.
Ascenders and Descenders
Helvetica (left) has less distinguishable ascender and shorter descender than Noto Sans (center). Noto Serif (right), however, has more
distinctive characteristics on its ascender and descender than both of the sans serif faces.
Styles and Weights
As you browse through galleries like Google Fonts, one of the quickest ways to narrow down your
selection for body text is by filtering out typefaces with less than four styles. For a family of type to work as
body text, there need to be at least a regular, italic, bold, and bold italic. When you don’t have an italic style in
your font files, browsers will try to slant your typeface to give it a faux italic. When you don’t include a
bold style in your font family, browsers will double up your typeface to make it bold. Without the true
italic and bold fonts, the results are hard on the eyes.
Italic
True italic Sabon (left) vs. faux italic Sabon (right)

Italic
True bold Sabon (left) vs. faux bold Sabon (right)
Contrast
Contrast refers to the thick and thin strokes of a letter. High-contrast typefaces like Didot and Bodoni work
well at larger sizes—posters and fashion advertising—but not for running text. In these fonts, thin strokes
can be lost and thick strokes can be too prominent at a small size. As a result, the combination of thick
and thin strokes interrupts the flow of reading. On the other end of the spectrum, geometric typefaces like
Arial and Helvetica can also result in a similar poor reading experience, as they have very little contrast.
The uniform letter shapes in these fonts make long form reading dull and tiresome. For reading text,
choose typefaces with medium to low contrast.
Contrast
Didot (left) has too much contrast. Arial (right) has no contrast.
Context
Up to this point, we have touched on the technical details for selecting the body text but knowing the
context in which you will set the text in is also an important consideration. Your type needs to work
naturally with your design. Taking responsive web design into account, how does your type work in
various platforms? Does it look too wide on a mobile device? Does it look too cramped on a large-screen
monitor? Finding the typeface that could strike a balance between the different contexts and devices
ensures a consistent experience for your readers.
Setting Type in the Browser »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Setting Type in the Browser
Once selected your choice of typeface for body text, you must test it in browsers. Typesetting in the
environment that the text will live in gives you the true sense of the final result.
Basic Page Setup
This is the entire markup you will need to get started:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width">
<style>
/* CSS styles go here */
</style>
</head>
<body>
<p></p>
</body>
</html>
The viewport <meta> tag is crucial for responsive typography. To make sure your text is readable on a
small screen without zooming, you need to target the device (width=device-width) rather than the
viewport.
Paragraphs
Let’s start with paragraphs since they take up the most real estate in a composition. When setting
paragraphs, use genuine content. Unlike dummy text (lorum ipsum), real text gives you a better sense of
how your typeface will actually look on your page. If your text has words in bold and italics, mark them
up in your HTML as well so you can see how they look on your page. Some typefaces look great on the
type foundry’s marketing materials or specimens, but they might not work with your project.
Setting paragraphs in the browser allows you to create the right tempo for your text. The speed of the
tempo depends on the context of your design. For instance, you might want to provide a faster tempo for
quick reading on small devices by choosing typefaces with tighter letter and word spacing. For larger
screens, you might want to provide a more relaxing tempo for a slower, pleasurable pace by choosing
typefaces with looser letter and word spacing to let the text breathe. You can change the tempo of your
paragraphs by physically moving the browser in and out. You can use media queries to set different
tempos for different screen devices.
Take advantage of the browser as a tool for type specimens. You can compare different type treatments
by editing your CSS file and opening the same page in a different window. If you don’t refresh any open
windows, you can preview different type treatments applied to the same page.
Mobile First
Once I have text loaded in, I set up my basic CSS:
body {
font: 100%/1.5 'Spectral', serif;
font-weight: 400;
margin: 0 auto;
padding: 2em;
text-align: left;
}
Let’s go through the syntax. I am a huge fan of the mobile-first approach because one of its benefits is you
don’t need to set the width of your composition. Just squish your browser all the way in or close to 340-
pixel wide and you can get a sense of how your text will look on a small screen. I always start my body text
size at 100%, which is equivalent to 16px or 1em. If text at 100% looks too small or too big on small screens,
I can adjust the paragraph element (p) to get the optimal reading size.
For line height—the space between the lines—a comfortable measure is between 1.4 and 1.6, but it
depends on the x-height of your type and the length of your text line. If the x-height is big and your line
length is long, you will want to increase your leading. On the contrary, if the x-height is small and your
line length is short, you will want to tighten up your leading. Achieving a comfortable spot requires
experimentation and using your best judgment.
For padding, I usually give at least 2em on the left and right sides. The reason is that I prefer using
hanging bullet lists. On small-screen devices, the hanging bullets will touch against the edge of the screen
if the left padding is set at less than 2em.

Hanging Bullets
Hanging bullets set at 1em (left) and 2em (right) on a mobile device.
For margins, I like to set the left and right margins to auto so that the composition is centered in the
browser, which makes more sense when you design for a large screen. In CSS, font weights can be
specified in keywords like normal or bold, but it is a good practice to get into the habit of using numerical
values, which range from 100 (thinnest) to 900 (boldest), for precise control. A typical typeface has a
normal weight of 400 and bold weight of 700.
Comfortable Measure for Reading
When setting body copy, text is suggested to be kept between 45 to 75 characters per line for readability.
Overly long lines make scanning the text more difficult, as the eye has farther to travel; readers reaching
the end of one line may have trouble locating the start of the next line. The challenge is to find the most
comfortable measure for an uninterrupted reading experience. Text size at 100% or 16px usually works
well on a small screen (with the width of 340px or less). On a large screen, however, you need to put a
limit on the line length.
Paragraph Indication
On the web, the most common method of separating paragraphs is using an extra leading or a blank line.
Chunks of paragraphs make skimming online content easier. In print, first-line indent is often used to
denote a new paragraph without interrupting the flow of reading. First-line indent (applied in this book) is
appearing more online for long-form reading. Whichever method you prefer, stick with one but not both.
If you use first-line indent, make sure that the first paragraph has no indent and the subsequent
paragraphs should be indented by 1em. Here are the two lines of CSS for first-line indent:
p { margin: 0;}
p + p {text-indent: 1em;}
To get the source code for this demo, head over to the download page. Once you have your paragraphs
nailed down, we’ll move on to choosing headings in the next chapter.
Choosing Headings »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Choosing Headings
Headings and subheadings invite and guide readers through the text. Effective use of large headings grabs
their attention. Smaller subheadings help them decide whether or not they want to read a particular
section. Headings need to stand out to help anchor the composition.
Using the Same Typeface
You can start off having headlines use your body typeface with double or triple the size. Experiment with
the spacing, weight, alignment, and case (such as setting a header in all-uppercase via text-transform),
or even color. Reusing the same body typeface not only creates visual harmony, but also reduces the
number of fonts to be loaded, boosting performance. As a general rule, eliminating any unnecessary font
files helps your site load faster. Take advantage of variable fonts when you can.
Same Typeface
Pliego, designed by Juanjo López
Combining Typefaces
If you want more distinctive headings, then you will need to find a typeface that can both stand out as an
attention grabber and complement the body text. In most cases, it’s not a good idea to pair two serifs (e.g.
Bembo and Goudy) or two sans-serifs (e.g. Helvetica and Open Sans). Having two typefaces that are
fundamentally similar but still different can look awkward.
One of the recommended methods for combining typefaces is to keep it in a superfamily—typefaces that
have different classes (e.g. sans, serif, slab) but share similar structure. For example, if you use Source Sans
Pro for body text, you can complement it with Source Serif Pro for headings. Another suggestion is using
typefaces from the same designer. For example, you can pair Exchanged with Retina since both faces
were designed by Tobias Frere-Jones and they compliment each other.
Source Family
Source Sans Pro, by Paul D. Hunt, and Source Serif Pro, by Frank Grießhammer
Do keep in mind that there is no set rule for mixing typefaces. You can choose two complementary or
completely distinctive typefaces. Go with your own instinct to find a balanced combination for your
project.
Using Em for Headings
When writing CSS for headings, I prefer em units over px units. Em is a relative unit calculated from the
font-size property. For example, if I set my body text at 100% (or 16px), then 1em equals 16px, 2em
equals 32px, and 2.5em equals 40px. One of the advantages of using em for headings is that when I need
to change the text size, I can do it in one place. For instance, if I change my body text from 100% (16px) to
83.1% (13px), all my headings will also scale accordingly. I understand many designers prefer px units
because they are easier to figure out the sizes. To convert px to em without doing the math, pxtoem.com is
a useful for tool to bookmark. If you use Sass, here is a function that does the conversion:
@function calc-em($target-px, $context) {

@return ($target-px / $context) * 1em;
}
h1 {font-size: calc-em(32px, 16px);} // Outputs 2em
$target is the unit you want to use (32px) and $context is your base unit (16px). Therefore, 32px
divided by 16px equals 2em.
Modular Scale
On the web, you will need at least six levels of headings (h1 to h6), whether you will use them all or not. If
you design a typographic system to be used in a content management system (CMS), it is safe to define
them all because you never know what level of heading a CMS user’s going to pick in the WYSIWYG
editor. You don’t want your heading to fall back to the browser’s default setting and mess up your
hierarchy.
To select the appropriate size for headings, I often experiment with em units in the CSS and then reload
the page to see the live results. One of the benefits of using pre-calculated modular scales is to help you
with choosing proportions. Modular scales are based on a set of numbers that connect to each other in a
harmonious relationship. In a Fibonacci series, for instance, each number is a result of two previous
numbers added together. If your base size is 16px and you want to chose your headings according to the
golden section, the scale of sizes includes 16, 26, 42, 68, 110, 178, and so on.
To help calculate the values for various scales, Tim Brown and Scott Kellum have developed a useful tool
called Modular Scale. To use it, all you have to do is enter in the base text size (1em or 16px is the default)
and another base size (for heading), and then select a scale ratio. For example, when you enter 16px for
text size, 50px for the largest heading, and select the golden section, you will receive the following values:
1em, 1.194em, 1.618em, 1.931em, 2.618em, and 3.125em. You can then enter those numbers into your
CSS:
h1 {font-size: 3.125em;}
h4 {font-size: 1.618;}
h6 {font-size: 1em;}
If you want your headings to be bigger on a large screen, you can find a different set of values using a
different scale. For example, let’s keep the text size at 16px, but change 100px for the largest heading, and
then select the octave scale. You will get the following values: 1em, 1.563em, 2em, 3.125em, 4em, and
6.25em. You can then plug them in to your CSS’s media query:
@media only screen and (min-width: 42em) {

}
Picking Type for User Interface »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Picking Type for User Interface
On the web, user interface (UI) refers to task-driven elements that guide people to perform certain actions.
Whether navigating through a website, filling out a form, selecting a date on a calendar, or toggling a
radio button, users will find their way around quicker and easier if the UI is clear and consistent. In
contrast, cluttered and confusing UI will frustrate users and prevent them from completing their task.
Although an icon is often used in UI as a visual representation of a word, text is the most direct
communication in action-based design. Typography, therefore, plays an important role in user interface.
When picking a typeface for UI, I consider the following factors: legibility, modesty, and flexibility.
Legibility
The key element in a well-designed typeface for a web interface is legibility. The letterforms need to be
clear and recognizable. Letters with clear distinction in their forms perform better as a UI element. For
instance, in many sans serif typefaces including Helvetica, capital I and lowercase l are indistinguishable.
As a result, typefaces designed specifically for screen such as Source Sans Pro is a better choice for UI
because their lowercase l has a discernible tail.
legibility
Source Sans Pro (left) has clearer letterforms than Helvetica (right).
Modesty
An ideal UI typeface stays out of the users’ way when they try to complete their task, whether that’s
making a transaction, filling out a survey, or registering for a service. The goal of an effective UI design is
to provide users a logical flow to help them make the right decisions and motivate them to take action. To
speed up the flow, the type has to work with the users’ eyes rather than disrupt them. Good UI typefaces
are unobtrusive: they ease the way for users, without drawing attention to themselves.
Modesty
Ubuntu (left) makes a much better user-interface typeface than Cezanne (right), which draws too much attention to itself.
Flexibility
A well-designed UI typeface needs to be flexible. It should work well in various sizes and devices. On a
small screen in particular, the type must remain legible; therefore, sans serif faces that are hinted to work
at small sizes on low screen resolution are preferred for interfaces. When choosing a type for a web UI,
you need to pay attention to the following details: spacious proportions (1), generous x-height (2), modest
ascenders and descenders (3), even spacing (4), open apertures (5), and medium to low contrast (6).
flexibility
Fira Sans designed by Carrois and Edenspiekermann for the Firefox OS Typeface.
Depending on the intention and the goal of a website, no one size or style fits all user interface design. A
button to call for action may be more prominent than a button to set personal preference; the main
navigation system should be hierarchically above the secondary menu; the UI elements may be smaller
and narrower on the mobile than the desktop. Regardless of its context, legibility must not sacrifice. The
user interface must be clear, simple, and consistent.
Discerning Typographic Details »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Discerning Typographic Details
Selecting the appropriate typefaces and setting comfortable reading text are, without a doubt, important
tasks for designers, but paying attention to the typographic details sets the quality of one professional’s
work above others. In this chapter we will cover these typographic nuances.
Hyphens and Dashes
Hyphens, en dashes, and em dashes all serve different purposes.
A hyphen (-) is the shortest of the three and is used to make any compound adjectives clear: e.g., down-to-
earth type. The double hyphen (--), which doesn’t exist in punctuation, is often misused as an em dash (—).
The en dash (–) is longer than the hyphen but shorter than the em dash. The en dash is often used
between numbers to indicate a range: e.g., 2000–2015.
The em dash (—) is the longest of the three and is used to interrupt a sentence, or in place of commas and
parentheses. American style uses no spaces—like this—around em dashes, but British style does use
spaces.
Dash Mac Windows HTML
– en Opt + - Alt + 0150 &ndash
— em Opt + Shift + - Alt + 0151 &mdash
Quotes
Double and single quotation marks work as a pair: “like this.” Notice the opening double quote looks like
66 (“) and the closing double quote likes like 99 (”). Likewise, single quotation marks are treated the same:
‘like this.’ Oftentimes, double and single quotation marks are confused with the straight quotes (available
on most standard keyboards) or the prime symbols (to denote feet and inches like I am 5′4″ tall). Notice
below, the straight quotes or prime symbols are different from the curly quotes.
“That’s a ‘cool’ trick.”

"That's a 'cool' trick."
Quotes set correct (top) and incorrect (bottom)
Quote Mac Windows HTML
‘ single opening Opt + ] Alt + 0145 ‘ or ‘
’ single closing Opt + Shift + ] Alt + 0146 ’ or ’
“ double opening Opt + [ Alt + 0147 “ or “
” double closing Opt + Shift + [ Alt + 0148 ” or ”
Hanging Bullets
Bulleted lists are unhung by default in all browsers. Unhung bullets disrupt the flow of running text. For
an uninterrupted reading experience, bulleted lists should be hung to the left so that they can still serve as
typographic gestures without disturbing the alignment. Here’s the CSS for setting hanging bullet lists:
ul { margin: 0; padding: 0;}

li li {margin-left: 1em;}
The first CSS rule sets the margin and padding of an unordered list (ul) to 0. As a result, any sub list will
also be set to zero. The second rule pushes the child selector 1em to the right to make the distinction
between the parent and the child in a nested list. On small screens, at least 2em of left padding is needed
on the body copy’s container to make sure the bullets aren’t obscured.
Hanging Bullets
Hanging bullets set at 1em (left) and 2em (right) on a mobile device.
Kerning
Kerning is the process of adjusting the space between particular pairs of letters to correct strange gaps.
Compare and contrast the spaces in the pairs of letters below to see how kerning can improve legibility.
Kerning off
Adobe Caslon Pro without kerning

Kerning on
Adobe Caslon Pro with kerning
To turn on kerning in modern web browsers, you need one line of CSS:
body {font-kerning: normal;}

Letterspacing
Unlike kerning, letterspacing, or tracking, is the process of adjusting the space between all letters. Spacing
can make or break a beautiful group of letters. Well-spaced letters, which create a consistent value of grey,
help with readability by establishing a sense of rhythm. The flow of text depends on the right tempo
between letter and word spacing. Tight letterspacing combined with loose word spacing results in a jerky
rhythm and uneven flow. Conversely, loose letterspacing combined with tight word spacing makes the
text unreadable—readers will have a difficult time distinguishing the beginning and the ending of a word.
Extra letterspacing is often used in headings and all caps. Letter-spacing lower case, which reduces
legibility, should not be used at all.
Letterspacing
Univers with letter spacing
Here’s the CSS to control letter spacing:
h1 { letter-spacing: 0.1em; }
Small Caps
Real small caps have their own characteristics: height, stroke weight, letterfit, and proportions. Small caps
are designed to work well with lowercase text. They are slightly taller than lowercase letters but shorter
than uppercase letters. To use true small caps on the web, you will need to add an additional subset of
fonts, which increases the file size. Do not scale down full caps, however, to save on performance. They
will look odd and fake next to lowercase text.
x-height
Alegreya Sans SC (left) and scaled-down-full-caps Alegreya Sans (right)
If the typeface you chose has small caps, here is the CSS you need to turn them on:
.smallcaps {font-variant-caps: small-caps;}

Ligatures
Ligatures were designed to prevent two or more letters from crashing into each other. The most common
case is the fi collision. With ligatures turned on, the terminal of the f will reach into the i and the dot of the
i will be eliminated. Study the two illustrations below to see the difference:
Ligature off
Adobe Caslon Pro without ligatures

Ligature on
Adobe Caslon Pro with ligatures
For ligatures to work on the web, the typeface you chose needs to have OpenType features. To turn on
ligatures in CSS, this is all you need:
body {font-variant-ligatures: common-ligatures;}

Ampersand
The ampersand is a mark that represents and or et in Latin. Because the ampersand is often used as a
decorative element, the more flourished its design the better. Choosing a custom ampersand is a fun
typographic activity. Finding an italic font with a gorgeous ampersand is like discovering a rare gem.
Ampersands
Italic ampersands from left to right: Adobe Caslon Pro, Bembo, Goudy, Hoefler Text, and Playfair Display
Discovering OpenType Features »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Discovering OpenType Features
OpenType feautres are hidden powers. They provide both elaborate detail and specific control of your
typesetting. Well-designed OpenType fonts will give you a set of cohesive features to create a successful
typographic system. Therefore, considering OpenType features part of your type selection process will
help narrowing down your choices. Knowing specific features you need will make your job much easier.
For example, if you want a fancy header, you might want to search for a typeface that has swash italics.
On the web, one of the key elements to unlock OpenType features is the font-variant CSS property.
Let’s break down this property to see the capabilities of OpenType features.
Basic Features
While ornamental features such as discretionary ligatures, swashes, and stylistic alternates, are optional for
specific typographical elements, essential features should be set as default to improve the legibility and
readability of your typesetting. For body text, apply kerning, common ligatures, and contextual ligatures:
body {
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual;
}
Contextual Alternates
Adobe created the contextual alternates feature to join glyths together in script typefaces. Caflisch Script
Pro, which based on Max Caflisch’s calligraphy, was one of the early typefaces that used this feature. As
you can see in the illustration below, alternate glyphs work better than default glyths in Caflisch Script
Pro. The connecting strokes make the typeface feel more like hand-drawn.
Contextual Alternates
Caflisch Script Pro default (left) and contextual alternates (right)
Although many script typefaces today designed with connecting glyths, it is still a good practice to turn on
contextual alternates:
body {font-variant-ligatures: contextual;}
Discretionary Ligatures
Unlike common ligatures (ff, fi, and fl), which are designed to solve clashing characters, discretionary
ligatures are more ornamental. Because of their decorative features, which interfere with reading,
discretionary ligatures are more suitable for short text than long copy.
Discretionary ligatures
Garamond Premier Pro with discretionary ligatures
If you would like to add a bit of flair, you may want to consider adding discretionary ligatures:
h1 {font-variant-ligatures: discretionary-ligatures;}
Swashes
With OpenType’s capabilities, swash characters are flourishing. Swashes are useful for typographic
enhancements. Because of their superfluous features, swashes are suitable for display text only.
Swashes
Poetica Std regular (left) and with swashes (right)

The font-variant property doesn’t have support for swash yet, but you can still use swsh from font-
feature-settings:
h1 {font-feature-settings: "swsh";}
Oldstyle Figures
Unlike lining figures, which have the same alignment and height, oldstyle figures are varied and non-
lining. Because numbers in oldstyle figures work well with lowercase characters, they are less intrusive
than lining figures in running text.
Oldstyle Figures
Granjon LT Std with oldstyle figures
To enable oldstyle figures:
span {font-variant-numeric: oldstyle-nums;}

Performance
OpenType features are powerful, but they also come with a huge cost: performance, performance,
performance. Additional OpenType fonts increase the filesize drastically; therefore, use them with care. If
you don’t need OpenType fonts, don’t use them. If you need to use them, load basic fonts first before
render OpenType fonts. Always design with the users in mind.
Exploring Variable Fonts »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Exploring Variable Fonts
To design a typographic system, you need a font family with different weights, widths, styles, and optical
sizes. Serving up a handful of font files to accommodate all the use case yields a negative impact on
performance. In contrast, a variable font is a single file holding multiple fonts. In addition to performance,
a variable font provides flexibility and precise control. For example, you can set a font weight in any
number between 100 to 900. Instead of font-weight:400, you can set font-weight:413 to get a slightly
thicker text if that increases readability.
Variation Axis
Axis of variation is the power behind variable fonts. Axes give you control of the display of your webfont.
You can change a variable font’s weight (wght), width (wdth), italic (ital), slant (slnt), and optical size
(opsz) through the font-variation-settings property.
Weight
Weight (wght) is one of variable font’s registered axes. It streamlines the need to include multiple font files
for each weight. To illustrate the flexibility of variable font in specifying weights, let’s take a look at Tyler
Finck’s ETC Trispace:
@font-face {
font-family: 'ETC Trispace';
font-weight: 100 900;
font-style: normal;
font-display: swap;
src:
url('ETCTrispaceVariable.woff2') format('woff2');
}
Now that you have defined ETC Trispace variable font, you can use the font-variation-settings
property to define specific weights (wght) anywhere between 100 to 900:
p {
font-family: 'ETC Trispace', sans-serif;
font-variation-settings: 'wght' 400;
}
ETC Trispace
ETC Trispace, a variable font designed by Tyler Finck, with weights varied from thin to black.
Width
Width (wdth) is another one of variable font’s registered axes. It allows you to control how narrow or wide
you would like to set the letterforms. With ETC Trispace, you can choose any value between 50 to 200.
For example:
h1 {
font-family: 'ETC Trispace', sans-serif;
font-variation-settings: 'wdth' 50;
}
ETC Trispace
ETC Trispace, a variable font designed by Tyler Finck, with widths varied from condense to extend.
Combining Width and Weight
In addition to Finck’s suggested weight and width, ETC Trispace allows you to set the weight and width
for your specific needs. The combination of weights (100 to 900) and widths (50 to 200) gives you
tremendous flexibility for your typographic system.
h1 {
font-variation-settings: 'wght' 812, 'wdth' 54;
}
h2 {
}
h3 {
}
p {
}
Practicing Typography »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Practicing Typography
Up to this point, you have learned the foundation of selecting body text, setting paragraphs, choosing
headings, picking UI type, and applying typographic details. You have gained CSS skills to style your
fonts. In this last chapter, I would like to leave you with some practical demos to expand on what we have
covered. I encourage you to download them, view their source (HTML and CSS), modify them to practice
your web typography, and adapt them in your own projects. But before we delve into the demos, which
used grid extensively, I would like to go over the essential properties of CSS Grid.
Using Grids
Grids are systematic layouts made of columns and rows. They play a crucial role in organizing
information and maintaining consistency throughout a composition. One of the major benefits of grid-
based design is typographic control. Although grids have been used in print design for many decades, they
only become available on the web in recent years with the support of CSS Grid, which landed in major
browsers in early 2017.
Defining a Grid
To declare a grid in CSS, use the display:grid property on the parent element. Then apply grid-
template-columns to define the regions and grid-gap to specify the space of the gutters. For example:
.grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 1em;
}
Now you can add a grid class in your markup:
<body class="grid">
<main></main>
<aside></aside>
</body>
In the markup above, body is the parent element. main and aside are the direct children; therefore, they
become grid regions. Defined in grid-template-columns, main takes up 2fr units and aside takes up
1fr unit. grid-gap (gutter) takes up 1em.
The “fr” Unit
CSS Grid introduces the new fr unit, which represents fraction, to provide flexible grid layouts. Unlike a
print layout, which defines rigid columns, the web needs fluidity; therefore, fr allows columns to adapt to
the available space of the parent element. The fr unit is designed specifically with the principles of
responsive design. As a result, making responsive grid for the web is as easy as defining the fr unit in the
grid-template-columns element. However, what I find misleading about the fr unit is that it doesn’t
take grid-gap into account. For example:

grid-gap: 1em;
In the CSS above, the 2fr unit does not include a 1em gutter in between the two regions. As a result, you
will end up with an inconsistent grid: 1fr 1fr 1em 1fr (region region gutter region). A consistent grid
should follow: 1fr 1em 1fr 1em 1fr (region gutter region gutter region).
The “span” Keyword
To create a consistent grid, you need to use the span keyword to specify a grid item’s size and location
within the grid-column property. For example:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
}
main {
grid-column: span 2;
}
Instead of defining the main area as 2fr, you break it down to 1fr and 1fr, then use the grid-column
property to join them together: span 2. Let’s take a look at how these CSS properties work in the demos.
Online Résumé (Two Columns)
Designing an online résumé is a great way to practice your web typography. You have to consider
readability, legibility, hierarchy, and harmony; therefore, you need to choose your type with care. I also
suggest making the layout responsive to ensure your résumé will work on any device. In this demo, which
is my actual résumé, the layout is one column on small screens and expanded to two columns on large
screens. For the typefaces, I combined Alegreya and Alegreya Sans, designed by Juan Pablo del Peral for
Huerta Tipográfica. For the header, I used Rakkas, designed by Zeynep Akay, for a bit more flare.
My online résumé with a two-column layout
Here’s the markup:

<body class="grid">
<main></main>
<aside></aside>
</body>
Here’s the CSS:
.grid {
display: grid;
grid-gap: 1em;
}
Online Résumé (Three Columns)
When applying for a job, you might want to customize your résumé to a specific hiring company. Thanks
to the power and flexibility of CSS, you can recreate your résumé with a few tweaks. In this demo, I
changed my résumé from a two-column to three-column layout. I also switched out the typefaces. In this
version, I am combining DM Sans and DM Serif Display, designed by Colophon Foundry.
My online résumé with a three-column layout
Here’s the CSS:

.grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
grid-gap: 1em;
}
Blog
Visualgui is both my personal blog and typographic experimentation. Launched in 2003, I knew from the
get-go that I wanted to focus my blog on text and nothing else. Powered by WordPress, I redesign it every
few months to change up the grid layouts as well as the typefaces. It has evolved over the years, but my
main focus had always been on typography. In this demo version, I set the main text in Crimson Pro,
designed by Jacques Le Bailly. Heading and small text are set in Hepta Slab, a variable font designed by
Mike LaGattuta.
Visualgui.com (my personal blog)
For large screens, I want the headline to be on the left, the main text in the middle, and the date on the
right. For my footer, I want each section to take up one column. Here’s the markup:
<article class="grid">
<header></header>
<div class="main-text"></div>
<footer></footer>
</article>
<aside class="grid">
<section></section>
<section></section>
<section></section>
<section></section>
</aside>
Here’s the CSS:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
}
.main-text {
grid-column: span 2;
}
As demonstrated above, I have to use the span keyword to make the main text align with the edge of the
columns in the footer. If I simply define 1fr 2fr 1fr in the grid-template-columns, the 1em gutter
won’t apply between the 2fr. As a result, the grid between the blog post and the footer columns will be
off.
Online Editorial Design
Editorial design is gaining momentum on the web as browsers continue to improve CSS support. The
potential for crafting an enriching editorial experiences is promising; therefore, I encourage you to explore
this space. For this demo, I am using a Greg Tate’s essay titled “Hiphip Nation: It’s Like This Y’all,”
published in the Village Voice. Tate is one of my favorite music critics; therefore, it is such an honor for me
to create this demo. The typefaces used are Jockey One, Crete Round, Literata, and Abril Fatface—all
designed by TypeTogether.
“Hiphop Nation: It’s Like This Y’all” by Greg Tate
Branding Guidelines
Vietjazz is a record company I had dreamed up to connect and advance the two distinctive musical forces:
Vietnamese ballad and jazz. As a jazz fan with Vietnamese music in my blood, I love the marriage
between the two distinctive musical landscapes and want to explore more in this direction. In my informal
research, what I have learned is that most Vietnamese listeners aren’t familiar with the jazz sound. My
goal for Vietjazz Records is to produce and promote Vietnamese music with jazz flavors. From signing
artists to album concepts to art direction to distribution, Vietjazz will be involved in every aspect of
crafting an experience.
Although Vietjazz is a fictitious brand, it gives me an opportunity to design and develop the whole concept
from identity to visual elements to applications. For the demo, I created a page to illustrate all the
guidelines for the brand. I hope you will enjoy it and develop something similar for yourself or your
company.
Branding guidelines for Vietjazz
Web-based Book
After releasing this book and Vietnamese Typography, I received a handful of inquiries expressing interests in
using the web as a publishing platform. As a result, I decided to share the source code for Professional Web
Typography. In the demo, you will get the front cover, the introduction page, and the history page. These
three pages and the complete CSS file will help you get started creating your own web-based book.
Because this is a demo, I have to change the typefaces from commercial to open source. I chose Source
Sans Pro, by Paul D. Hunt, Source Serif Pro, by Frank Grießhammer, and Source Serif Pro, also by
Hunt. I hope this demo will inspire you to create your own web-based book and share with the world.
Web-based Book
To get the source code for all of the demos on this page, head over to the download page.
Conclusion »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Conclusion
I hope this little book has taken away the intimidation and motivated you to develop your web
typographic skills. Now that you have gone through the foundation of setting web type, I encourage you
to read, observe, and experiment further. Typography has a fascinating past, exciting present, and
evolving future. It is never too late to get into the game.
As for variable fonts, browser support for more typographic control using CSS looks promising. I urge you
to stay abreast with the development of CSS modules that are related to typesetting. With typographic
practice and CSS exploration, you will be well on your way to becoming a professional web typographer.
Now go and set your type with confidence.
Further Reading
Books on Typography
Books on Web Design & Development
Variable Fonts
Font Playground (variable font experimentation by Wenting Zhang and Hua Shu)
Font of the Month Club (new font delivered to your inbox every month by David Jonathan Ross)
v-fonts.com (resource for finding variable fonts by Nick Sherman)
variablefonts.dev (showcase the many possibilities of variable fonts by Mandy Michael)
Tools
Modular Scale (font-size calculation by Scott Kellum and Tim Brown)
PXtoEM.com (PX to EM conversion made simple by Brian Cray)
Typetura (a fluid typesetting tool by Scott Kellum and Sal Hernandez)
Wakamai Fondue (a tool to show “What can my font do?” by Roel Nieskens)
Newsletters
Adventures in Typography (on type, lettering, and books by Robin Rendle)
Piccalilli (curated CSS links by Andy Bell)
Web Typography News (web typography tips by Jason Pamental)
Acknowledgements
For the first edition of this book, I want to thank Linh Nguyen for her exceptional copyediting, Raymond
Schwartz for his meticulous technical and editorial reviews, Jim Van Meer for making my words clearer
and stronger, and Chris Silverman for his thorough evaluations and suggestions. I am responsible for the
second edition. If you find errors, please contact me.
About the Author
I am Donny Truong, a designer with a passion for typography and the web. I received an MA in Graphic
Design from the George Mason University School of Art. I am also the author of Vietnamese Typography.
Colophon
The main text is Turnip. Big heading is Forma DJR Chiaroscuro. UI element and small text are Input
Sans. Code excerpt is Input Mono. All typefaces designed by David Jonathan Ross.
Contact
I welcome corrections, suggestions, and revisions to this book. You can reach me at
donny@donntruong.com.
Download »
CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
SECOND EDITION
Download
Thank you for reading this book. If you would like to follow the examples and learn from the demos, you
can download the source code (HTML and CSS) for $10.
Contribute $10 Now
What You Will Get

Example for serving webfonts
Example for setting type in the browser
Example for choosing headings
Example for exploring variable fonts
Demo for online résumé (two columns)
Demo for online résumé (three columns)
Demo for creating a blog post
Demo for creating an online editorial design page
Demo for creating a site for branding guidelines
Demo for creating a web-based book
Enjoy and thanks for your support.

CONTENTS
Front Cover
Introduction
1. History
2. Serving Webfonts
Conclusion
Download
Donny Trương
About Books Résumé
Led design and web development at Scalia Law

School; headed experience design at Thinkpoint
Creative; took Thơ Mưa, a poetry book, to the
web; created a unified branding for Le Mekong
Cuisine; exemplified the beauty of architecture
for Đẹp Designs; presented America: The
Unknown Country; built a straightforward
storefront for Simplexpression.
Case Studies
America: The Unknown Country
Đẹp Designs
Le Mekong Cuisine
Scalia Law School
Simplexpression
Thinkpoint Creative
Thơ Mưa
Projects
Branding
Slideshows
iLoveNgocLan
Jay Z on Design
Rhymastic’s Lyrics
Trịnh Công Sơn’s Lyrics
Visualgui
Connect
Email
GitHub
LinkedIn
Résumé
Twitter
Copyright © 2020 Donny Trương

Professional Web Typography by Donny Truong

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Professional Web Typography by Donny Truong

Uploaded by

Copyright:

Available Formats

Professional

History of Web Typography »

History of Web Typography

The First Website

Image Replacement Techniques

Here’s the final CSS to serve your font file:

Selecting Body Text »

Selecting Body Text

Myriad Pro (left) has larger apertures than Helvetica (right).

ITC Officina Serif has even rhythm.

Distinguishable Ascenders and Descenders

Ascenders and Descenders

Styles and Weights

True italic Sabon (left) vs. faux italic Sabon (right)

True bold Sabon (left) vs. faux bold Sabon (right)

Setting Type in the Browser »

Setting Type in the Browser

Basic Page Setup

This is the entire markup you will need to get started:

Once I have text loaded in, I set up my basic CSS:

if the left padding is set at less than 2em.

Using the Same Typeface

Pliego, designed by Juanjo López

Using Em for Headings

@function calc-em($target-px, $context) {

@media only screen and (min-width: 42em) {

Picking Type for User Interface »

Picking Type for User Interface

Discerning Typographic Details »

Discerning Typographic Details

Hyphens and Dashes

Hyphens, en dashes, and em dashes all serve different purposes.

between numbers to indicate a range: e.g., 2000–2015.

Dash Mac Windows HTML

– en Opt + - Alt + 0150 &ndash

— em Opt + Shift + - Alt + 0151 &mdash

“That’s a ‘cool’ trick.”

Quote Mac Windows HTML

‘ single opening Opt + ] Alt + 0145 &lsquo; or &#8216;

’ single closing Opt + Shift + ] Alt + 0146 &rsquo; or &#8217;

“ double opening Opt + [ Alt + 0147 &ldquo; or &#8220;

” double closing Opt + Shift + [ Alt + 0148 &rdquo; or &#8221;

ul { margin: 0; padding: 0;}

Adobe Caslon Pro without kerning

Adobe Caslon Pro with kerning

body {font-kerning: normal;}

Univers with letter spacing

Here’s the CSS to control letter spacing:

Alegreya Sans SC (left) and scaled-down-full-caps Alegreya Sans (right)

.smallcaps {font-variant-caps: small-caps;}

Adobe Caslon Pro without ligatures

Adobe Caslon Pro with ligatures

ligatures in CSS, this is all you need:

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

Discovering OpenType Features »

Discovering OpenType Features

Caflisch Script Pro default (left) and contextual alternates (right)

body {font-variant-ligatures: contextual;}

Garamond Premier Pro with discretionary ligatures

Poetica Std regular (left) and with swashes (right)

Granjon LT Std with oldstyle figures

To enable oldstyle figures:

span {font-variant-numeric: oldstyle-nums;}

Exploring Variable Fonts »

‘ single opening Opt + ] Alt + 0145 ‘ or ‘

’ single closing Opt + Shift + ] Alt + 0146 ’ or ’

“ double opening Opt + [ Alt + 0147 “ or “

” double closing Opt + Shift + [ Alt + 0148 ” or ”