Categories
A List Apart Accessibility Authoring Best practices CSS Design development HTML interface IXD Layout Markup Real type on the web Responsive Web Design Site Optimization Standards State of the Web The Essentials type Typography Usability User Experience UX W3C Web Design Web Design History Web Standards webtype

Web typography: a refresher and history

Many designers still think in px first when creating baseline styles. But we know intellectually that various relative typography approaches are better suited to our medium in all its complexity. Better for accessibility. Better for avoiding bizarre typographic disasters linked to user preference settings, device limitations, and the unforeseen ways our overwrought styles can interact with one another.

As I contemplate a long-overdue redesign of my own site, it’s worth taking a refreshing dip into what we’ve learned about web typography over the past 20+ years. From the pages of (where else?) A List Apart:

Bojan Mihelac: “Power to the People: Relative Font Sizes” (2004)

An early and simple creative solution for text resizing that respects users’ choices and also gives them an additional option for resizing despite the limitations of some of the most popular browsers of the day. Presented for its historical importance, and not as a how-to for today. https://alistapart.com/article/relafont/

Lawrence Carvalho & Christian Heilmann: “Text-Resize Detection” (2006)

Detect your visitors’ initial font size setting, and find out when they increase or decrease the font size. With this knowledge, you can create a set of stylesheets that adapt your pages to the users’ chosen font sizes, preventing overlapping elements and other usability and design disasters. Presented for its historical importance as an insight into the complex dancing we’ve done in the past to ensure readability. https://alistapart.com/article/fontresizing/

Richard Rutter: “How to Size Text in CSS“ (2007)

Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), provides accurate, resizable text across all browsers in common use today. An early move toward more responsive type and away from the accessibility problems created by setting text sizes in px in some browsers and devices. https://alistapart.com/article/howtosizetextincss/

Wilson Miner: Setting Type on the Web to a Baseline Grid

The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page. The magical end result is that all the text on your page lines up across all the columns, creating a harmonious vertical rhythm. https://alistapart.com/article/settingtypeontheweb/

Tim Brown: “More Meaningful Typography” (2011)

Introduces modular scales, the golden ratio of readable typography. Delivers accessibility plus aesthetic beauty derived from the math underlying all of creation. https://alistapart.com/article/more-meaningful-typography/

Tim Brown: “What is Typesetting?” (2018)

“We must now practice a universal typography that strives to work for everyone. To start, we need to acknowledge that typography is multidimensionalrelative to each reader, and unequivocally optional.” https://alistapart.com/article/flexible-typesetting/

Keep going…

For more web design community wisdom and web typography history, see Typography & Web Fonts in A List Apart, for people who make websites.

And in the Comments below, please share your favorite resources for creating websites that look great and read beautifully, no matter what technical and human capabilities get thrown at them.

Categories
"Digital Curation" Acclaim art direction creativity CSS Design Designers Ideas IXD Layout links mobile State of the Web Typography User Experience UX Web Design Web Design History Websites

Web Design Inspiration

If you’re finding today a bit stressful for some reason, grab a respite by sinking into any of these web design inspiration websites.

Gathered from conversations on Reddit and elsewhere, each site offers a collection of other sites’ designs, chosen for impact, originality, and innovation. Each collection should offer at least a few designs that will inspire your own ideas and creativity—and most contain more than a few. Lots more.

We make no claims as to usability, accessibility, or appropriateness of design. Which doesn’t mean that the chosen websites are unusable, inaccessible, or inappropriate to the brand, subject matter, or needs of the audience. Indeed, from the care devoted to the graphical interface, we assume that many of these sites are as good under the hood as they are on the surface. But it’s just an assumption; we haven’t tested, and the point of this post is purely to share visual and creative inspiration. Enjoy!

And for dessert…

Enjoy https://betteroff.studio/, an individual studio’s rhythmically organized, sensory-appealing design.

Categories
Accessibility Adobe Advocacy AIGA art direction Authoring Bandwidth Best practices Browsers business Career client management Community creativity CSS Design Designers development Digital Preservation Fonts Future-Friendly HTML industry interface maturity Medium My Back Pages Off My Lawn! Performance Photoshop Rants Real type on the web Responsibility Responsive Web Design Site Optimization Standards State of the Web The Essentials The Profession Typography Usability User Experience UX Web Design Web Design History Web Standards Websites webtype work Working writing

This Web of Ours, Revisited

