Monthly Archives: February 2013

Using Type: Justification

Justified text can be an important stylistic choice, a functional part of your layout, and potentially a time-saver within your overall workflow. Often it doesn’t make sense to justify, but when it does, these general guidelines will help you get the process working for you. This will be mostly theoretical, with a more practice-based piece with InDesign justify settings to follow.

Justification

Why should I justify my text?

Justified text is the alignment of the body text to both sides of its containing column or text frame. This is done most commonly by adjusting the word spacing of each line to push or pull the line’s contents to fit its container. Justifying text eliminates the need to tidy ragged edges, but introduces its own problems as well. Up until near the turn of the 20th century, setting body text flush left was very uncommon. Typesetters justified everything. So there’s one good reason right off – if your brief calls for something to look dated to, say, 1930 or before, justify your body. When possible, reading the text you’re setting is my best advice to knowing how it should be presented. Below is set in Frank Hinman Pierpont’s (after Robert Granjon’s) Plantin.

Justification

Give yourself adequate room.

Narrow justified columns are more trouble than they’re worth. They’re prone to rivers of whitespace, and odder-than-normal breaks in hyphenated words. Below, Nicole Dotin’s Elena in a narrow column with default justification to the left, and with better but still less than ideal justification on the right. (It’s less than ideal because it’s so over-hyphenated.) Sometimes that’s the trade-off one must make, but I say avoid it when possible.
Justification

Hyphenate, copyfit.

Be careful with this one though, since too much hyphenation is an easy pitfall. Also, make sure you’re hyphenating from a dictionary of the same language. I’ll go into more depth on this next week as well. In addition to knowing the language you typeset so you can double check its hyphenation, since the first printed books, typographers and some writers have also altered the content to fit the layout. Copyfitting may sound dangerous, and it certainly can be, so take care if rewording a client’s phrasing and seek approval of any alterations if you’ve not been expressly authorized to make them.

Lastly, know your limits and the limits of the technology. E-readers and webpages utterly fail at present to render well-justified text.

Continue to How to Justify Type.

Baskerville Original and John Sans

Another ‘made for each other’ pairing is Frantisek Storm’s Baskerville Original and John Sans. Together the two create a nice comfortable marriage, each part encouraging the other’s best qualities to show through. Baskerville Original comes in two optical sizes, marked 10 and 120 pt. The sans comes in eight weights across two widths, normal and condensed.
Baskerville Original, John Sans

Baskerville Original, John Sans

Those of you who know a little about the Baskervilles will recognize that John Sans is a casual play on the neoclassicist type founder and paper man’s name. It almost goes without saying that Baskerville didn’t design a companion sans to any of his works, (nor did he name any of his types ‘Baskerville’), but Storm’s piece of historical fiction takes a few lessons from the sturdy seriffed type, and stands on its own as a humanist sans.

Baskerville Original language support

Should you need it, Baskerville Original’s language support is impressively broad. John Sans’s is as well, though it doesn’t include Greek. An accompanying ornamental face captures some of the fleurons common to the covers of printed works set in Baskerville’s original types.

Baskerville Original, John Sans

Baskerville Original, John Sans

Baskerville Original, John Sans

Catch Great Pairs here on Wednesday.

New Fonts This Week

We’ve got quite the variety this week! Borges Lettering brings us Aloha Script, Moretype’s got Varly (also a webfont!), and TypeTogether’s newest is Soleil. We are also excited to introduce you to new foundry Abdo Fonts. Their FontShop debut includes Abdo Free Arabic and Abdo Rajab.

Special promos are in abundance. Get Moretype’s Rehn & Rehn Condensed at 50% off for just a few more days (until February 28). Bellissima Script & Bellissima Script Redux by Sudtipos are 30% off until March 2. From Latinotype, Australis is 70% off until March 11, and until March 18, get Love Story at an intro price of $14, Trend at $19, Schwager at $39, and Lolita at $56. Also, it’s the last day to get Cape Arcona Type Foundry’s CA Oskar Family at 30% off.

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

