Monthly Archives: February 2013

Stability and Disruption: Whitman and FF Super Grotesk

Great Pairs set in FF Super Grotesk, Whitman

With these pairings, I generally try to stay away from safe design outcomes. I’m more interested in what I don’t know than what I do, and looking through and combing pieces that are a sure fit just isn’t as satisfying as following through on a ‘what if?’ and making the relationship work. When I started the Great Pairs series, I was careful to name the relationship I created: Disparate Voices, Unison, Youthful, Unsettling. I’m now much less eager to do so, given the great range each is capable of spanning. But if I were to highlight one thing going on with this pair, it would be the nice arresting quality Svend Smital’s FF Super Grotesk has over the rich even-colored surface of Kent Lew’s Whitman.
FF Super Grotesk, Whitman
Whitman, (and its display variants shown above, far right column) goes after the warmth and charm of William Addison Dwiggins’s New Caledonia, with introduction of notable improvements, quieting some and playing up certain other quirks you might also see in say, Eric Gill’s Joanna. FF Super Grotesk, with its low x-height, tall dark caps, and slightly unpolished appeal, seems to bring out the best of Whitman’s idiosyncrasies. Note above the alternate a and g in FF Super Grotesk, accessible through OpenType Stylistic Sets.

FF Super Grotesk, Whitman
FF Super Grotesk, alternate g

Don’t be alarmed. Though rugged, FF Super Grotesk is capable of subtlety in its lighter weights, though it’s true; It’s usually outspoken. Below, Whitman Display calms its sans partner in its role as subheading.
Whitman Display, FF Super Grotesk Condensed, Whitman

That’s all. Catch Great Pairs here each Wednesday.

Typographic Turn-ons: Baby, I’m Kerning

Part three in our series:

kern

Let’s face it, there’s something unspoken between us. No baby, it’s not the space between you and me, although sometimes it’s what’s between “u” and “i”.

I’ve been trying my darndest, but we’re just not fitting together right these days. Maybe it’s our increased size, but either we’re squishing into each other or we’re just too far apart. Frankly, it’s affecting my attraction to you.

There’s only one solution, sweet pea, we’ve got to kern. Our glyphs just need to get closer (but not too close) so that they fit better. And those times when we’re squished (especially when we’re playing as “scripts”), we need some positive kerning – pushing our characters farther apart.

typeoturnons_type.cs5_c'est la vie

I know, I know, you’re hesitant. Generally speaking, one doesn’t want to touch a type designer’s kerning. I mean, we were born this way. But y’know, sometimes I think we may have been born a text face, but with some manual kerning we could make it to a display. And yes, when we get that big, we look really loose. We’ve just got to pull it in a bit tighter.

Finally, if you’re not opposed to adding a third, I hear the best way to kern is to look at three letters at a time and make sure they look right.

***

DIY: Try your hand at tracking open and kerning Font Bureau’s William Caslon Text at a display size, such as in this photo.

Staff Picks, January 2013

Before February’s over I thought we might as well publish January’s Staff Picks. Here’s the complete list, with selected pieces below.

Anna picks Certified by Stuart Sandler, Bai Meillon, published by Lettering Inc.

Certified

Meghan picks FS Rufus by Mitja Miklavčič, Jason Smith, & Emanuela Conidi, published by Fontsmith

FS Rufus

David picks FF Ticket by Daniel Fritz, published by FontFont

FF Ticket

New Fonts This Week

We’re excited to share lots of new faces with you this week as well as welcome a new foundry to the FontShop library, Laura Worthington.

We have a wealth of promotions for you this month as well. Get 30% off Moretype’s Rehn & Rehn Condensed until February 28. Bellissima Script and Bellissima Script Redux by Sudtipos is 30% off until March 2. Cape Arcona Type Foundry’s CA Oskar Family is also 30% off until February 26. Get Laura Worthington’s Mandevilla Family at three weights for the price of one until March 1. Latinotype’s Australis is at a $60 intro price until March 11.

As always, subscribe to our newsletter and read this blog for tips on using type, Pinterest updates, and more.

