A presentation at Web Directions Summit in in Sydney NSW, Australia by Mandy Michael
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
Text content forms the foundation of everything we do on the web, it doesn’t matter if you are building an admin system, a marketing website, or a product, you will have to work with text. CSS and font specifications have evolved, so whether you are scaling, wrapping, responding or designing something to make an impact, there are many practical, responsible and fun solutions for working with text based content on the web.
We’ll look at modern approaches and technical solutions for working with text, including variable fonts, css text tricks and features for the serious or party side of your projects. You’ll learn techniques that will help you build flexible and maintainable content right now and explore some of the exciting developments to look out for in the future.
Here’s what was said about this presentation on social media.
for free. You
can too.