ONE MONTH and 24 years ago, in “Where Have All the Designers Gone?” (my HTMHell design column for Adobe of March 20, 2000), I discussed the deepening rift between aesthetically focused web designers and those primarily concerned with creating good experiences online:

More and more web designers seem less and less interested in web design.

Over the past 18 months or so, many of the best practitioners in the industry seem to have given up on the notion that a low-bandwidth, less than cutting-edge site is worth making. Much of the stuff they’ve been making instead has been beautiful and inspiring. But if top designers wash their hands of the rest of the Web, whose hands will build it, and whose minds will guide it? The possibilities are frightening.

An Imperfect Medium for Perfectionists

Why were many of the leading graphic designers and studios at the time uninterested in web design? For one thing, designers trained to strive for visual perfection found the web’s unpredictability depressing. The article provided clues to the frustrations of the time:

Good designers spend hours tweaking typography in Illustrator and Photoshop. Then visitors with slow connections turn off images.

Of course, where professionals trained in graphic design saw a distressing lack of control, others glimpsed in the infant technology a tremendous potential to help people, pixel-perfection be damned. To reduce the conflict to a cartoon, you might characterize it as David Carson versus Jakob Nielsen—though doing so would trivialize the concerns of both men. Designers already charged with creating websites found themselves somewhere in the middle—barking themselves hoarse reminding clients and managers that pixel-perfect rendering was not a thing on the web, while arguing with developers who told designers the exact same thing.

Visually inspiring websites like K10k showed that the web could, if approached carefully and joyfully, provide aesthetic delight. But many designers (along with organizations like AIGA) were unaware of those sites at the time.

Us and Them

Another source of tension in the medium in 2000 sprang from the discrepancy between the privileged access designers enjoyed—fast connections, up-to-date browsers and operating systems, high-res monitors (at least for the time) offering thousands of colors—versus the slow modems, aging and underpowered computers, outdated browsers, and limited-color monitors through which most people at the time experienced the web.

Which was the real design? The widescreen, multicolor, grid-based experience? Or the 216-color job with pixelated Windows type, a shallow “fold,” and pictures of headline text that took forever to be seen?

To view your masterpiece the way most users experienced it, and at the syrup-slow speed with which they experienced it, was to have an awakening or a nightmare—depending on your empathy quotient. Some designers began to take usability, accessibility, and performance seriously as part of their jobs; others fled for the predictability of more settled media (such as print).

A New (Old) Hope

My March, 2000 article ended on an upbeat note—and a gentle call to action:

For content sites to attain the credibility and usefulness of print magazines; for entertainment sites to truly entertain; for commerce sites and Web-based applications to function aesthetically as well as technically, the gifts of talented people are needed. We hope to see you among them.

That was my hope in 2000, and, all these years later, it remains my vision for this web of ours. For though the browsers, connections, and hardware have changed substantially over the past 24 years, and though the medium and its practitioners have, to a significant extent, grown the Hell up, beneath the surface, in 2024, many of these same attitudes and conflicts persist. We can do better.

Minus the framesets that formerly contained it, you may read the original text (complete with archaic instructions about 4.0 browsers and JavaScript that broke my heart, but which Adobe’s editors and producers insisted on posting) courtesy of the Wayback Machine.

☞  Hat tip to Andrey Taritsyn for digging up the article, which I had long forgotten.

Categories
"Found Objects" Acclaim Adobe Apple Applications apps art direction Authoring content copyright creativity Culture democracy Design Free Advice Ideas Nonsense social media stealing theft type Typography

Just add water.

Quick, before everyone else thinks of it. Set the word “SUCCESSION” in Engravers Gothic and export it to a transparent PNG. Download photos of confederate general Mitch McConnell and Republican Johns Thune (R-S.D.), Cornyn (R-Texas), and Barrasso (R-Wyo.). Grab and burn Nicholas Britell’s main title theme from Succession. Import all files into Final Cut Pro or Adobe After Effects. Add dissolves, fades, and film scratch overlays. Export. Upload to YouTube or Vimeo. Embed and amplify via all 500 social media networks. Sit back, relax, and bask in your 15 seconds of glory.

“Succession” is copyright HBO. Mitch McConnell is a wholly owned subsidiary of the NRA.

Categories
Design links type Typography

Adelle Mono & Adelle Mono Flex

Adelle and Adelle Sans have long been two of my favorite fonts—two great tastes that taste even better together! Now there are two more great flavors, with the release of Veronika Burian and José Scaglione’s twin-powered Adelle Mono family.

