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 */
}
Decovar
Discontinuous changes are possible
JAVA Table Water
font-kerning: ;
letter-spacing:0em;
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.
Kerning: Spacing between pairs of letters (kern OT feature)
Tracking: Overall spacing adjustment (+/-)
Leading: Spacing between (base)lines of text
Sphinx 0
↕ 1em
↕ 1ex
↔ 1ch
“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 Resume Padding, 2014
Ben Bitdiddle
Education
MIT, Cambridge, MA (2013–2016)
Publications
“7×8: A harder — and subtler — problem than previously recognized.” Journal of Resume 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
