Monthly Archives: May 2014

June is rapidly approaching and that means it will be wedding season! We have compiled and updated a fantastic Pinterest board to inspire your perfect day. See all of the great examples of wedding design here!

On the subject of getting into the head of the typographer, today we’ll walk through some decisions that graphic designers and typographers consider early on in the design process. Frankly, I hope this is useful stuff. Often while tracing the unconscious and intuitively made steps toward a given result, the final piece seems only obvious. Discussing these principles in the abstract and keeping my audience engaged long enough to hear it is the challenge I’ve accepted here.

First, some terms

I know I’ve mentioned this here before, but just for clarity’s sake: Typography is “writing with prefabricated characters.” (Gerrit Noordzij said that.) A type designer is someone who makes type, those prefabricated characters just mentioned. A typographer is someone who specializes in using type. Lastly, though it’s a related field, lettering is not type, and the use of lettering is not typography. Ready to get started? Great.

What is the need?

With client work, a sizeable part of the design process goes into properly forming not the answer, but the question to which the design brief responds. It’s often in the process of conducting proper research that certain strong concepts present themselves. If it’s a publisher seeking a book or book cover design, it’s in the text. If it’s a fashion label refresh, it’s in the cut of the clothes, the demographic data, the histories of its designers. If it’s product packaging, or a music tour, or a cryptocurrency, or a playbill redesign, or a geotagging app, a movie prop, something in the research of the thing, its history, or the people who make it will show up as a distinct piece of the solution. From the beginning of this process, I keep a dedicated book to draw and write down my ideas.

The answer to the brief

Working out what rough forms the project will take given its requirements and constraints, I get to work figuring out what content needs to be created, who best to do it, and what kind of meaning the typography should give to the copy it sets. Special attention is placed on the visual requirements: How do specific marks translate from one medium to the next? How will they perform at large and small sizes? On the store shelves and in the lower third of the morning talk shows? Which typefaces and treatments have the handpicked quality required? Which typefaces will deliver consistent results on screen and in other physical applications? Linguistic requirements: How many languages will this piece be translated into, and is the layout I’ve created flexible enough to function well in the common cases? Adaptable to extreme cases? It’s also during this phase that I consider incorporating substrates and other materials, disciplines, and processes that make sense.

Pause. We’ll hold it here for now. I’ll continue when Using Type picks back up on Thursday. Please let me know if you find this interesting. Thanks to Frank Grießhammer’sFF Quixo for setting the title.

Want detailed showing of new fonts straight to your inbox? Make sure you’re receiving them in your inbox. They maybe getting lost in the promotions section. If you use Gmail then you can drag and drop the FontShop Newsletter from your Promotions Tab to your Primary Tab.

We know you’re busy and the Internet is a crowded place, so we’ll try to give you a little reminder on Fridays of what’s going on out there. Below please find five recent FontShop-related threads that you may have missed.

Let’s Have Some Fun

Time to have some fun while playing with the new Tryout feature on next.fontshop.com! It’s only a beta version, but you already can do much more than test-drive webfonts in real time. You can also create whole layouts and collaborate freely with anyone on your artwork.
Currently, this feature only works with fonts that are available in webfont format.

Buyer’s Guide

Self-Hosted and Hosted webfonts?! Theresa explains the difference between Self-Hosted webfonts from Fontshop and Hosted webfonts from service providers on this week’s Buyer’s Guide.

Just a quick tip on web typography, since I’m not a practicing HTML man, and I don’t pretend to be.

Turn kerning and standard ligatures on by default

When Elliot Jay Stocks came to TYPO San Francisco to talk about the current state of advanced web typography, he ran through a number of changes between two years ago and now in terms of CSS. My main takeaway can be summed up by the above presentation slide, and the following implementation to cover as wide a range of browsers as possible. The current best way to enable kerning and ligatures is to affix these attributes to the page’s body:

The rest of the things that could be considered defaults, such as a paragraph’s line length, or hyphenation, etc., I recommend baking into your design after you’ve considered the conditions under which it may be viewed. While reviewing defaults, it may be a good time to also check to make sure any webfonts used have their styles properly set up.

A note on the value of global resets

I see these becoming less and less relevant. It feels like an over-controlling attitude to take with such a fluid medium, specifying every single element, and then resetting the browser defaults for each to zero, none, etc.. I’m more of the attitude of targeting a specific range of browsers, and then addressing problems as they arise. I’m sure there are reasons why I’m wrong. Please let me have them. Plus, there must be a lot of obvious stuff I’m missing here.