Abdo Fonts

abdo-free

Abdo Free Arabic

abdo-rajab
Abdo Rajab

Borges Lettering

U145_aloha_script
Aloha Script

Moretype

U145_varly
Varly

TypeTogether

U145_soleil
Soleil

TYPO San Francisco Prices Increase Friday

FontShop is proud to sponsor the second annual TYPO San Francisco happening April 11 & 12 at Yerba Buena Center for the Arts. We’d be remiss if we didn’t warn you that the deadline for regular registration is fast approaching – as in this Thursday night! That’s right, you can save $100 if you snap up your ticket today.

typomasthead

Don’t miss out on some serious design inspiration as Erik Spiekermann, Mandy Brown, Keetra Dixon, Christoph Niemann, Armin Vit and more take to the stage in just a few weeks.

Register today!

Buyer’s Guide: Cleaning your Font Cache

Are your fonts looking garbled or acting wonky for no reason? Do you think it’s possibly the new font that you installed causing issues, even though it worked perfectly last week? Or are fonts mysteriously missing from your drop down menu in one program, but appear in another? If you said yes to any of the above questions then you may have to clean your Font Cache.

garbled

Here are some ways to clean your cache, please note that you will have to restart your computer after cleaning. So, save and quit all programs beforehand.

Windows 2000/XP/Vista/7

The Windows operating system has a font cache file that is located here:

C:\Windows\System32\FNTCACHE.DAT

Delete this file, and restart your system. A new FNTCACHE.DAT file will be created on startup.

Mac OS X

Our support team recommends Font Finagler or Font Nuke to help cleanse your system’s cache. Check out our help section for more details on how to use Font Finagler to clear your Font Cache.

Once you’ve cleared your font cache, you’ll want to open a few programs to make sure that your fonts are behaving. Everything should be back to normal, but if it isn’t you can always contact FontShop for help.

Pinterested: Lovin’ U

pinterest-lovinu

If you’re still getting hot for glyphs from last week’s Typographic Turn-ons series, we have a big board of fonts that will make “U” look good! In our Lovin’ U pinboard, you’ll find over 50 fonts for you to check out, some you might not have known about yet — think of it as speed dating for fonts. Looking for a face that will make you look elegant? Say hello to Ivory Headline from FaceType. Is your type the bold kind? Try Facebuster from TypeTrust. Or maybe you need to pull your true love closer? Have at it with Rodeo Rope from Baseline Fonts. Not sure which one you like best? All of the fonts featured in our Lovin’ U pinboard can be tested out in the FontShop Plugin!

pinterest-febpromotions2013a

Or if you’re just looking for some new love, don’t forget about our New & Noteworthy board. We have promotions going on you don’t want to miss!

Using Type: Contextual Alternates, Ligatures

Help! I purchased a font, but I think I downloaded a different one.

Part of FontShop’s sales and support staff, Mayene de Leon gets this impassioned request all the time. So she put together the following basic review on how to access the glyphs that may not appear all on their own at first. My additional notes added, marked DS.

Alternates, Ligatures

If you’re seeing different results when you’re typing with a font you bought and installed on your computer than previews you may have seen online, chances are you purchased a font with OpenType features. If you are using these fonts in Adobe Creative Suite programs (such as InDesign, Illustrator, or Photoshop), you can change the way some of the letters look. Some fonts have variations on different letterforms; for example, the lowercase “a” might have two different shapes or forms for one font. If you bought a font online, installed it, started typing, and realize the letters look different from what you saw online, there are ways to access these alternative letterforms, called “Contextual Alternates”. (DS Other features exist for accessing non-default glyphs as well, such as Stylistic Sets, Discretionary Ligatures, Swash, All Small Caps, etc.. Mayene’s right though to focus on Contextual Alternates as the most common cause for mistaken identity among recently purchased fonts. Of course, not all fonts have or support all or any of these features.) The above example is set in Alejandro Paul’s Storefront.

