Type Is Design: Fix your UI With Better Typography & CSS

FIX YOUR UI WITH BETTER TYPOGRAPHY & CSS JOHN ATHAYDE
@johnathayde RAILSCONF 2021

http://www. fl ickr.com/photos/michael-seljos/2073146716/

TYPE IS DESIGN FIX YOUR UI WITH BETTER TYPOGRAPHY &
CSS JOHN ATHAYDE | @johnathayde

METICULOUS

CSS JOHN ATHAYDE | @johnathayde https://www.pixelstech.net/article/1313756405-Web-Design-is-95%25-Typography — Oliver Reichenstein

CSS JOHN ATHAYDE | @johnathayde The quick brown fox jumped over the lazy dog. HELVETICA NEUE

CSS JOHN ATHAYDE | @johnathayde The quick brown fox jumped over the lazy dog. COMIC SANS

CSS JOHN ATHAYDE | @johnathayde The quick brown fox jumped over the lazy dog. IMPACT

CSS JOHN ATHAYDE | @johnathayde The quick brown fox jumped over the lazy dog. SNELL ROUNDHAND

CSS JOHN ATHAYDE | @johnathayde The quick brown fox jumped over the lazy dog. BRANDON PRINTED TWO

CSS JOHN ATHAYDE | @johnathayde The Quick Brown Fox JUMPED OVER THE LAZY DOG GOTHAM CHRONICLE DISPLAY

CSS JOHN ATHAYDE | @johnathayde The quick brown fox jumped over the lazy dog.

CSS JOHN ATHAYDE | @johnathayde The Quick Brown Fox JUMPED OVER THE LAZY DOG GOTHAM CHRONICLE DISPLAY

CSS JOHN ATHAYDE | @johnathayde 1 2 3 HISTORY OF TYPE LEARNING TYPE & THE WEB APPLYING TO OUR APPS

CSS JOHN ATHAYDE | @johnathayde A BRIEF HISTORY OF EVERYTHING (TYPOGRAPHIC)

CSS JOHN ATHAYDE | @johnathayde https://en.wikipedia.org/wiki/History_of_writing#/media/File:Development_of_writing.jp

CSS JOHN ATHAYDE | @johnathayde https://clevelandart.org/art/1942.152, CC0, https://commons.wikimedia.org/w/index.php?curid=77629894

CSS JOHN ATHAYDE | @johnathayde NYC Wanderer (Kevin Eng) - originally posted to Flickr as Gutenberg Bible, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=9914015

CSS JOHN ATHAYDE | @johnathayde By Daniel Ullrich, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=4141776 By Willi Heidelbach, CC BY 2.5, https://commons.wikimedia.org/w/index.php?curid=154912

CSS JOHN ATHAYDE | @johnathayde “Typography”

CSS JOHN ATHAYDE | @johnathayde Typeface Font A collection of glyphs, often referred to as a font family Speci fi c weight, size, and size of a typeface

CSS JOHN ATHAYDE | @johnathayde GILL SANS ADOBE JENSON

CSS JOHN ATHAYDE | @johnathayde ADOBE JENSON GARAMOND PREMIERE BODONI 72 CLARENDON

CSS JOHN ATHAYDE | @johnathayde HELVETICA FUTURA GILL SANS

CSS JOHN ATHAYDE | @johnathayde FETTE FRAKTUR OPERATOR FONT AWESOME HOEFLER ORNAMENTS

CSS JOHN ATHAYDE | @johnathayde Used for emphasis, foreign language words and phrases, titles of fi lms, books, magazines, etc. and written dialogue to show thought vs spoken words. SURVEYOR DISPLAY LIGHT

CSS JOHN ATHAYDE | @johnathayde https://www.marksimonson.com/notebook/view/FakevsTrueItalics

CSS JOHN ATHAYDE | @johnathayde https://graphicdesign.stackexchange.com/questions/75965/distinguishing-real-and-faux-bold-and-italics

CSS JOHN ATHAYDE | @johnathayde Tracking vs Kerning T R A C K I N G MUSEO SANS

CSS JOHN ATHAYDE | @johnathayde Tracking vs Kerning https://blog.creatopy.com/kerning-typography/

CSS JOHN ATHAYDE | @johnathayde Kerning in CSS & JS

CSS JOHN ATHAYDE | @johnathayde 100 200 300 400 500 600 700 800 900 normal bold thin extra-light / ultra-light light book / regular / roman medium semi-bold / demi-bold bold extra-bold / ultra-bold black / heavy https://drafts.csswg.org/css-fonts/#font-weight-numeric-values Font Weights & Common Names

CSS JOHN ATHAYDE | @johnathayde https://drafts.csswg.org/css-fonts/#font-weight-numeric-values Font Weights: Missing Weights When a weight is missing, it will substitute a nearby weight.

CSS JOHN ATHAYDE | @johnathayde Font Weights: Space Between Good rule: Separate by at least one weight. 300 400 500 100 400 700

