Working with CSS doesn’t have to make you cry

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🐈‍⬛ 🧗 🏳️‍🌈

@hj_chen

Cascading Style Sheets

is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

Source: W3C Cascading Style Sheets home page

I had a hard time making Univers too. To think of the sort of aberrations I had to produce in order to see a good result on Lumitype! V and W needed huge crotches in order to stay open.
Adrian Frutiger – Typefaces: The Complete Works

Font formats for web use

WOFF2 (Web Open Font Format 2)
WOFF (Web Open Font Format)
OTF (OpenType)
TTF (TrueType)
EOT (Embedded Open Type)
SVG (Scalable Vector Graphics)

Which is now a great segue to start going into font formats. Different font formats store information about the font, like their glyphs, encodings, metadata about the font etc., differently based on how their specifications were written.

Given how successful PostScript was, TrueType was Apple and Microsoft's answer to Adobe's font monopoly. Microsoft came up with TrueType Open in 1994 and eventually Adobe joined in and together they developed OpenType.

Microsoft also came up with EOT or embedded OpenType, a proprietary format for use on web pages. Although they tried to submit this as a W3C recommendation, it was rejected in favour of WOFF, or the Web Open Font Format. WOFF2 is an improvement over WOFF with significantly better compression rates.

Compression rates are significant when it comes to web pages because of how fonts get delivered to our end users. Most people probably don't give a second thought to how content appears on their screen when they click on a link, but most do notice when the page takes forever to load. It's not a great experience.

Abridged explanation of the web (1)

Abridged explanation of the web (2)

A major reason why web pages take so long to load these days is because of all these additional required resources being requested from the server, and sometimes, you're requesting from multiple different servers if those resources need more resources. Think ad banners and all kinds of 3rd party extensions. Every resource takes up bandwidth, so it's important that we only send what is necessary and ensure we have optimised them beforehand.

I found this website on a forum thread where people were asked what's the most bloated website they've encountered and this was just one of them. I'm sure it's not the most bloated website on the internet but, it's sort of a news site, right? Showing us a list of articles. It can definitely afford to be lighter in page weight, is all I'm saying.

Subsetting web fonts

Screenshot of Font Squirrel website — Font Squirrel

Screenshot of FontPlop interface — FontPlop

Screenshot of FontSpider website — Font Spider

Variable fonts

Working with CSS

Space

Weight

Incremental Font Transfer

Incremental transfer allows clients to load only the portions of the font they actually need which speeds up font loads and reduces data transfer needed to load the fonts. A font can be loaded over multiple requests where each request incrementally adds additional data.

—Incremental Font Transfer W3C Working Draft

Google Fonts’ Incremental Transfer Demo

@font-face rule

1. Declare the font