New foundry Laura Worthington

mandevilla

Mandevilla (3 weights for the price of 1)

alana

Alana

See all Laura Worthington fonts »

Canada Type

commoncomic

Common Comic

fellowship

Fellowship OT

wilkekursiv

Wilke Kursiv

Cape Arcona Type Foundry

caoskar

CA Oskar Family

Latinotype

australis

Australis (Intro price $60 until March 11)

Schiavi Design

sysfalso

Sys Falso

Stephen Rapp Lettering Design

newcuisine

New Cuisine

slapjack

Slapjack Family

Typographic Turn-ons: Sexy Swashes

Our  Typographic Turn-ons series continues.

swashes

He spotted her from across the room, her curves drawing him into the whole word, impossible to look away. Though italics always rang his bell, her forms brought something more to the table…he could never go back. Yes, he’d fallen head over heels for swashes.

Swashes derive from italics. When you look at the capitals from most italics, they’re just sort of oblique roman forms. Want to spice them up? Some fonts include extra glyphs to make those letters follow a more cursive construction.

typeoturnons_type.cs5_va va voom

Ready to start swinging with swashes? If swashes are available in your font, turn them on through the OpenType panel in your design program, or you can pick them one-by-one out of the glyph palette.

Contrary to popular assumption, swashes and flourishes are different – although if you want to get freaky with flourishes, by all means go ahead!

DIY: Want to find some sultry swashes! We recommend a dalliance with Farnham Display . We’ve also got a Fontlist full of Serifs with Swashes for you to explore.

Typographic Turn-ons: Contextual Alternate Lifestyles

Happy Valentine’s Week! Today we start our Typographic Turn-ons series for those who really love type and/or want to take their relationship with fonts to the next level. Check back here daily for tips and tricks to make your page sizzle.

context_alt

Dear FontShop:

My partner and I are experiencing an awkward problem lately. Whenever we try to get cozy on the page, it seems our letterforms keep crashing into each other in a very unsexy way. The bigger we get, the more apparent this becomes. I’ve heard that contexual alternates may help, but it sounds a little scary. Any advice?

- Patty

Dear Patty,

It sounds as if you may be taking the wrong attitude toward contextual alternates. In fact, attitude is a perfect example of where this typographic feature will help. Don’t be shy, are your “tt”s jamming together? Turning on this feature (already built into your font) in your design program will make those letters better – and not look forced and awkward. If you’re a script face, you’ll really notice a difference and be as beautiful as you were designed to be.

typeoturnons_type.cs5_fight-flight

Also, if you’re open to experimentation, may I recommend playing around with stylistic alternates as well? They just give you so many more options – you’ll never get bored. For example, if you have a lowercase a that defaults to a single-story “a” (in Apertura for example), but like a lot of people prefer a double-story, stylistic alternates will swap all those out. Same with hitting the right spot with a monocular or binocular “g”. Your font will have a default, which you’re probably using now. But to expand your options go to the OpenType menu within the Character palette in InDesign or Illustrator and start to play around in stylistic sets. Your world will never be the same.

Best of luck!
FontShop

DIY: Spice up your week by trying Contextual Alternates in P22 Cezanne

Buyer’s Guide: What formats are webfonts available in?

webfontformats2Typically, webfonts are available in EOT and WOFF formats — if you don’t know what these formats are, you can check out our What is EOT and WOFF? post.

FontShop‘s webfont selection is limited to the formats that the foundries supply and is not available in TTF or SVG formats. Under many of the foundries’ licensing terms, converting fonts to other formats for web use is not allowed. Always double-check a foundry’s End User License Agreement to be sure what is and isn’t allowed.

Pinterested: Love At First Type

pinterest-loveatfirsttype