CSS JOHN ATHAYDE | @johnathayde Font Stretch Traditionally separate typefaces in one family.

CSS JOHN ATHAYDE | @johnathayde https://css-tricks.com Font Scaling

CSS JOHN ATHAYDE | @johnathayde https://www.modularscale.com Font Scaling Traditional Print Scale 8pt 9pt 10pt 12pt 14pt 18pt 24pt 36pt 48pt 72pt Golden Ratio Scale 13/23 16/27 20/33 26/42 33/52 42/65 Arial 16px @ 600px width (Font size/line height in px) Modular Scale 0.296em 0.444em 0.667em 1em 1.5em 2.25em 3.375em 5.063em 7.594em 11.391em https://grtcalculator.com/

CSS JOHN ATHAYDE | @johnathayde Widows & Orphans https://indesignskills.com/tutorials/widows-and-orphans/

CSS JOHN ATHAYDE | @johnathayde Widows & Orphans (+ hyphenation) • Don’t hyphenate more than 3 consecutive lines • Orphans says the minimum number of lines left on a page • Widows is the minimum number of lines. • Mostly important for print css • Not exactly the same as in print applications like InDesign.

CSS JOHN ATHAYDE | @johnathayde — Tobias Frere-Jones

CSS JOHN ATHAYDE | @johnathayde Legibility refers to how easily we can recognize a typeface. Speci fi cally, how easy it is to discern the letters and distinguish them from each other—as in an eye exam. — French, Nigel. InDesign Type; Professional Typography with Adobe InDesign, Fourth Edition Readability refers to the ease with which we comprehend text by recognizing words and phrases as shapes. It is a product of how the type is set and the responsibility of the typographer.

CSS JOHN ATHAYDE | @johnathayde InDesign Type; Professional Typography with Adobe InDesign, Fourth Edition — Nigel French

CSS JOHN ATHAYDE | @johnathayde • Leading/line-height • Measure (length of line) • Alignment (left/center/justify) • Margins • Medium (print, web, mobile) • Reading conditions Factors affecting readability

CSS JOHN ATHAYDE | @johnathayde —David Carson

CSS JOHN ATHAYDE | @johnathayde Picking Fonts for Screen Medium weight Stroke modulation Serif or Sans? Enlarged apertures X-height Embeddable license if needed (app, epub) Rules from Nigel French

CSS JOHN ATHAYDE | @johnathayde It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way—in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way—in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way—in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only. Open Sans 30 / 39 More Pro 30 / 39 Times New Roman 30 / 39

CSS JOHN ATHAYDE | @johnathayde Surveyor Text Book Small Caps Surveyor Display Light Surveyor Text Book Italic Gotham Book Small Caps Gotham Narrow Black Gotham Book Italic

CSS JOHN ATHAYDE | @johnathayde Gotham Bold Small Caps Surveyor Display Light Gotham Book Italic Surveyor Text Book Small Caps Gotham Narrow Black Surveyor Text Book Italic

CSS JOHN ATHAYDE | @johnathayde https://www.typography.com/blog/tag/Pairing%20Fonts

CSS JOHN ATHAYDE | @johnathayde https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face @font-face

CSS JOHN ATHAYDE | @johnathayde Google Fonts/Externally Hosted

CSS JOHN ATHAYDE | @johnathayde Pre-Rails 6 con fi g/application.rb:

CSS JOHN ATHAYDE | @johnathayde font-url/font-path Somewhere inside your SCSS:

CSS JOHN ATHAYDE | @johnathayde DRY it up

CSS JOHN ATHAYDE | @johnathayde Webpacker

CSS JOHN ATHAYDE | @johnathayde https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/ OpenType_fonts_guide The Source. (Well, it’s easier to read than the actual W3C Spec)

CSS JOHN ATHAYDE | @johnathayde Number Types Tabular Lining Tabular Old Style Proportional Old Style Proportional Lining

CSS JOHN ATHAYDE | @johnathayde Number Types

CSS JOHN ATHAYDE | @johnathayde “Text Transform” https://techstacker.com/fake-small-caps-vs-real-small-caps/

CSS JOHN ATHAYDE | @johnathayde “Text Transform”

CSS JOHN ATHAYDE | @johnathayde Ex Ponto Pro Contextual Alternatives Poem Script Sample from https://www.fontshop.com/families/poem-script

CSS JOHN ATHAYDE | @johnathayde DIN Pro Contextual Alternatives

CSS JOHN ATHAYDE | @johnathayde Ligatures Adobe Jenson Pro

CSS JOHN ATHAYDE | @johnathayde Enabling ligatures & contextual alternates

CSS JOHN ATHAYDE | @johnathayde Stylistic Sets “Stylistic sets are a feature that makes it easier to use a font’s alternate characters. Instead of leaving it to the user to manually replace every incidence of a character with a desired alternate — replacing a lowercase A with an alternate form, for example — typeface designers can add a stylistic set to a font that allows users to select an entire range of text, and apply this one kind of substitution.” https://www.typography.com/faq/157

