New typography features in Photoshop CC (2014)

19 Nov 2014
  • posted by Veerle Pieters

Last week I discovered something in Photoshop by accident. I have no idea if this was something that was added in the latest version or not, because I haven’t seen it in any of the new feature overviews. On occasion people ask me what I use to render fonts well on digital mediums. Well that’s exactly where I discovered this new rendering option and I still can’t believe that I missed this.

Two new type rendering options

Before I discovered this I was using Strong for body copy in 98% of the projects and Crisp for larger text. In the other 2% I decide on what looks best. Photoshop didn’t always render it quite right as it would appear when previewed on a browser or mobile device.

Crips text rendering setting in Photoshop CC

Now there are two new rendering options called Mac LCD and Mac. These two solve the previously mentioned problems beautifully! The way I see it is that Mac is replicating OS X’s font smoothing, and Mac LCD is sub-pixel rendering, but I’m no Type expert. So when I’m designing something for iOS for example I’m using Mac as iOS is using a similar rendering as Mac OS X. When I’m designing for the Web, Mac is the equivalent for:

-webkit-font-smoothing: antialiased

and Mac LCD is the equivalent for:

-webkit-font-smoothing: subpixel-antialiased Mac LCD text rendering setting in Photoshop CC Mac text rendering setting in Photoshop CC

Type previewing

Searching the right typeface can be hard especially if you don’t know or remember all of the fonts you have installed. Photoshop now renders the fonts in the Image area. This is way more useful than the small preview next to the name in the type menu. In fact I switched this preview option off to make the type menu more compact so I see more of the image area. The way you do that is by going to the Type Menu, choose Font Preview Size, and then choose None (see screenshot image below).

Type previewing none in Photoshop CC

Below you is a screenshot image of the menu with the preview option still on

Type menu with type preview in Photoshop CC

Type filtering

When I know the name of the type, it is easy and I just type its name, but the interesting thing is that you can also search on different attributes. Let’s say you know that you want a Bold type, just type bold, and you’ll see all Bold fonts. You can go even a step further and also type Italic, and you’ll see all fonts that have a Bold Italic. If you would happen to know the name you can narrow things down even more.

Type filtering in Photoshop CC

You can also filter to show only fonts from Typekit , as shown in the screenshot image below.

Type filtering in Photoshop CC - narrowing the search further selecting the Typekit icon

Using desktop fonts from Typekit

If the font that you like isn’t in your library you could use Typekit. In the Type Menu in the upper right corner you’ll see a green Typekit square with a plus. If you click that you’ll end up on the Typekit web site. I’m a subscriber to CC complete so Typekit is included. It’s also included when you subscribe only to Photoshop CC. When you are on Typekit.com it will be automatically on ‘Desktop Use’ so it will show all fonts that are licensed to be used in Photoshop. Here’s you can also refine your search with things like Serif, Slab Serif etc. You also have the Recommended for panel that has the two options Paragraphs or Headings. The Properties panel is where it gets really interesting.

Using desktop fonts from Typekit

You have many options there to refine your search like Weight or Width. As you can see in the screenshot above, you can even search for the just two letters like I did with the 's' and the 't', and you’ll get a live preview of those. When you have what you want you select and sync the selected fonts. When that is done the Creative Cloud app will download an install those fonts. Remember that app must be running to make this work automatically. Now when you go back to the Type Menu you type the name of the font you chose on Typekit, or you click the T of Typekit filter, and you’ll only see the fonts from Typekit. You can also use this in the Character panel btw.