That’s it; and this concludes my series on defaults. Next week, I’ll try to get a better view of typography from inside the typographer’s brain. Using Type continues here Thursday. Thanks to Nick Shinn’sBrown Gothic for setting today’s title.

Quickly, let me add that this feature (the new Tryout feature) is limited to webfonts that we offer, so keeping this page open as a reference to what will work is advised: FontShop’s Webfonts. I also recommend against pasting text into the Tryout feature, and also, you should use a modern desktop browser. Going against this advice (as I have as part of testing the feature) will reveal what remains to be fixed, however, the feature’s failure to deliver the expected result looks a lot more like it’s simply not responding to your input. Sticking to options you can be somewhat confident will work will give you a much more positive experience with this tool. Today is May 23, 2013 and the above is all subject to change. Now on to Kade and Freight Micro.

Reading about Kade, the concept comes from lettering on ships and docks in the Netherlands, an engineer’s approach to letter making. Getting my own good look at the face, I see it doing well in the portrayal of the idea of technical subjects, such as math and sciences. Freight Micro is one optical size of Freight (serif) drawn specifically to function at around 6 pt and below, and part of the larger Freight Super Family.

The thing that really unifies this combination is its attention to the relationship between interior and exterior contours, hard lines wrapped with taut, smooth ones. In Kade, this is mainly a stylistic decision. In Freight Micro, similar results were arrived at under the constraints of performance at very small sizes. It’s fine, by the way to use a typeface intended for small sizes at larger ones, though be careful of it falling apart. The other way around (using type drawn for large sizes to set text) generally doesn’t work.

Want detailed showing of new fonts straight to your inbox? Make sure you’re receiving them in your inbox. They maybe getting lost in the promotions section. If you use Gmail then you can drag and drop the FontShop Newsletter from your Promotions Tab to your Primary Tab.

Congratulations to the Class of 2014! We hand picked 14 blackletter fonts that are perfect for your graduation needs in our newest Pinterest board. Whether for announcements or a themed party, these designs will work perfectly. Good luck to all of you graduates out there!

First of all, thanks everyone for reading and commenting on last week’s piece on InDesign Defaults. Before moving on, I think I should stress that I bring these things up (setting defaults) mainly so that if you haven’t considered them, you have a place to start. And though I recommend specific approaches because they work for me, if you’ve thought it through and what you’ve got better suits you or your process, do that. Typographer and friend André Mora commented on his method of taking time to experiment with size and leading values before locking things into a grid, rather than enabling alignment to baseline grid by default. Not only do I find this a totally valid approach, it’s also a great one. It’s one I often take. The reason why I prefer working the other way is because it forces me to think in context of a grid system.

Which I guess could veer us into today’s topic: Shortcuts. Adjusting one’s document-wide baseline grid settings can be cumbersome. Changing the increment by a half a point can mean hunting down the Preferences menu, then finding the appropriate dialog. For me, it makes more sense to just create a keyboard shortcut that takes me straight there. Since the default shortcut for Show/hide baseline grid is (alt/option + ’) which I already instinctively used, it seemed natural to make Open baseline grid settings relate somehow, so I set it to (shift + alt/option + ’).

Why working with standard keyboard defaults makes sense

Every designer selects and hones his or her own tools to some extent. The reasons why I choose to build off of standard keyboard shortcuts is because they’re the ones I learned first (so, out of comfort), and also because it helps keep my skills portable. For example, if I need to slip into someone else’s work environment for some reason, my hands won’t be tied. This also becomes a temporary consideration when an equipment failure requires one to wipe or reinstall a system.

Default InDesign shortcuts I use all the time

Beside the ones common to the OS/most programs, I most often find myself using these below. For Windows, substitute command with control.

Make selected text larger by 2 pt: shift + command + >

Make selected text smaller by 2 pt: shift + command + <

(2 pt is just the default increment by the way, set that in InDesign > Preferences > Units & Increments, Mac, or the same under the Edit menu in Windows.) Holding down alt/option with the above shortcuts changes size by 10 pt increments.

Toggle preview mode: W

Make me a new document, on the double!: alt + command + N

Bring forward / Bring to front: command + ] / shift + command + ]