Contextual Alternatives in Adobe InDesign or Illustrator

Screen Shot 2013-02-21 at 4.32.00 PM

Glyph palette showing Burgues Script

In Adobe InDesign or Illustrator, you can access your Glyphs palette by going to the menu bar, and under the Type menu, you’ll see an option for Glyphs. This will open up a window that will show you all the glyphs — or characters — available for use in a chosen font. (DS This is probably the best way to get a good look at the entire content of the font, and to choose specific letterforms when composing, but if you’d like to simply “turn all Contextual Alternates on,” keep reading. As of this writing, Photoshop still doesn’t have a Glyph palette, but InDesign and Illustrator both have similarly functioning character palettes as described in the Photoshop-only section below.)

Contextual Alternates in Adobe Photoshop

Contextual Alternates in Photoshop

In Adobe Photoshop, if you know which letters have an alternative letterform, you can change it by going to your menu bar, and under the “Window” menu, open up your Character palette. In the upper right of the Character palette, you’ll see a tiny triangle with four lines next to it; click on this icon and windows will pop-up. If you hover over “OpenType” as shown above, you’ll have the option to uncheck “Contextual Alternates” — this will change the letterforms if the font has OpenType features offering alternatives for that letter. The above example is Underware’s Liza Display.

In the example above, you’ll see that Acta Poster Regular OT has two different lowercase “a”s, which you can choose from depending if you check or uncheck Contextual Alternates in your Character palette.

DS I’ll close with a tip: If you work with script faces a lot, consider turning Contextual Alternates and Discretionary Ligatures on by default. In whatever CS app you use to set type, open the Character palette without any documents open, and turn on the features using the method described above. This will become your new default.

Cool to the Touch: FF Eureka and FF DIN

FF-Eureka,-FF-DIN-1

This will be brief. James Puckett wrote in suggesting this pair, which you’re all welcome to do by the way. Either leave it in the comments, or write a letter, or whatever. Our address is on the contact page. My name is David Sudweeks.
FF-Eureka,-FF-DIN-2

There’s something kind of nice and cool about both Peter Bil’ak FF Eureka and Albert-Jan Pool FF DIN. Eureka’s generous spacing, high crotches, economical fit, pragmatic strength and modestly sloped italic bring to mind the industrial types of mid-twentieth-century Europe, and the monospaced aesthetic previously covered here. So add to that an ever so subtle warming from FF DIN, and you’ve got a pair that says something. Go even warmer, jolly even, with FF DIN Round. Of course, FF DIN isn’t the only DIN, it’s just the best, most cohesive DIN family.
FF-Eureka,-FF-DIN-4

FF-Eureka,-FF-DIN-3

FF-Eureka,-FF-DIN-5

Leaving it here since it’s late. Catch another Great Pairs at this address on Wednesday. Thanks for reading, and I impatiently await your letters.

 

FontShop Plugin Now Supports Adobe Fireworks

pluginfireworks

Adding yet another design program to its repertoire, the FontShop Plugin is now compatible with Adobe® Fireworks®. Now you can see how different type options will look on web and mobile before you buy and without leaving your document.

The free FontShop Plugin lets you preview any of our 150,000+ fonts, in the context of your own artwork in Adobe® Photoshop®, Adobe® Illustrator®, Adobe® InDesign®, or Adobe® Fireworks® (CS5, CS5.5 and CS6). This is a great new way to find the perfect typographic fit for your project.

Features:

  • Supports Adobe Photoshop, Illustrator, InDesign & Fireworks
  • Preview fonts in your document
  • Search by name, designer or foundry
  • Collect and tag favorite fonts

>> Download the FREE FontShop Plugin

And because if you’re not a Fireworks user, this may now be in your head, we’ll help you with that too:




 

New Fonts This Week

New fonts! New promos! Yup, your Tuesday is about to get a little brighter.

