Monthly Archives: May 2014

Pinterested: I do, I do, I do!

Pinterested

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!

The Typographer’s Approach to Typography

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.

Typographers-approach-to-typography-1

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’s FF Quixo for setting the title.

Buyer’s Guide: Webfont formats on FontShop

Webfont

 

Webfonts on FontShop are available in EOT and WOFF format for self-hosting. Not all foundries have webfonts, but products that do will have a webfont icon. SVG and TTF formats are not supplied.

If you have additional questions you can always email FontShop’s Support Team for help.

FontShop Friday Five: Try It Out!

fridayfive-025

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.

Great Pairs

In his most recent edition of Great Pairs, David elaborates on David Quay’s Kade together with Joshua Darden’s Freight Micro. Also, you can play around with his type samples on the new Tryout feature!

New Fonts

Several new fonts this week from Laura Worthington, Wiescher and Emigre!

New Filters

We’ve made browsing fonts much easier with the new filters on our Free Fonts page!

Friday Five Fonts: Kozmetica Script by Sudtipos and Quatro Ultra Slab by psType

Web Typography: HTML Defaults

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

Screen Shot 2014-05-23 at 3.42.07 PM

Turn kerning and standard ligatures on by default

HTML-Defaults-IMG_2957

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:

text-rendering: optimizeLegibility;
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
-ms-font-feature-settings: "kern";
-o-font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
font-feature-settings: "kern";
-webkit-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga" 1;
-moz-font-feature-settings: "liga" 1;
-moz-font-feature-settings: "liga=1";
-ms-font-feature-settings: "liga" 1;
font-feature-settings: "liga" 1;

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’s Brown Gothic for setting today’s title.

Kade and Freight Micro

Author’s note: I’m making transparency a central theme in this edition of Great Pairs.

Today we look at David Quay’s Kade together with Joshua Darden’s Freight Micro, and since I’m promoting the new Tryout feature at next.fontshop.com, all of the images shown here link you to their source, where you can go and mess around with the samples, and very possibly come up with something that works even better for your own purposes.

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.

Screen Shot 2014-05-23 at 10.04.11 AM

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.

Screen Shot 2014-05-23 at 10.14.34 AMScreen Shot 2014-05-23 at 10.31.16 AM

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.

Screen Shot 2014-05-23 at 11.11.39 AM

That’s it. Great Pairs land here each *Wednesday.

*though you may have noticed today’s not Wednesday, it’s Friday. I had to replace a bad hard drive and got a little behind this week. Thanks for reading.

New Fonts This Week

New Fonts
Cardea by Emigre
Cardea by Emigre
Newslab by Latinotype

Newslab by Latinotype

Adorn by Laura Worthington

Adorn by Laura Worthington
Adorn by Laura Worthington
Adorn by Laura Worthington

Sherlock by Wiescher
Sherlock by Wiescher

Continuing Promotions

Business Penmanship by Sudtipos – 30% off until 22 May

Consuelo by Latinotype50% off until 28 May

Karol Sans by Type-Ø-Tones20% off until 31 May

Jugo Script by Sudtipos30% off until 6 Jun

DSari by Latinotype75% off until 12 Jun

Newslab Family by Latinotype75% off until 19 Jun

Adorn single weights by Laura Worthtington50% off until 19 Jun

Sherlock in OT and Web by Wiescher50% off until 19 Jun

Brando by Bold Monday30% off until 15 Aug


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.

Buyer’s Guide: Self-Hosted vs. Hosted Webfont Licensing

You have two basic options, Hosted or Self-Hosted. Below are things to know when you are choosing between these options.

Self-Hosted webfonts from FontShop

  • You are charged based on the number of pageviews per month your site has as a one-time fee.
  • You are given the EOT/WOFF files to self-host on your site.
  • You keep track of the pageviews per month your site receives.
  • You can extend your license to support more pageviews by contacting FontShop.

Hosted webfonts from service providers

  • You are charged based on the number of pageviews per month your site has as a subscription based model which can be annual/monthly depending on the provider.
  • You are given a line of code to include within your site that serves the fonts to your site.
  • The service provider keeps track of the pageviews per month your site receives.
  • If you go over your pageview limit, default fonts may be served until you increase your subscription terms.

Self-Hosted and Hosted

*FF Chartwell Web is currently not supported.

If you have additional questions you can always email FontShop’s Support Team for help.

Pinterested: Fonts for the Class of 2014

Pinterested: Graduation Fonts

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!

More InDesign Defaults: Keyboard Shortcuts

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.

InDesign-Defaults-Keyboard-Shortcuts-2

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

Screen Shot 2014-05-15 at 9.58.09 PM

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

Screen Shot 2014-05-15 at 11.39.49 PM

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

Screen Shot 2014-05-15 at 10.34.52 PM

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.

InDesign-Defaults-Keyboard-Shortcuts-3

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’s Lucida Grande for setting the opening title, and quite a few of my menus.

 

Introducing Tryout on Next.FontShop.com

reposted from The NextFontShop Team

tryout_head

Just in time for the TYPO Berlin 2014 conference, we’re releasing a first version of our upcoming Tryout feature on next.fontshop.com.

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.

tryout_1

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.

tryout_3

Essay Text and Carter Sans

Today we look at the nice, natural relationship between Ellmer Stefan’s Essay Text and Matthew Carter’s eponymous Carter Sans, which was co-produced by Dan Reynolds.

Essay-Text-and-Carter-Sans-1
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.

Essay-Text-and-Carter-Sans-2 Essay-Text-and-Carter-Sans-3
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.
Essay-Text-and-Carter-Sans-4 Essay-Text-and-Carter-Sans-5

Great Pairs continues here Wednesday.

New Fonts This Week

New Fonts
Suzee FY by FONTYOU
Sergio by FONTYOU
DSari by Latinotype
Secca Soft by Astype
Sperling FY by FONTYOU

Dylan Copperplate by Wiescher

Campan by Hoftype

Caboom by Wiescher

Brando by Bold Monday
Bodoni Classic Fleurs by Wiescher
VLNL Bleek by VetteLetters
Bodoni Classic Fleurs by Wiescher
VLNL Duct by VetteLetters
Bodoni Classic Fleurs by Wiescher
VLNL TpBarPaco by VetteLetters
Bodoni Classic Fleurs by Wiescher

Continuing Promotions

Business Penmanship by Sudtipos – 30% off until 22 May

Consuelo by Latinotype50% off until 28 May

Karol Sans by Type-Ø-Tones20% off until 31 May

Jugo Script by Sudtipos30% off until 6 Jun

DSari by Latinotype75% off until 12 Jun

Brando by Bold Monday30% off until 15 Aug


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.

Buyer’s Guide: New Category Page

The Category page at FontShop has been rebooted! It is now easier than ever to explore our catalog and find new fonts to love.

Choose from one of eight common categories: Sans, Serif, Slab, Script, Display, Blackletter, Symbols, or Non-Western.

Narrow your results down further by clicking on a subcategory. Or, sort your results by Newest fonts or Bestsellers.

If you have additional questions you can always email FontShop’s Support Team for help.

Follow

Get every new post delivered to your Inbox.

Join 61,737 other followers