CSS JOHN ATHAYDE | @johnathayde Stylistic Sets

CSS JOHN ATHAYDE | @johnathayde Grid Systems

CSS JOHN ATHAYDE | @johnathayde — Josef Müller-Brockmann

CSS JOHN ATHAYDE | @johnathayde What is a baseline grid?

CSS JOHN ATHAYDE | @johnathayde Hard PX vs EM

CSS JOHN ATHAYDE | @johnathayde https://madebymike.github.io/html5-periodic-table/

CSS JOHN ATHAYDE | @johnathayde https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

CSS JOHN ATHAYDE | @johnathayde https://github.com/wearebraid/griddle

CSS JOHN ATHAYDE | @johnathayde First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009

CSS JOHN ATHAYDE | @johnathayde First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009 First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009

CSS JOHN ATHAYDE | @johnathayde First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009 First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009 First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009

CSS JOHN ATHAYDE | @johnathayde First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009 John Athayde A Designer & Permaculturist from Charlottesville, Virginia Member since 14 Dec 2009 John Athayde A Designer & Permaculturist from Charlottesville, Virginia Member since 14 Dec 2009

CSS JOHN ATHAYDE | @johnathayde John Athayde A Designer & Permaculturist from Charlottesville, Virginia Member since 14 Dec 2009 John Athayde A Designer & Permaculturist from Charlottesville, Virginia Member since 14 Dec 2009

CSS JOHN ATHAYDE | @johnathayde It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way—in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only. FOUT Flash of Unstyled Text

CSS JOHN ATHAYDE | @johnathayde It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way—in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of FOUT Flash of Unstyled Text

CSS JOHN ATHAYDE | @johnathayde “Skeleton Screens” Courtesy Joe Johnston / @merhl https://twitter.com/merhl/status/694259963225587712

CSS JOHN ATHAYDE | @johnathayde • Leading/line-height • Measure (length of line) • Alignment (left/center/justify) • Margins • Medium (print, web, mobile) • Reading conditions Factors affecting readability Refresher!

CSS JOHN ATHAYDE | @johnathayde Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of fi cia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of fi cia deserunt mollit anim id est laborum.

CSS JOHN ATHAYDE | @johnathayde Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of fi cia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of fi cia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of fi cia deserunt mollit anim id est laborum. Measure 60 100 130 Target: ~75 characters

CSS JOHN ATHAYDE | @johnathayde Measure

CSS JOHN ATHAYDE | @johnathayde Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of fi cia deserunt mollit anim id est laborum. Measure + Line-height Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui of fi cia deserunt mollit anim id est laborum.

CSS JOHN ATHAYDE | @johnathayde Legibility Georgia Charcuterie Block

CSS JOHN ATHAYDE | @johnathayde Responsive/Fluid Type https://piccalil.li/tutorial/ fl uid-typography-with-css-clamp

CSS JOHN ATHAYDE | @johnathayde Hard to read Better Highest Contrast Hard to read Better Contrast/Figure-Ground

CSS JOHN ATHAYDE | @johnathayde (white space)

CSS JOHN ATHAYDE | @johnathayde Label Label Form field length hinting

CSS JOHN ATHAYDE | @johnathayde It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way—in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of Paragraph & Character • Paragraph styles a ff ect entire block one at a time. We’d apply this to the ‘p’ tag, typically. • Character styles are inline elements, and help create uniformity across large chunks of text (or multiple articles)

CSS JOHN ATHAYDE | @johnathayde Start with a base

CSS JOHN ATHAYDE | @johnathayde <span class=“YES!!!”> abbr, i, b, strong, em, dfn, cite, time And many more!

CSS JOHN ATHAYDE | @johnathayde Where to Begin?

CSS JOHN ATHAYDE | @johnathayde https://getbootstrap.com/docs/5.0/content/typography/

CSS JOHN ATHAYDE | @johnathayde @font-feature-values https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values

CSS JOHN ATHAYDE | @johnathayde Web Browser Support for Color Fonts Support Supported formats Comments Microsoft Edge SVG SBIX COLR CBDT Since version 38 on Windows 10 Safari SVG SBIX COLR Since version 12, macOS 10.14 & iOS 12 Firefox SVG COLR Since version 26 Chrome COLR CBDT Internet Explorer COLR Only on Windows 8.1 Opera COLR Only on Windows Source: www.colorfonts.wtf

CSS JOHN ATHAYDE | @johnathayde • Harder to read/accessibility concerns • Massive fi le size to load the entire font (one weight) • Poor cross-browser support • Color scheme encoded into the font Downsides of Color Fonts

CSS JOHN ATHAYDE | @johnathayde www.power fl eet.com www.meticulous.com www.developerux.com @johnathayde [email protected] GitHub.com/jathayde/type_is_design

Type Is Design: Fix your UI With Better Typogra...

Type Is Design: Fix your UI With Better Typography & CSS

More Decks by John Athayde

Other Decks in Design

Featured

Transcript