This week we’ve got some great work from Wiescher, Kontour Type, Bold Monday, and Latinotype.  Latinotype is starting Trend at only $19 until March 2nd and offering Love Story for $14, Lolita for $56, and Schwager for $39 until March 18th.  We are also proud to present webfonts from exljbris -  including favorites such as MuseoCalluna, and Geotica – in addition to their brand-new Museo Cyrillic. Last, but not least, be sure to check out ReType‘s new webfont, Krul.

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

Bold Monday

U144_pinupdotted
Pinup Dotted

Kontour Type

axia
Axia

odile
Odile

Latinotype

latinotype-lovestory
Love Story

latinotype-schwager
Schwager

trndddy

Trend

latinotype-lolita
Lolita

U144_danslenoel
Dans Le Noel

Wiescher

U144_bannertype
Bannertype

U144_bodoniinlineclassic
Bodoni Classic Inline

exljbris

U144_museocyrillic
Museo Cyrillic

Buyer’s Guide: Need A Quote?

For many of the desktop fonts available, you can license up to 1,000 users for the fonts online. If you need to license more than 1,000 users for the fonts you’re interested, contact us and we can let you know the costs for larger Multi-User Licenses.

Quotes are easily obtained once you’ve added the items you need to purchase to the cart. Desktop fonts are licensed in blocks of users; you will have to enter the number of computers that you will need to support, and the cart will automatically recalculate your subtotal if necessary. The default number of users is the cost of a basic license.

series3-numberofusers

 

Web licensing is based on the number of pageviews per month the website you’ll be using the fonts on generates. Pricing for webfonts are based in tiers of up to 500000 pageviews per month (pvm), 5 million pvm, or 50 million pvm. If your website is super popular and the traffic it generates is over 50 million pvm, let us know and we can provide quotes based on your needs.

Be sure to double check the End User License Agreement before licensing font. End User License Agreements, EULAs for short, are rules to follow when you want to use a font. You’ll want to keep in mind that you are not purchasing the typeface itself, but a license to use the font software. Because we have 100+ foundries that have their own EULA and you might not want to read every single one, we added a shortcut to a product’s EULA at the bottom of their page.

series3-licenseagreement

If your company is growing, you can always extend your license to support additional computers by contacting us. We’ll also answer any additional questions you may have before your purchase.

 

Typographic Turn-ons: The DL (Discretionary Ligatures)

The final installment of our turn-ons series. Hope it sufficiently steamed up your designs this week!

disc_lig

Script face seeks OpenType palette ready for discreet adventure – turning on discretionary ligatures a must. Ready to get everything out of how I was built. Open to experimentation to make my “Th” in “Throbbing” look subtly stunning. Up for roleplaying with some historical looks, such as the “st” in strap. Lest we get too crazy, must be okay with turning off certain discretionary ligatures to dial it back.

typeoturnons_type.cs5_to life & love

***
DIY: Dive into the Sudtipos catalog for hours of DL fun. For a non-script face, Mrs. Eaves is open to playing around.

Pinterested: New pins this week

pinterest-newpins2152013In case you’ve been too kerned on by this week’s Typographic Turn-ons series to notice any other news, we’ve pinned some New & Noteworthy things on Pinterest for you.

We have a lot of promotions going on this month that you don’t want to miss — some are pinned for you to check out, including Laura Worthington’s Mandevilla Family and Latinotype’s Australis. If you’re still sweating for swashes at this point, though, we’ve collected our fontastic love stories in a Typographic Turn-ons pinboard to go back to time and time again.

Using Type: Getting @font-face Right, Preventing Faux Bold

First, thanks Art Blanc for requesting that I add this brief bit as an extension to Using Styles Properly. Designing with professional webfonts, you’ve generally got two options. Host your own, or go with someone like Typekit or Webtype that handles the hosting and serving of font files as needed. I’ll focus on the first case, but this is still pretty applicable to the second, as it will point out why problems like faux bold and faux italic occur, and how to fix them.

