typefaces (typography) | Basement Light Design

April 23, 2021July 28, 2022

Skeuomorphism

The notion of flat, “digitally authentic” design has lately been a popular topic of conversation and controversy, especially with the software design efforts of Apple, Microsoft, and their respective flagship operating systems. Subtle colors, light typography and the other commonalities of modern flat design are components of the design trends many are coming to love (or hate).

Image comparing 2003 Apple Safari icon to that used in iOS 15 — Safari’s current icon on the left versus its flat version. The latter foregoes lighting effects, bevels and other details to create an attractive flat alternative while still retaining the compass metaphor.

While many specifics of the constituent theories that form the concept of flat, digitally authentic design, this design form has evolved as a move away from skeuomorphic, metaphorical design.

Skeuomorphism is the term one applies to a trend where elements of a graphical user interface mimic a physical object. For example, a skeuomorphic note-taking app may resemble a lined yellow legal pad. Skeuomorphism exists in many different industries but in the context of web and software design, designers know skeuomorphism primarily as the technique of using metaphors to induce familiarity.

Many examples of flat design exist. In this post the efforts of Microsoft and Apple wll be examined, due to their collective wide reach. Also, each of these companies are likely candidates to establish significant style guidelines that designers can investigate in order to emulate their interpretation of flat design.

Microsoft
Microsoft opted for one of the most radical and controversial redesigns of recent times with Windows 8. Its creation of the design language formerly known as Metro (now known as the Microsoft Design Language, but with the former term often colloquially applied) was first seen in widespread use with Windows Phone (and also in Zune, the platform’s inaugural design). It was Windows 8’s 2012 release that shined a light on the flat design trend.

Windows 8’s start screen breaks away from its former desktop design, being composed of flat, colorful live tiles, instead of icons. The tiles are not merely a stylistic choice: They allow useful information to be displayed on the start screen in the manner of a dashboard.

Apple
While Microsoft and others were making major changes to their design languages, Apple stuck by its skeuomorphic principles through multiple generations of its operating system. That changed with the announcement of iOS 7, taking a drastically different step in the design of the OS. Icons are flatter, typography is lighter and the metaphors are out.

Image comparing Apple calculator app, 2003 and iOS 15 — Image courtesy of Smashing Magazine

This is particularly evident with iOS when you compare the current iteration of, say, the calculator app to its iOS 7 counterpart. That particular app has jumped from trying to resemble a physical device with buttons signified by gradient backgrounds to a completely flat design independent of any unnecessary metaphors.

The flat interface style is more than a trend. It is the manifestation of a desire for greater authenticity in design, a desire to curb visual excess and eliminate the fake and the superfluous.

This article excerpted courtesy Connor Turnbull, tutsplus

August 5, 2013February 26, 2021

7 type sins

Typographic Hell. It’s not a pleasant place to be. Some of us are headed there, and we’re making others suffer along the way. But fear not: Redemption is here. In the July Issue of HOW, designer and typography junkie Jim Godfrey tells of 34 Typographic sins (download all now) and how to free yourself from their grip. Preview 7 of these unsightly sins.

01 Two spaces between sentences.
Your keyboarding teacher not only taught you how to type, but also how to sin. Once upon a time, typewriters used a monospaced typeface. Since all of the letters were the same width, it became customary to add an extra space at the end of a sentence to call attention to a new sentence. This was never the practice of professional typesetters, who always used one space. (If you’re a doubting Thomas, go find an old book and see for yourself.) Since most typefaces on our computers vary in width, unsightly gaps appear if two spaces are used. Repent of this sin by using only one space.

02 Failing to align baselines of type in adjacent columns of body text.
Baselines of all columns of text on a page should align. This creates a pleasing margin of pure white space.

03 Failing to tuck periods/commas inside quotes marks.
Admittedly, this is an American convention; Europeans may do it differently, but let’s go on a typographic crusade across the pond. It will keep unsightly negative space from drawing unnecessary attention to the period or comma. By the way, punctuation such as question marks and exclamation points belong either inside the quote if they are part of the quote, or outside the quote if they are not part of it. Semicolons and colons always appear outside quotation marks.

Immoral: “I love type so much”, she confessed.
Chaste: “I love type so much,” she testified.

04 Failing to kern display type.
Nothing bellows “I’m an amateur!” quite like display type that hasn’t been properly kerned. Unseemly gaps can impede readability by distracting the reader. The kerning tables of some typefaces are great, but the human eye is divine. Adjust the spacing between letters and assuage your guilt.

05 Indenting a paragraph too far.
The standard indent for a paragraph is 1 em (the point size of the type), not half an inch. Most software has default tabs set for half an inch, creating a big hole in the text. To hide your sins, make penance by adjusting the tabs.

06 Using process colors for body text.
It’s harder to read, but more important, it’s hell to register on press. Instead, use 100% cyan or magenta (yellow? never) or spec a Pantone color. Your pressman will sing praises to your name.

07 Faux italic/oblique, bold and small cap type.
Thanks to word processors everywhere, we see type that’s hypocritical: It kind of looks italic (or bold) but it’s not. Cast out the hypocrites: Select the italic or bold version from the font menu, and if a typeface doesn’t have genuine small caps, don’t use them (the weight of the letterforms will be inconsistent and, consequently, unattractive).