Adelle Mono is a true, monospaced version of the robust yet sensitively detailed font family. 

Adelle Mono Flex is a proportional version that’s suited for text, branding, UI, captions, and screens: “It feels monospaced but reads like a nice slab,” TypeTogether explains in the June, 2020 issue of their newsletter announcing the release.

Much more information, along with a try-it-yourself type tester and a 60% introductory discount, is available on TypeTogether’s Adelle Mono web page.


(Note: Veronika Burian and José Scaglione designed the original Adelle and Adelle Sans, along with the new Mono and Mono Flex versions. Additionally, Irene Vlachou assisted in the creation of Adelle Mono.)

Categories
Performance Real type on the web Responsibility Standards State of the Web The Essentials Typography Usability Web Design Web Design History Web Standards

Web Performance Today

WEB DESIGNERS have cared about web performance since the profession’s earliest days. When I started, we saved user bandwidth by employing GIF images that had the fewest possible colors—with no dithering, when possible, and by using actual web text instead of pictures of web text. (Kids, ask your parents about life before CSS enabled, type designers created formats for, browsers finally supported, and Typekit quickly popularized web fonts.)

Later, we learned to optimize JPEGs and blur their backgrounds: the blurrier large swathes of a JPEG image can be, the lower the bandwidth requirements for the image. We found the optimally performant size for repeating background tiles (32 x 32 and 64 x 64 were pretty good) and abandoned experiments like single-pixel-wide backgrounds, which seemed like a good idea but slowed browsers, servers, and computers to a crawl.

We developed other tricks, too. Like, when we discovered that GIF images optimized better if they possessed repeating patterns of diagonal lines, we worked diagonal background images into a design trend. It was the trend that preceded drop shadows, the wicked worn look, and skeuomorpic facades, which were themselves a retro recurrence of one of the earliest styles of commercial web design; that trend, which was always on the heavy side, performance-wise, eventually gave way to a far more performant grid-driven minimalism, which hearkened back to classic 1940s Swiss graphic design, but which our industry (sometimes with little knowledge of design history) called “flat design” and justified as being “born digital” despite its true origins going back to pixels, protractors, and a love of Greek mathematics.

All of this nostalgia is prelude to making the obvious comment that web design today is far more complex than it was in those golden years of experimentation; and because it is so much more complex, front-end performance is also far more complicated. You didn’t need an engineering degree to run DeBabelizer and remove needless elements from your markup, but, boy, does front-end design today feel more and more like serious coding.

All of which is to say, if you’re a front-end designer/developer, you should probably read and bookmark Nate Berkopec’s “Ludicrously Fast Page Loads – A Guide for Full-Stack Devs.” While you’re at it, save it to Pocket, and as a PDF you can read on your tablet.

I cannot verify every detail Nate provides, but it is all in line with recommendations I’ve heard over and over at top conferences, and read in articles and books by such performance mavens as Jake Archibald, Lara Hogan, Scott Jehl, and Yesenia Perez-Cruz.

You should also pick up these great books on performance:

(It’s not why I wrote this post, but if you order Scott’s book today, you can save 10% when you enter discount code ABAHARVEST at checkout.)

Even the most complex site should work in any device that reads HTML. It should work if stylesheets fail to load or the device doesn’t recognize CSS. It should work if JavaScript fails to load or the device doesn’t recognize JavaScript. The principles of standards-based design will never change, no matter how complex our web becomes. And as it becomes more complex (and, arguably, much richer), it behooves us to squeeze every byte of performance we can.

Websites can never be too rich or too thin.

Categories
art direction Bandwidth Best practices Brands CSS CSS3 Design Designers development Fonts Real type on the web software State of the Web Typekit Typography Web Design Web Standards webfonts Websites

A Helvetica For Readers

A Helvetica for readers–introducing Acumin.

ACUMIN by Robert Slimbach is a new type family from Adobe that does for book (and ebook) designers what Helvetica has always done for graphic designers. Namely, it provides a robust yet water-neutral sans-serif, in a full suite of weights and widths. And unlike the classic pressing of Helvetica that comes on everyone’s computers—but like Helvetica Neue—Acumin contains real italics for every weight and width.

Reading about the design challenges Slimbach set himself (and met) helps you appreciate this new type system, whose virtues are initially all too easy to overlook, because Acumin so successfully avoids bringing a personality to the table. Enjoying Acumin is like developing a taste for exceptionally good water.

