Can typography encourage long-form reading—not just scanning? What are the most exciting areas of cutting-edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content? Three experts—Mozilla’s Jen Simmons, publication design legend Roger Black, and ALA’s Jeffrey Zeldman—discuss typography and layout on today’s web: where we are now, and where we’re going.
Källa: Web Typography & Layout: Past, Present, and Future
A post by Zach Leatherman (zachleat), a Front End Engineer.
En riktig djupdykning i hur man kan visa typsnitt och typografisk behandling på webben och i mobil: A Comprehensive Guide to Font Loading Strategies—zachleat.com
Variable fonts are a new font format offering unprecedented flexibility. They will be landing in web browsers and native operating systems within 12 months. Learn how to try them out now.
Källa: Getting started with variable fonts | Clagnut
An introduction to the inline formatting context. Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it with CSS.
Läs och begrunda: Deep dive CSS: font metrics, line-height and vertical-align – Vincent De Oliveira
What we learned (TL;DR):
- inline formatting context is really hard to understand
- all inline elements have 2 height:
- the content-area (based on font metrics)
- the virtual-area (
- none of these 2 heights can be visualize with no doubt. (if you’re a devtools developer and want to work on this, it could be awesome)
line-height: normal is based on font metrics
line-height: n may create a virtual-area smaller than content-area
vertical-align is not very reliable
- a line-box’s height is computed based on its children’s
- we cannot easily get/set font metrics with CSS
- there is a related future spec to help with vertical alignment: the Line Grid module
Presenting beautiful type on your website nowadays could not be easier. With popular web font services such as Adobe Typekit, Google Fonts, and Hoefler &Co.’s Cloud.typography, getting web-ready typefaces to display on a site is as simple as adding one line of markup. Unlike the old days of web design when all you had to work with were a handful of default system fonts (Arial, Verdana, Helvetica, Georgia, and Times New Roman), now you have thousands of fonts to choose from. However, with too many choices at your disposal, the process of selecting and combining typefaces can be time-consuming, overwhelming, and intimidating.
Fortsätt läsa Professional Web Typography by Donny Truong
Type Rendering Mix is useful in many situations. Let’s say you are using Proxima Nova on your website. Below you can see how the “thin” weight will look in OS X and Windows 7. Due to the way the Core Text rasterizer works, fonts will look heavier on OS X and iOS than on other platforms.
Type Rendering Mix.