As you anticipate the beginning our Typographic Turn-ons series next week, our Love At First Type pinboard will help you get through the weekend if you’re sweating for swashes. We’ve pinned typefaces that will warm your heart and fonts that we’re smitten with here at FontShop. We’ll continue to pin more lovely fonts and maybe you might choose to buy your sweetheart a font for Valentine’s Day instead of a bouquet of roses, because, let’s be honest, desktop font licensing for one user is forever. Many years from now, your loved one will still be able to type out their love for you in Fiorentina, compared to just reminiscing about or staring longingly at a picture of a beautiful bunch of flowers you bought them once upon a time.

Using Styles Properly

Last week we discussed a few basics of setting up and applying styles properly, now let’s do it. All instructions below apply specifically to InDesign, and generally to any technology that makes macrotypography possible through styles.

Using Type

Start fresh, specify as little as possible

In the previous piece on the theory behind setting up styles, I end with the question, “What’s the rule, and what’s the exception?” Let’s start there. If you’re designing a novel or textbook, your audience will spend most of its time in the text. That means the text should be your top priority, and everything else should exist to serve the reader while in her role as a consumer and digester of, referrer to, and participant in the text. When making styles, start with the body text as a new paragraph style.

Body

It’s here where we specify the font family, size, etc.. Since I had already aligned the text frame to the baseline grid before creating the Body style above, now any paragraph that has this, or dependent styles, applied to it will also align to the baseline grid. Wait. How did I create the style? I left my cursor blinking in the middle of the paragraph, and hit the ‘Create new style’ button at the bottom of the Paragraph Styles panel, opened the just-created style, typed Body, and hit enter.

Body settings

The next and subsequent styles you create will be based on this style. Note the ‘Based On’ in the image below. In the Style Settings below it, you’ll see that another style I just created, Body initial, is the same as Body, only without the indent. This I’ll use just after a chapter heading, atop a new section, or after a break in the text.

Body initial, based on Body

Subsequent styles are all based on Body

Styles

A little typographic system is forming, all based on the most common style, Body. Note especially how I applied the italic as part of the paragraph style Quote. I selected the paragraph, hit Shift+Command+I, (that’s Shift+Control+I in Windows), and created a new paragraph. I didn’t specify the italic weight in the Basic Character Formats dialog. This means that if I change the font family in Body later, there’s no need to also come and specify the new font family’s italic here. But—a caveat. This method supposes that the font manufacturer set up their style names properly within a single font family. So check first. If you follow my method of italicization above and nothing happens, you’ll know, and have to go the old route of manually specifying. This is also true if specifying fonts across different optical sizes. Even if it’s a bit of a hassle to specify it though, assuming I make more styles based on these, it will end up saving time and effort if a change needs to be made. And that’s the gist of paragraph styles.

Quote style settings

So what are character styles for? Character styles are exceptions to paragraph styles on a per-character basis. Need all keywords in a paragraph to be blue? That’s what character styles are built for. And as you make more use of things like nested styles, character styles can be a huge time-saver. Thanks to MVB Verdigris for setting this paragraph by the way. Let’s change it to Coranto 2 from yesterday’s Great Pair just to see what happens.

Change the font family to Coranto in one place and everything updates to it.

Above: All I did was change Body’s font family to Coranto 2, and all the other styles automatically changed. Even that italic in the Quote.

Specificity

Paragraph styles work on the paragraph level, meaning from one hard return to the next. (Soft returns, Shift+Return, bump text to the next line inside a paragraph.) You can set a paragraph style without highlighting anything, just with the cursor inside the boundaries of the paragraph. Character styles require that you highlight the part of the text to which you wish to apply the style. (If you have both a paragraph and character style applied to a paragraph, the character style will take precedence because it’s more specifically applied.) CSS-defined styles are applied at the element level, targeted with whatever selector(s) you specify.

Quick Apply

Say you’ve got your styles set up in a small sample of the document you’ll be working on, and now all that’s left is to go through the thing and apply the styles. Particularly if, like me, you’re averse to clicking around with a mouse when it’s unnecessary, I suggest you try Quick Apply. Just leave your cursor in the middle of the paragraph, hit Command+Return and type the name of a paragraph style you’ve created. A little dialog will come up with suggestions. Arrow to it, hit enter, violà. Same with character styles and certain OpenType features (type ‘small caps’ for instance), just make sure you’ve got them highlighted. Enjoy.