Nick Sherman designed the website for Adobe, and its subtly brilliant features are as easy to miss at first look as Acumin’s. For starters, the style grid on the intro page dynamically chooses words to fit the column based on the viewport size. Resize your browser and you’ll see how the words change to fill the space.

Heaps of behind-the-scenes calculation allow the page to load all 90 (!) fonts without breaking your pipes or the internet. Developer Bram Stein is the wizard behind the page’s performance.

Nick uses progressively enhanced CSS3 Columns to create his responsive multi-column layout, incorporating subtle tricks like switching to a condensed font when the multi-column layout shrinks below a certain size. (This is something A List Apart used to do as well; we stopped because of performance concerns.) In browsers like IE9 and earlier, which do not support CSS3 Multiple Column specification, the layout defaults to a quite readable single column. Nick adds:

It’s the first time I’ve used responsive CSS columns for a real-world project. This was both frustrating and fun because the CSS properties for controlling widows and orphans are very far behind what’s possible in InDesign, etc. It also required more thinking about vertical media queries to prevent a situation where the user would have to scroll up and down to get from the bottom of one column to the top of the next. If the viewport is too short to allow for easy reading across columns, it stays as a single column.

He describes the challenges of creating the site’s preview tool thusly:

We had to do some behind the scenes trickery in order to get the sliders to work for changing widths and weights. It’s a good way to allow people to type their own text and get a feeling for how the family can be used as a system for body text and headlines (unlike Helvetica, which is more limited to the middle range of sizes). Chris Lewis helped out a lot with getting this to work. It even works on a phone!

Book designers have long had access to great serif fonts dripping with character that were ideal for setting long passages of text. Now they have a well-made sans serif that’s as sturdy yet self-effacing as a waiter at a great restaurant. Congratulations to Robert Slimbach, Adobe, and the designers and developers mentioned or interviewed here. I look forward to seeing if Acumin makes it into new website designs (perhaps sharing some of Proxima Nova‘s lunch), especially among mature designers focused on creating readable experiences. And I pray Acumin makes its way into the next generation of ebook readers.

(Just me? In both iBooks and Kindle, I’m continually changing typefaces after reading any book for any period of time. All the current faces just call too much attention to themselves, making me aware that I am scanning text—which is rather like making filmgoers aware that they are watching projected images just when they should be losing themselves in the story.)

Categories
Advertising Apple content Design Formats Publishing State of the Web Typography Usability User Experience

This Week In The Death of Publishing & The Web

FAST COMPANY writes:

Apple, like Facebook, has entered into a standoff with the publishing industry and the open, if for-profit, web. And it’s being done under the aegis of design: choose a better reading experience on our curated platform, they offer, or let us clean up that pesky advertising on the open web.

Source: Apple Saves Publishing… For Itself

N.B. This is not the first time this conversation has arisen, nor will it be the last. Off the top of my head, see also:

? Is the web under threat? Will Facebook or Apple kill or save journalism? Share your thoughts or your favorite links on the subject. Bonus points for older articles.

Categories
Design Ideas Illustration Images industry Lettering type Typography

From NYPL to DC Comics: the lettering of Ira Schnapp

Action Comics logo, 1938

Superman, 1940

HE DESIGNED the lettering on The New York Public Library and the James Farley Post Office (“neither snow nor rain…”), created titles for silent movies, movie posters, and pulp magazines in the 1920s, and started working for DC Comics in 1938, where he designed the masthead for Action Comics, refined the Superman logo, and brought dozens of DC Comics texts and titles to life. A new exhibit at The Type Directors Club honors Ira Schnapp and sheds light on his decades of influential work.

Categories
Design type Typography webfonts

Webfonts with Stylistic Sets from Hoefler & Co.

Now there’s a way to transform your web typography at the touch of a button: introducing Stylistic Sets for webfonts at Cloud.typography.

www.typography.com/blog/webfonts-with-stylistic-sets/

Categories
Code CSS CSS3 Design type Typography

Big, Beautiful Dropcaps with CSS initial-letter

Just beautiful.

demosthenes.info/blog/961/Big-Beautiful-DropCaps-with-CSS-initial-letter

Categories
Design Typekit Typography

The Practice

Categories
Responsive Web Design type Typography Web Design Web Design History Web Standards webfonts

Responsive Typography

