- Character
- a codepoint, with properties
- Glyph
- visual representation of character(s)
é
character(s), glyph(s), font(s)
Myriad Pro <— Font family
- <— Faces
- Light
- Roman
- Bold
- Black
- Italic
- Condensed
Baskerville <— Font family
- <— Faces
- Roman
- Semibold
- Bold
- Italic
- Descriptors
- describe individual font faces
- Properties
- requests for styling
Properties & descriptors
@font-face {
font-family: Arvo; /* Descriptor */
src: url(fonts/s.woff); /* Descriptor */
font-weight: bold; /* Descriptor */
}
h1 {
font-family: Arvo; /* Property */
font-weight: bold; /* Property */
}
Font stacks
First font with glyphs for a given character is used
Problem: avoiding bad Latin glyphs in Japanese fonts
@font-face {
font-family: Demo;
src: url(Latin.woff), url(Japanese.woff);
}
Both fonts can’t be first!
- unicode-range
- Descriptor for allowed range of Unicode characters
@font-face {
font-family: 'Headings';
src: url(fonts/Japanese.woff);
unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
/* yen, kanji, hiragana, katakana */
}
unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
I'm really sorry about the unicode-range syntax. :(
What was I thinking?!
- This & That
- no need for extra elements
- U+26
- Use just the ampersand
- Regular WebFonts
- download 37 separate font files
- Variable fonts
- download one variable font
- interpolate along design axes
Registered variation axes
| Axis tag |
Name |
| 'ital' |
Italic |
| 'opsz' |
Optical size |
| 'slnt' |
Slant |
| 'wdth' |
Width |
| 'wght' |
Weight |
/* select position on each axis */
font-variation-settings:
"wght" 2.4,
"wdth" .7,
"opsz" 32;
Quick question
font-weight: 400;
font-weight: calc(9 * 100);
- CSS3 font-weight
- Number-like strings "100" "200" etc
- CSS4 font-weight
- a number from 1 to 999
/* properties select position on each axis */
font-weight: 362; /* fairly light */
font-stretch: 70; /* condensed */
font-optical-sizing: auto
Using registered variation axes
| Axis tag |
Name |
Property/Descriptor |
| 'ital' |
Italic |
font-style |
| 'opsz' |
Optical size |
font-optical-sizing |
| 'slnt' |
Slant |
font-style |
| 'wdth' |
Width |
font-stretch |
| 'wght' |
Weight |
font-weight |
- Kairos Sans 300
- Kairos Sans 800
- Kairos Sans
@font-face {
font-family: "Dunbar";
src: url("dunbar.otf");
font-weight: 100 900;
font-stretch: 50% 200%;
font-style: -10deg 40deg;
}
h1 {
font-weight: 234;
font-stretch: 80%;
font-style: oblique 24deg;
font-optical-sizing: none;
}
/* Supported Safari (TP 16+), Firefox 62 & Chrome 62 */
font-variation-settings:"wght" 2.4, "wdth" .7, "radi" .4;
@keyframes expand {
from { font-variation-settings: 'radi' .3 }
to { font-variation-settings: 'radi' 3.1; }
}
@font-face {
/* By David Berlow */
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 */
}
De
co
var
This may be the most
significant development for design
on the web since responsive design itself
—Jason Pamental