@font-face {
  font-family: 'Magnetic Pro';
  src: url('../fonts/magnetic-pro-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Magnetic Pro';
  src: url('../fonts/magnetic-pro-italic.woff2') format('woff2');
  font-style: italic;
}

@font-face {
  font-family: 'Magnetic Pro';
  src: url('../fonts/magnetic-pro-bold.woff2') format('woff2');
  font-weight: bold;
}

2. Use the font

h1 {
  font-family: 'Magnetic Pro', Helvetica, sans-serif;
}

Even if you're designing something, when you get a hold of some new fonts, you have to install them before you can use them, right? Back in the earliest days of the web, there was no way for you to use fonts that had not already been pre-installed with the system. But eventually, browsers evolved to being able to download additional font files from a specified location just so they could be used on a web page.

You can tell the browser where to get these font files using CSS, and this is how it looks. Now the point of this lecture is not to make all you start writing CSS, although I would be very happy if you found it interesting enough to decide to learn. I just wanted to give you an idea of how the developers you work with go through their day.

This is called a font-face rule, and it tells the browser the name of the font and where to find it. Once we have this rule declared, we can then tell the browser which elements on which this font should be used. Like so. As you can see, I have provided a list of different fonts for the font-family property, also known as a font stack. This is because browsers use a font-matching algorithm to determine which font to use every single character on the screen.

Subsetting gone wrong on Medium for letters beyond the basic Latin set

Subsetting gone wrong on Medium for Lithuanian characters

Slides for This world mixed and blended by Gao Wei.

@font-face {
  font-family: 'Raleway';
  src: url('fonts/raleway-regular.woff2') format('woff2');
  /* no range specified, defaults to entire range */
}

@font-face {
  font-family: 'Raleway';
  src: url('fonts/comfortaa_regular.woff2') format('woff2');
  unicode-range: U+0400–U+04FF; /* Unicode range for Cyrillic characters */
}

Typesetting on the web

Authors should language-tag their content accurately for the best typographic behaviour.

—CSS Text Module Level 3

<!doctype html>
<html lang="en">

<p>비비는 오는 24일 오후 1시 더블 싱글 형태로 '모토스피드 24시(<span lang="en">Motospeed 24</span>)'와 '불륜(<span lang="en">Sweet Sorrow of Mother</span>)' 2곡을 공개한다.</p>

Browsers do have a number of sensible typographic defaults out-of-the-box and it hinges on us telling the browser what language our content is written in. This is important because language and writing system conventions affect lots of typographic effects like line breaking, hyphenation, justification, glyph selection and more.

For CSS, language-specific typographic tailorings are only applied when the content language is explicitly declared. So it is in our best interest to tell the browser exactly what language our content is in to ensure a higher quality typographic experience for our users.

Usually, you would set the language of your content on the HTML element itself, but if there are phrases or sentences in other languages, those should be appropriately tagged as well.

CSS font properties

`font-family`	specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
`font-size`	Indicates the desired height of the glyphs. Takes absolute or relative values.
`font-weight`	Specifies the weight of the glyphs in the font. Can use keywords or numerical values.
`font-style`	Allows italic or oblique faces to be selected.
`font-stretch`	Selects a normal, condensed or expanded face from a font family. Range spans over 9 keywords.
`font-size-adjust`	Adjusts the font-size to preserve the x-height of the first choice font.
`font-synthesis`	Controls whether user agents are allowed to synthesize bold or oblique font faces when missing.

`font-size-adjust`

See the Pen Demo of font-size-adjust by Chen Hui Jing (@huijing) on CodePen.

font-size-adjust is meant to address legibility issues. Faces with low x-heights may sometimes be less legible, especially when they are triggered as fallback fonts. We can set the value of this property to the aspect ratio of the first choice font. Any fallback fonts triggered will have their font-size adjusted to match this ratio.

`font-synthesis`

Image credit: Piotr Grochowski

font-synthesis is meant to address the issue of faux bolds and faux italics. Sometimes the true italic or heavier version of a font does not exist so the browser will try to compensate. Unfortunately, many designers have informed me that the end result isn't pretty. With this property, you can set a value of none, to tell the browser, it's fine, appreciate the effort, but no thanks.

`font-synthesis`

We use italics to emphasise words in English, 但是中文则是用着重号.

In the case of Chinese, synthesizing italics is not even necessary. Making this situation a good use-case for font-synthesis. Here I'm telling the browser leave the Chinese text alone even if the font style is being set to italic.

OpenType features

aalt
abvf
abvm
abvs
afrc
akhn
blwf
blwm
blws
calt
case
ccmp
cfar
cjct
clig
cpct
cpsp
cswh
curs
cv01 – cv99
c2pc
c2sc
dist
dlig
dnom
dtls
expt
falt
fin2
fin3
fina
flac
frac
fwid
half
haln
halt
hist
hkna
hlig
hngl
hojo
hwid
init
isol
ital
jalt
jp78
jp83
jp90
jp04
kern
lfbd
liga
ljmo
lnum
locl
ltra
ltrm
mark
med2
medi
mgrk
mkmk
mset
nalt
nlck
nukt
numr
onum
opbd
ordn
ornm
palt
pcap
pkna
pnum
pref
pres
pstf
psts
pwid
qwid
rand
rclt
rkrf
rlig
rphf
rtbd
rtla
rtlm
ruby
rvrn
salt
sinf
size
smcp
smpl
ss01
ss02
ss03
ss04
ss05
ss06
ss07
ss08
ss09
ss10
ss11
ss12
ss13
ss14
ss15
ss16
ss17
ss18
ss19
ss20
ssty
stch
subs
sups
swsh
titl
tjmo
tnam
tnum
trad
twid
unic
valt
vatu
vert
vhal
vjmo
vkna
vkrn
vpal
vrt2
vrtr
zero

Font feature properties

`font-kerning`	`font-variant-position`	`font-variant-position-ligatures`
`font-variant-numeric`	`font-variant-caps`	`font-variant-alternates`

These font feature properties are what gives developers access to things like swashes, ligatures, old-style numerals, as well as language-specific ones. However, there is a caveat. We can toggle them with CSS as long as the font supports them. So if the font does not have alternative ligatures, naturally, we cannot use them.

I would love for more type designers to include these properties in their fonts, even though it does add to the amount of effort required, because the end result is a much more aesthetic typographic experience on the web.

Prefined font variation properties like these cover more generic use-cases where you want to adjust kerning or ligatures and the like. But there are also more quirky possibilities that font designers can come up with specifically for a dynamic medium like the web.

`font-variation-settings`

Working with CSS

Optical Sizing

Softness

CSS for controlling line breaks

`line-break`	allows choosing various levels of “strictness” for line breaking restrictions
`word-break`	controls what types of letters are glommed together to form unbreakable “words”, causing CJK characters to behave like non-CJK text or vice versa
`hyphens`	controls whether automatic hyphenation is allowed to break words in scripts that hyphenate
`overflow-wrap`	allows the UA to take a break anywhere in otherwise-unbreakable strings that would otherwise overflow

Line breaking by Florian Rivoal @ dotCSS

There is a lot of nuance because word breaking works differently depending on the language we're typesetting for.

For example, English wraps at spaces. But for Japanese or Chinese characters, the break is per character, usually but not always. Because line breaks are prohibited before certain punctuation marks.

A number of Southeast Asian scripts, like Thai, are written without spaces between words, then text is wrapped at syllable boundaries in addition to word boundaries. We could keep going here.

There is a lot of logic going on behind the scenes to determine exactly where a break should occur because some of these rules take precedence over others, then there's this other property called white-space that might also affect things. The point I'm trying to make is that, it's complicated.

The complexity of line-breaking

Cats use their long tails to balance themselves when they’re jumping or walking along narrow ledges.

고양이는 좁은 가장자리를 따라 달리거나 걸을 때 균형을 잡기 위해 긴 꼬리를 사용합니다.

当猫在狭窄的壁架上跳跃或行走时，它们会用长尾巴来平衡自己。

Katzen nutzen ihren langen Schwanz, um beim Springen oder Laufen über schmale Felsvorsprünge das Gleichgewicht zu halten.

แมวใช้หางยาวเพื่อทรงตัวเมื่อกระโดดหรือเดินไปตามหิ้งแคบๆ

But just to have an idea of these work. word-break specifies soft wrap opportunities between characters. Setting break-all means that you can drop to the next line at any point just to fit the space. While keep-all prevents any breakage between adjacent characters at all.

hyphens are more applicable to the Latin-based scripts where we commonly see words broken up between lines at syllable boundaries. For this to work correctly, you must have the lang attribute set, because the browser relies on dictionaries to determine where the syllable boundary is.

overflow-wrap is more relevant for really long words, or even URLs, so let's resize this more extremely. Setting this to anywhere will break a really long word when there is no space left. Whereas word-break: break-all will break the word regardless of space.

Another value for overflow-wrap is break-word, and is of consequence when you set the width of your content to a value called min-content.

min-content is the amount of space needed for the longest unbreaking word in a run of text. So this differs based on the nature of the script you're dealing with. If you set the value to break-word, it affects how the browser recognises how wide min-content should be.

New CSS: `text-wrap`

Cats use their long tails to balance themselves when they’re jumping or walking along narrow ledges.

고양이는 좁은 가장자리를 따라 달리거나 걸을 때 균형을 잡기 위해 긴 꼬리를 사용합니다.

当猫在狭窄的壁架上跳跃或行走时，它们会用长尾巴来平衡自己。

Katzen nutzen ihren langen Schwanz, um beim Springen oder Laufen über schmale Felsvorsprünge das Gleichgewicht zu halten.

แมวใช้หางยาวเพื่อทรงตัวเมื่อกระโดดหรือเดินไปตามหิ้งแคบๆ

Websites do NOT have to look the same in every browser.

Which brings me to an important point about CSS that I would like everyone to internalise. CSS are browser features. You know how when you update apps on your phone, you get something new? Same goes when you update your browser. Sometimes you get new CSS.

The sort of downside is that, browsers don't all support the newest features at the same time in the beginning, so you'd have a bit of a mixed bag when something is released for the first time. But that's fine, it's just the nature of the medium.

If you're a designer, my personal opinion is that, you can help your developers out by viewing the page on as many different devices or browsers as possible and letting them know if something looks broken. Now broken and “looks different” are completely separate issues.

It does not matter if the design looks different on different devices and browsers as long as it doesn't look broken.

The leading problem

New CSS: `text-box-*`

Cats use their long tails to balance themselves when they’re jumping or walking along narrow ledges.

고양이는 좁은 가장자리를 따라 달리거나 걸을 때 균형을 잡기 위해 긴 꼬리를 사용합니다.

当猫在狭窄的壁架上跳跃或行走时，它们会用长尾巴来平衡自己。

Katzen nutzen ihren langen Schwanz, um beim Springen oder Laufen über schmale Felsvorsprünge das Gleichgewicht zu halten.

แมวใช้หางยาวเพื่อทรงตัวเมื่อกระโดดหรือเดินไปตามหิ้งแคบๆ

This particular CSS is even newer and is still subject to changes. It's only available in Safari Technology Preview right now, so I'm going to switch browsers again.

This property allows you to remove the leading whitespace from a block of text and give you a clean text box which hugs your text. Its different values allows us more fine-grained control over the spacing between lines.

Practically speaking, the most common complain I get from designers is that the text of a button isn't exactly at the centre of the button. This is a feature that could potentially resolve this issue.

For example, you could set the text-box-edge to cap, and text-box-trim to both to make it obvious, and you can see that the spaces are now completely cut off, and the border is hugging your text tightly.

For scripts that do not have cap-heights or ex-heights, different values are required. Like ideographic, but it doesn't seem to be fully implemented yet.

The interruption problem

CSS Rhythmic Sizing discussion threads

References

W3C CSS homepage
Adrian Frutiger – Typefaces: The Complete Works
Digiset 50 T 1
A brief overview of developments in digital type design
Fundamentals of modern photo-composition
The Adobe Originals Silver Anniversary Story: Typographic Tales from Japan
Line breaking by Florian Rivoal @ dotCSS
Leading-Trim: The Future of Digital Typesetting
CSS Text Box Trim examples
CSS Line Layout and Vertical Rhythm by Elika J. Etemad @ dotCSS
CSS working group discussion threads

Thank you

https://chenhuijing.com

@hj_chen

@huijing

@huijingchen

Font is Work Sans by Wei Huang and Bagnard by Sebastien Sanfilippo.

Working with CSS doesn’t have to make you cry

Cascading Style Sheets

Font formats for web use

Abridged explanation of the web (1)

Abridged explanation of the web (2)

Subsetting web fonts

Variable fonts

Incremental Font Transfer

@font-face rule

Typesetting on the web

CSS font properties

font-size-adjust

font-synthesis

font-synthesis

OpenType features

Font feature properties

font-variation-settings

CSS for controlling line breaks

The complexity of line-breaking

New CSS: text-wrap

The leading problem

New CSS: text-box-*

The interruption problem

References

Thank you

`font-size-adjust`

`font-synthesis`

`font-synthesis`

`font-variation-settings`

New CSS: `text-wrap`

New CSS: `text-box-*`