Responsive Typography: The Basics | Information Architects

“NOT EVERYTHING always works in your favor when you design for the screen. Interaction design is engineering: it’s not about finding the perfect design, it’s finding the best compromise.”

Responsive Typography: The Basics | Information Architects

Categories
art direction Best practices Blogs and Blogging Compatibility Content First content strategy Content-First creativity Design Ideas Layout Redesigns Site Optimization Standards State of the Web The Essentials The Profession Typekit Typography Usability User Experience UX Web Design Web Design History webfonts Websites webtype Zeldman zeldman.com

Web Design Manifesto 2012

THANK YOU for the screen shot. I was actually already aware that the type on my site is big. I designed it that way. And while I’m grateful for your kind desire to help me, I actually do know how the site looks in a browser with default settings on a desktop computer. I am fortunate enough to own a desktop computer. Moreover, I work in a design studio where we have several of them.

This is my personal site. There are many like it, but this one is mine. Designers with personal sites should experiment with new layout models when they can. Before I got busy with one thing and another, I used to redesign this site practically every other week. Sometimes the designs experimented with pitifully low contrast. Other times the type was absurdly small. I experimented with the technology that’s used to create web layouts, and with various notions of web “page” design and content presentation. I’m still doing that, I just don’t get to do it as often.

Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind—although nobody until you has suggested I simply didn’t have access to a computer and therefore didn’t know what I was designing. This design may be good, bad, or indifferent but it is not accidental.

A few people who hate this design have asked if I’ve heard of responsive web design. I have indeed. I was there when Ethan Marcotte invented it, I published his ground-breaking article (and, later, his book, which I read in draft half a dozen times and which I still turn to for reference and pleasure), and I’ve had the privilege of seeing Ethan lecture and lead workshops on the topic about 40 times over the past three years. We’ve incorporated responsive design in our studio’s practice, and I’ve talked about it myself on various stages in three countries. I’m even using elements of it in this design, although you’d have to view source and think hard to understand how, and I don’t feel like explaining that part yet.

This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)

This redesign is deliberately over the top, but new ideas often exaggerate to make a point. It’s over the top but not unusable nor, in my opinion, unbeautiful. How can passages set in Georgia and headlines in Franklin be anything but beautiful? I love seeing my words this big. It encourages me to write better and more often.

If this were a client site, I wouldn’t push the boundaries this far. If this were a client site, I’d worry that maybe a third of the initial responses to the redesign were negative. Hell, let’s get real: if this were a client site, I wouldn’t have removed as much secondary functionality and I certainly wouldn’t have set the type this big. But this is my personal site. There are many like it, but this one is mine. And on this one, I get to try designs that are idea-driven and make statements. On this one, I get to flounder and occasionally flop. If this design turns out to be a hideous mistake, I’ll probably eventually realize that and change it. (It’s going to change eventually, anyway. This is the web. No design is for the ages, not even Douglas Bowman’s great Minima.)

But for right now, I don’t think this design is a mistake. I think it is a harbinger. We can’t keep designing as we used to if we want people to engage with our content. We can’t keep charging for ads that our layouts train readers to ignore. We can’t focus so much on technology that we forget the web is often, and quite gloriously, a transaction between reader and writer.

Most of you reading this already know these things and already think about them each time you’re asked to create a new digital experience. But even our best clients can sometimes push back, and even our most thrilling projects typically contain some element of compromise. A personal site is where you don’t have to compromise. Even if you lose some readers. Even if some people hate what you’ve done. Even if others wonder why you aren’t doing what everyone else who knows what’s what is doing.

I don’t think you will see much type quite this big but I do think you will see more single-column sites with bigger type coming soon to a desktop and device near you. For a certain kind of content, bigger type and a simpler layout just make sense, regardless of screen size. You don’t even have to use Typekit or its brothers to experiment with big type (awesome as those services are). In today’s monitors and operating systems, yesterday’s classic web fonts—the ones that come with most everyone’s computer—can look pretty danged gorgeous at large sizes. Try tired old Times New Roman. You might be surprised.

The present day designer refuses to die.


Categories
CSS3 Design mobile The Profession Touchscreen Typekit Typography User Experience UX W3C Web Design Web Design History Web Standards webfonts webkit Working Zeldman

The Web Comes of Age – DIBI Keynote Address by Jeffrey Zeldman

Jeffrey Zeldman – The Medium Comes of Age from Codeworks Ltd on Vimeo.