Controlling, designing and improving Text on the web

Improving TEXT ON THE WEB. @mandy_kerr

MANDY MICHAEL @mandy_kerr

@mandy_kerr

Improving TEXT ON THE WEB. @mandy_kerr

Choosing THE RIGHT TYPE. @mandy_kerr

HEADINGS ABBREVIATION LINK PARAGRAPH EMPHASIS TIME ORDERED LIST SUPERSCRIPT D E F I N I T I O N L I ST CA P T I O N BLOCKQUOTE UNORDERED LIST PRE-FORMATTED DEFINITION @mandy_kerr

Using FONTS ON THE WEB @mandy_kerr

Looking at VARIABLE FONTS @mandy_kerr

Variable font file Individual font files a a a a a a a a a a a a @mandy_kerr

Weight Axis Interpolated weights Named Instance @mandy_kerr

@mandy_kerr

Source Sans Pro WOFF2 file size Single weight 111kb Variable font 112kb @mandy_kerr

When we are not limited by technical considerations, creativity can determine our choices. @mandy_kerr

More Accessible fonts https://www.lexend.com/

@mandy_kerr

@mandy_kerr

@mandy_kerr

Get fancy with COLOUR FONTS @mandy_kerr

Rocher Color, Henrique Beier @mandy_kerr

font-palette @font-palette-values “—blue { base-palette: 7; } h1 { font-family: Rocher; font-palette: “—blue; } @mandy_kerr

@mandy_kerr