Send backward / Send to back: command + [ / shift + command + [

Paste in place: alt + shift + command + V

Paste without formatting: shift + command + V

Toggle OpenType case feature: shift + command + K

In pro fonts, the case feature may do more than set the selected text in all caps, for example in MVB Verdigris, it also adjusts the spacing to a looser, all cap spacing. In JAF Bernini Sans, it substitutes in a set of mid-caps drawn just shorter than cap height, but taller than small caps, for use setting acronyms in running text.

Quick Apply: command + return

This last one is really handy, particularly when applying things that don’t appear on the menus, such as custom styles you create. Also, things that do appear on the menus but are often quite buried, like OpenType features (all small caps or stylistic sets). By the way, if it’s accessible through the menus, you can make a shortcut for it.

I know I’m leaving plenty out for brievity’s sake; There are lots more. Consulting a good chart and familiarizing yourself with the unknowns is best.

Here’s how custom shortcuts are made

Edit > Keyboard Shortcuts… opens the dialog. From here, pick your commands and assign a key sequence. The dialog will alert you to conflicts should you choose something that’s already taken. You can also save your set. This is handy because InDesign will every so often misplace all custom shortcuts. As I mentioned in the intro, it works best for me to make custom shortcuts that are intuitively similar to standard ones.

Consider adding these to your list of custom shortcuts

It seems like I’m always using the Type > Change Case commands to capitalize a title or tone down some ALL CAPS. So for me, control + command + U / L / T / S gets me there.

Open baseline grid settings: shift + alt/option + ’

Here’s where I’m really looking for input: What’s missing from my list of suggestions—any shortcuts making your life better?

Mac-specific tip: This means Alt/Option.

Sometimes checking the menu because I’ve forgotten the shortcut doesn’t seem to clear up anything at all. Anyway, the above broken pair of salad tongs ⌥ refers to your alt/option key. The outlined up arrow ⇧ is shift, the chevron or up arrow ⌃ resembling a caret or circumflex ^ is control, and the cloverleaf, clearly marked on the keyboard, is command.

Okay, that’s it. Thanks for reading and please leave your suggestions and ask your questions in the comments section below. This series, Using Type continues Thursday. Thanks to Charles Bigelow & Kris Holmes’sLucida Grande for setting the opening title, and quite a few of my menus.

At the moment, it’s a disarmingly simple-looking beta that works only with webfonts*, but the initial preview version already takes you well beyond the scope of traditional live font-rendering.

What’s the Difference?

Though it looks like a blank page at first glance, the initial Tryout feature is in fact a powerful design tool. It’s a functioning layout template where you can create, delete, change and combine your rendered font samples freely. With its useful range of tools, you can play with the rendered font samples, changing their point sizes, line spacing and text alignment, and you can also change the colors of the text and background. You can design anything you want, using any webfonts of your choice. And every designer knows that a blank page is not just an empty space, but a wide open universe, full of unlimited potential. To start creating your own rendered layouts, just select the family of your choice, then click on the “Tryout” button.

Sharing is Collaboration

Naturally, you can “share” your designs with as many people as you like. But here’s a refreshing new twist: in our Tryout feature, “sharing” also means “collaborating”. Once you’ve “shared” your design with a person or a group, they can also edit it and send you back their changed versions, allowing you to work jointly on any design. This is not only extremely practical for professional use, it’s also a great opportunity for users to bounce around ideas and inspire each other. To try this feature, just create a design in the Tryout page, then click the “Share” button—and let the fun begin!

More in the Works

In upcoming versions, you can look forward to more Tryout templates, tailored for practical use-cases such as blog designs, book texts or websites. Soon you’ll also be able to browse them for new families, work with your “favorited” items, upload images and test out the finer capabilities of the fonts, such as OpenType features and much more.

The thing I see most pronouncedly in Essay Text is a deliberate leaving in of the details—things that would be stripped or otherwise rationalized away. To make it clear that these small touches (such as its pointed curves or a seemingly misplaced heaviness in the tail of the y) have a purpose, the same are emphasized to allow demonstration of the principle.

Together with Essay Text, I’ve paired Carter Sans. A sans it is, though its flared terminals land this also in the category of Glyphic, or Thorn Serif. (The term glyphic here makes reference to lapidary inscription.) Carter Sans has a nice, hearty and uncomplicated feel to it. Seeing the two together was enough to convince me of their compatibility.

Want detailed showing of new fonts straight to your inbox? Make sure you’re receiving them in your inbox. They maybe getting lost in the promotions section. If you use Gmail then you can drag and drop the FontShop Newsletter from your Promotions Tab to your Primary Tab.