Using Type, set in FF Legato

If you use a single font family of four fonts, don’t specify four separate font-families. This is the most common mishandling of the @font-face rule I see, and the main reason for faux bold’s inescapable presence on the web. Instead, specify the same font-family with each font, and use font-weight and font-style to differentiate them, like this simplified example with FF Unit Web Pro:

All the same font-family

What if I want to use weights within the family that are neither ‘normal’ nor ‘bold,’ like, say, Thin? Use numbers. 100 is the lightest. 900 is the boldest. Units increment by 100. Specifying a font-weight value of ‘normal’ is the same as 400. Bold is 700. Here’s the spec.

And actually, let’s take a detour here and discuss faux bold. When setting up @font-face, the default value for font-weight is normal, or 400. When using a header in your markup, h1, h2, or whatever, the header’s default font-weight is bold, or 700. So if you specify a separate font-family for headers without specifying its font-weight, and then turn around and use it like I use FF Meta Headline Web Pro below, you’re headed for trouble.  Why? Even though the font is called MetaHeadlineWebPro-Bold, since the font-weight isn’t specified, CSS thinks it’s ‘normal.’ Then when the h1 comes asking if there are any ‘bold’ fonts in the family, CSS says, “No, but I’ve got this normal one here I could bold up for you real quick.” Faux bolding is applied.

What could go wrong?

Meta Headline Web Pro Bold, faux bolded

The common quick fix is to specify font-weight: normal; in the h1, avoiding the above described confusion. And sometimes with webfont services, this is what you have to do. But the better way of handling it, is to specify font-weight: bold; in the @font-face CSS. Next time when the h1 comes looking for bold, CSS says, “We have it.”

Now, why’s this better? Because you don’t always know who’s going to come looking for bold, or italic. You might fool h1 into looking for ‘normal,’ but what about h6, or h7, or strong, or b? If you set up your @font-face right, you don’t have to go preempting each of these eventualities. Elements like em or strong find the font they’re looking for, without you having to tell them where to look.

In sum, apply style rules as generally as possible, or if you can, implicitly. That’s all for now. Another Using Type comes on Thursday. In parting, here’s the beautiful Aften Screen, with its totally already-thought-out CSS bundled with the download.

Sparely written CSS

Aften Screen Web

(Update: Hey Alan Stearns! I just read your Say No to Faux Bold and discovered that I must be an unwitting plagiarist. Though I didn’t reference your material at the time of writing this post, it seems like somewhere in the middle there, had I done so, and copied you idea for idea, the words wouldn’t have come out too different. I could claim that I arrived at this independently – actually I will claim that – but still, what’s the use? The two are so close. Anyway, sorry for what must certainly have looked like me ripping you off.)

Readers: though Alan and I come to the same conclusions, he goes into more depth afterward.

Typographic Turn-ons: The Language of Love

Happy Valentine’s Day! Our penultimate post in our turn-ons series:

language

A train platform. A moonlit summer’s night. The air filled with smoke and revelry. Perhaps we’d make a great pair, but our languages are so different.

Judging by your accent, you may speak something Western Latin-based. Luckily my character set contains enough accents to support hundreds of languages in addition to English. I can totally be your Latin-based lover.

typeoturnons_type.cs5_roses

Hoping to hook up with someone who goes beyond the Latin-realm? You’ll find many faces that expand into Cyrillic and Greek. Fonts are increasingly extending into the realm of Arabic and Indic scripts too. Character-based languages such as Chinese, Japanese and Korean are also seeing more typographic development.

If you’re looking for someone who’s really been around the world, try a Unicode font.

***

DIY: Use the FontShop Language Filter to find typefaces compatible with whatever you speak. Any Pro FontFont supports all Western Latin-based languages. Check out Rosetta Type Foundry and Indian Type Foundry for some sultry selections of other scripts.

Follow

Get every new post delivered to your Inbox.

Join 59,373 other followers