font-palette @font-palette-values “—jello { override-colors: 0 #94b95e, 1 #eb1a7d, 2 #5f0552, 3 #f556d6; } h1 { font-family: Rocher; font-palette: “—jello; } @mandy_kerr

Nabla, Typearture @mandy_kerr

Reem Kufi Ink @mandy_kerr

Variable Color Initials by Typearture @mandy_kerr

Noto color emoji @mandy_kerr

Interesting FONT PROPERTIES @mandy_kerr

Better numbers with FONT-VARIANT-NUMERIC @mandy_kerr

font-variant-numeric font-variant-numeric: slashed-zero; 1234567890 font-variant-numeric: lining-nums; font-variant-numeric: tabular-nums; font-variant-numeric: oldstyle-nums; 988,826.09 font-variant-numeric: diagonal-fractions; font-variant-numeric: stacked-fractions; font-variant-numeric: ordinal; 1st 2nd 3rd @mandy_kerr

font-variant-numeric lining-nums Baseline tabular-nums oldstyle-nums 988,826.09 @mandy_kerr

oldstyle-nums tabular-nums Consect Ornare Consect Tortor Ornare Tortor Lorem 1450.09 1450.09 1235.30 Lorem 1450.09 763.09 32.5 Ipsum 2331.98 32.30 324.98 Ipsum 2331.98 32.30 324.98 Dolor 32.50 4456.49 2356.20 Dolor 32.50 4456.49 2356.20 Jello 146.43 212.49 3423.19 Jello 146.43 212.49 3423.19 @mandy_kerr

Lining nums Tabular mums @mandy_kerr

font-variant-numeric none diagonal-fractions Font: Surveyor: www.typography.com/fonts/surveyor/overview stacked-fractions @mandy_kerr

font-variant-numeric font-variant-numeric: tabular-nums diagonal-fractions; @mandy_kerr

font-variant-numeric font-feature-settings: frac; font-variant-numeric: diagonal-fractions; https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric @mandy_kerr

Better characters with FONT-VARIANT-LIGATURES @mandy_kerr

font-variant-ligatures font-variant-ligatures: none; font-variant-ligatures: normal; font-variant-ligatures: common-ligatures; font-variant-ligatures: no-common-ligatures; font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: no-discretionary-ligatures; font-variant-ligatures: historical-ligatures; font-variant-ligatures: no-historical-ligatures; font-variant-ligatures: contextual; font-variant-ligatures: no-contextual; @mandy_kerr

font-variant-ligatures font-variant-ligatures: common-ligatures; fluffy fluffy none common-ligatures @mandy_kerr

font-variant-ligatures font-feature-settings: “liga” 1; font-variant-ligatures: common-ligatures; https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures @mandy_kerr

Getting fancy with FONT-VARIANT-ALTERNATES @mandy_kerr

font-variant-alternates font-variant-alternates: historical-forms; font-variant-alternates: stylistic(); font-variant-alternates: stylesheet(); font-variant-alternates: character-variant(); font-variant-alternates: ornaments(); font-variant-alternates: swash(); @mandy_kerr

@mandy_kerr

font-variant-alternates @font-feature-values “MonteCarlo” { @swash { swsh: 1; } } .fancy-font { font-variant-alternates: swash(swsh); } @mandy_kerr

font-variant-alternates none font-variant-alternates: swash(swsh); @mandy_kerr

font-variant-alternates font-feature-settings: “swsh” 1; font-variant-alternates: swash(swsh); https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates @mandy_kerr

https://codepen.io/mandymichael/pen/MWXpzMJ @mandy_kerr

@mandy_kerr @mandy_kerr

The Complete CSS Demo for OpenType Features twitter.com/tunghsiao sparanoid.com/lab/opentype-features @mandy_kerr

Exploring available TEXT PROPERTIES @mandy_kerr

Understanding INLINE/BLOCK DIRECTION. (previously horizontal vs vertical) @mandy_kerr

Inline Direction: left to right Vivamus ut dolor nec dolor aliquam scelerisque quis et nisl. Donec in ipsum eget tortor elementum bibendum. Block Direction: Top to Bottom Sed interdum nec neque eget pretium. Sed sit amet risus felis. Sed molestie leo id diam dignissim efficitur. Mauris a finibus lectus. Donec a ullamcorper ante. Suspendisse scelerisque odio augue, vitae venenatis nisl posuere a. Sed bibendum sem vitae lorem maximus mattis. @mandy_kerr

‫‪Inline Direction: Right to left‬‬ ‫تحركت أم‪ ,‬لها في كانتا التجارية‪.‬‬ ‫بـ بعد كرسي أل ّم طوكيو‪ ,‬عدد إذ جنوب ألداء‪ .‬وتم حقول ّ‬ ‫بالرد بمعارضة االنجليزية أخر بـ‪ .‬بل‬ ‫من قادة التقليدي األمريكية يكن‪ ,‬ثم لعدم الواقعة شيء‪ّ ,‬‬ ‫تسمى الطريق‪ ,‬كما عن اعتداء الصفحة‪ .‬وصل قد املحيط‬ ‫عدد الجو غريمه إتفاقية‪ .‬ما بحق‬ ‫ّ‬ ‫‪.‬الثقيل‪ ,‬جهة تم غضون اليابان الرئيسية‪ .‬مرمى النفط لكل عن‪ ,‬وقد فهرست اإلمتعاض لم‬ ‫و بعض املدن والعتاد‪ ,‬إستعمل بقيادة ا بـ دنو‪ .‬قام سكان وزارة ممثّلة أي‪ ,‬بال ‪ ٣٠‬دأبوا عرفها‬ ‫أعمال‪ .‬بل سكان إعادة أدوات حدى‪ .‬مما لم جنوب أعمال وق ّدموا‪ ,‬بني تاريخ كانتا الهادي هو‪.‬‬ ‫‪.‬لها قد النفط املضي‪ ,‬بها قررت لليابان وانتها ًء ما‬ ‫‪@mandy_kerr‬‬ ‫‪Block Direction:‬‬ ‫‪Top to Bottom‬‬

Block Direction: left to right Inline Direction: Top to Bottom @mandy_kerr

text-align Little mellow Jello, you squishy little fellow. text-align: left; ‫ قام سكان‬.‫ إستعمل بقيادة ا بـ دنو‬,‫و بعض املدن والعتاد‬ ‫ بل سكان إعادة‬.‫ دأبوا عرفها أعمال‬٣٠ @mandy_kerr

Example of LOGICAL PROPERTIES @mandy_kerr

logical properties Little mellow Jello, you squishy little fellow. text-align: start; ‫ قام سكان‬.‫ إستعمل بقيادة ا بـ دنو‬,‫و بعض املدن والعتاد‬ ‫ بل سكان إعادة‬.‫ دأبوا عرفها أعمال‬٣٠ @mandy_kerr

Making use of SPACING ELEMENTS @mandy_kerr

word-spacing word-spacing: 0.5em; Dap ibus Inceptos Cons ctetur word-spacing: -0.5em; DapibusInceptosConsctetur word-spacing: normal; Dap ibus Inceptos Cons ctetur @mandy_kerr

letter-spacing letter-spacing: 0.5em; letter-spacing: -0.15em; letter-spacing: normal; J e l l o i s a f l u f f y f e l l o w Jelloisafluffyfellow Jello is a fluffy fellow @mandy_kerr

line-height Cras justo odio, dapibus ac facilisis in, line-height: 0.5; egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor. line-height: -0.5; Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor. @mandy_kerr

Household Outdoors New Kitchen Kids & Games Shop By Price

Household Outdoors Kitchen New Kids & Games Shop By Price Xmas SALE

Household Outdoors Kitchen NewKids & Games Shop By Price Xmas SALE

@mandy_kerr

28px Jello is a fluffy fellow 28px Little fluffy Jello, the little mellow fellow, little yellow Jello, eating my marshmallow. Your little squishy face, and floopy little ears. Little floofy Jello, always here to say hello. @mandy_kerr

Jello is a fluffy fellow Jello is a fluffy fellow @mandy_kerr

Leading Jello is a fluffy fellow @mandy_kerr

leading-trim (Draft spec) Cap Height Jello is a fluffy fellow Ideographic baseline h1 { leading-trim: cap ideographic; } https://github.com/w3c/csswg-drafts/issues/3240 @mandy_kerr

Creating lines with TEXT-DECORATION @mandy_kerr

text-decoration-color Jello Is A Fluffy Fellow text-decoration-color: yellow @mandy_kerr

text-decoration-thickness Jello Is A Fluffy Fellow text-decoration-thickness: 10px @mandy_kerr

text-decoration-thickness auto from-font @mandy_kerr

text-underline-offset Jello Is A Fluffy Fellow text-underline-offset: 15px; @mandy_kerr

@mandy_kerr

@mandy_kerr

@mandy_kerr

@mandy_kerr

Cleaner rendering with FONT SMOOTHING @mandy_kerr

font-smooth -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @mandy_kerr

Improving TEXT ON THE WEB. @mandy_kerr

Thanks & Resources… Font Types & Properties www.harbortype.com/fonts/rocher-color material.io/blog/color-fonts-are-here alistapart.com/article/web-typography-numerals www.typography.com/fonts/surveyor wakamaifondue.com developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures Text Properties usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/ github.com/google/fonts/issues/1170 developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness @mandy_kerr