Courtesy Jim Godfrey, HOW Design

August 15, 2012July 15, 2013

Type design trends for 2012

Type designers are some of the hardest working people in design. They demonstrate a passion required to build a typeface and of necessity must be sticklers for detail.

Over the last few months, a trend toward basics, legibility, and elegance define the current state of type design.

Read on as we select some of the type trends that will inspire designers to think differently about typography.

01 Ligature discretion

Discretionary ligatures like Siruca enable you to create pictograms with type

OpenType has a feature called discretionary ligatures, making it possible to do some really interesting things when certain letters are typed in a certain order. Take Fabrizio Schiavi’s Siruca for instance; a font which, when you type the word ‘car’, a car pictogram appears.

02 Simplicity and legibility redefined

Trio Grotesk by Florian Schick is simple, elegant and modern

If you’ve seen the excellent iA Writer app for both Mac and iPad, you’ll no doubt have noticed its set-back, minimalist yet hugely legible monospaced typeface, Nitti. It’s a font from the foundry Bold Monday, a Dutch outfit that designs both commercial and custom fonts.

Bold Monday’s faces are leading the trend of simple, elegant yet modern typefaces; from Panno Sign, which was designed for the romanisation of street names in South Korea, to its newest release Trio Grotesk – Florian Schick’s personal interpretation of Kaart Antieke, an early 20th century sans serif used by Piet Zwart in his essay about modern typography, “Van oude tot nieuwe typografie”.

Another example is Dalton Maag’s excellent custom font for Nokia.

03 Slick stencils

Type Together created this slick, bespoke stencil font for Levi's — Type Together created this slick, bespoke stencil font for Levi’s

Stencils are back with a vengeance, and a fantastic example of a slick, contemporary stencil is Levi’s, a font designed by Type Together for the jeans brand, commissioned by Wieden and Kennedy. Based on Paratype’s version of Bodoni, you could arguably group it into trend 05, but we feel stencils deserve their own entry.

04 Didone is back

Rick Banks' F37 Bella is at the forefront of a revival in Didone typefaces — Rick Banks’ F37 Bella is at the forefront of a revival in Didone typefaces

If there’s one font that sums up the revival of Didone typefaces, it’s Rick Banks’ F37 Bella. A useful and stylish font, Banks has just released a Heavy version for those wanting to use it a bit smaller (at smaller point sizes the original’s serifs could disappear).

These hyper-thin hairline serifs and strong contrasts between thick and thin lines, make it a modern classic in the Didot classification. It’s a stunningly elegant font for headlines; online and especially in print. A bargain at £35 per weight.

Other nice examples include Neutura’s Estrella typeface.

05 Classics revived

Garçon Grotesque is one of many classic fonts to be revived by modern designers

Type designers love reinterpreting classic fonts in new ways. There have been many examples over the past year, but one that stands out is the release of Garçon Grotesque.

A contemporary interpretation of Copperplate Gothic, Garçon Grotesque is a sophisticated typeface designed in a multitude of weights with extended Latin character set, small capitals and a working lowercase.

You can buy it at Myfonts, starting at $50. An example of a face being revived by a modern foundry is Commercial Type’s revival of Max Miedinger’s Neue Haas Grotesk (the font that became Helvetica).

Courtesy Creative Bloq

February 21, 2011July 15, 2013

No double-space after periods!

There is no need to type two spaces following a period. Why? Simply put, typefaces used by modern computers are proportionally spaced rather than monospaced. Double spacing after periods was acceptable for typewriters, because the spacing between each character was of equal space. However, today if you type two spaces following a period, or any sentence-ending punctuation, a wide gulf of visually unappealing negative space is created. It looks amateurish.

Since the time described in the book of Genesis, those raised on primary school typewriting classes have been well-drilled to type two spaces.When designing for clients, I am often delivered text that was composed in a word processor rife with extra spaces. It is no bother for me to search and replace these with a single space—it is ingrained into my design process. However, experienced typographers know, for elegant copy in published work, single spaces are mandatory.

November 15, 2010July 16, 2013

Urban Outfitters’ new “branding”

Hot on the heels of the Gap’s infamous lazy logo redesign (since withdrawn) comes another epic fail, Urban Outfitters. Usually reliable for being ahead of trends in clothing design, merchandising and communication, the apparel giant unveiled a clunky new look for its logo and website. The logo is a masterpiece of asymmetry and plainness, while the website’s sidebar navigation willfully mixes extended and condensed typefaces. Many critics have cited the logo’s similarity with Word Art examples found inside Microsoft’s Office suite, enabling amateurs everywhere to curve and bend type to create their own corporate logotype.

I would bet that by year’s end there will be an “emergency” logo design revamp, because this dog won’t hunt!

UPDATE
Since this was posted, UO has changed to a similarly bizarre branding scheme—at least for its website. This time round, clearly the same retail marketing team are conjuring 1991 with all its dots and squiggles. What do you think? Leave a comment below…
—Scott

Urban Outfitters 2013 home page