And that’s all. My hope is that this introduction to interdependent or cascading styles will help you to think in terms of systems when working with type, and save you from hours of going back and fixing things that robots are capable of figuring out on their own. Using Type continues here Thursday.

Oh! I was thinking of doing a brief demonstration on setting up @font-face styles properly, but I’m not sure if there’s much demand for that here. If so, let me know and I’ll do it. It just seems like it’s something nearly everyone gets wrong. My evidence? The widespread presence of faux bolded heads and subheads on the internet.

Coranto and Siri

Moving on now to a thoroughly contemporary pair, let’s look at Göran Söderström’s cheery sans, Siri, and Gerard Unger’s sharp and smart Coranto 2.

Siri, Coranto
Though Coranto is designed specifically for newsprint, the cleanness and deliberateness of its gestures transfer well to both screen and more careful print processes. Together, the two hold each other up and project a youthful edginess throughout.
Coranto
Siri, Coranto
Siri, Coranto
Siri’s playfulness comes from its highly finished tone and color, balanced with seemingly arbitrary terminal angles and overall bright Nordic nature. Looking to use Siri on the web? Then it’s Siri Core Web you’re looking for.
Siri, Coranto

Another Great Pair lands here on Wednesday.

Next Week: Typographic Turn-Ons

typoturnons_titles-06

Have you ever been curious about contextual alternates? Sweat for swashes? Kinky about kerning? Don’t be embarrassed, we’ll indulge your font fetishes on the blog next Monday through Friday for Valentine’s Week. Get your scented candles, bubble bath and Barry White ready, next week we’re bringing you a Great Pairs series of a different kind – Typographic Turn-ons.

We suggest you read Meet Your Type as a primer and Typographic Horrors to remember what not to do (unless you’re into that sort of thing).

Watch this space and our Twitter and Facebook starting Monday!

New Fonts This Week

We’re kicking off February with five new fonts for you to get excited about!

As always, subscribe to our newsletter and read this blog for tips on using type, Pinterest updates, and more.

Dalton Maag

U142_AktivGrotesk

Aktiv Grotesk, new weights

Garagefonts

U142_DistrictPro

District Pro

Wiescher

U142_Copperplate

Copperplate Alt

Sudtipos

U142_Bellissima
Bellissima Script & Bellissima Script Redux

Letters From Sweden

U142_Kumla
Kumla

Buyer’s Guide: Can I install EOT or WOFF on my computer?

When you’re searching for fonts on FontShop, sometimes you’ll see webfonts in your search results. For example, if you search for “FF DIN” only, “FF DIN Web” may come up down the list, too:

buyersguide-eotwoff2

Keep in mind that desktop fonts and webfonts are not the same! Desktop licensing and web licensing are completely separate, so if you’re planning on using something like FF DIN for a big project that includes print materials and a shiny new website, you’ll need to license both the desktop version (OpenType or TrueType format) and the web version (EOT and WOFF formats).

buyersguide-eotwoffIf you have only purchased a webfont, you will not be able to install the webfonts on your computer. Webfont formats — EOT and WOFF — cannot be installed on Macs or PCs. A webfont will not work in desktop programs like InDesign or Microsoft Word.

If you need a version to install on your computer for mockups or wireframes (in Photoshop or Illustrator, for example), you can use our Plugin to test out fonts in Adobe® Creative Suite® — it’s free and easy to use!

Pinterested: Typography 101

pinterest-typography101

We have lots of typography boards on Pinterest and it’s easy to get lost in them. But one of the most important boards is our Typography 101 pinboard — it’s a place where you’ll learn about fonts and using type! Those who are new to the world of typography, those who dabble, design students and professionals should bookmark this board; we’ll be continuing to expand this board with lots of great information from David’s Using Type series to other fun facts and important tidbits from our Buyer’s Guide series on licensing and finding fonts.

Follow

Get every new post delivered to your Inbox.

Join 61,748 other followers