Typekit, Photoshop CC & Web Design

Typekit, Photoshop CC & Web Design

I’ve been a web designer since the 90s, and I’ve always produced mockups in Photoshop. Today, I still start in Photoshop CC to quickly layout my web pages and create the final visual design. Photoshop tools and layers make web design a very efficient process. My ultimate goal has always been to design “web safe” designs that will look in Photoshop as much as possible like the final experience in the browser. Dealing with fonts is still the main challenge. I can’t remember how many times customers would say “the text doesn’t look as good as in Photoshop”. Today, Creative Cloud members can finally create 100% web safe mockups in Photoshop thanks to the introduction of the Typekit desktop fonts. In this article, I’ll teach you my techniques for achieving a pixel-perfect web design.

Video tutorial

Discover how I use Typekit fonts in my Web Design process and how I create web safe mockups:

Web fonts and the Creative Cloud

Web designers usually start prototyping web pages in Photoshop, and then create HTML pages. To create “web safe” designs, we use web fonts. Members of the Creative Cloud have a Typekit Portfolio plan and can access the full library of web fonts. But there is more. Adobe has just introduced the Typekit desktop fonts. Creative Cloud members can use Typekit fonts in their desktop applications to mockup “web safe” designs in Photoshop CC.

My Photoshop file on the left - My web page in Chrome on the right. Can you see a difference ?

My Photoshop file on the left – My web page in Chrome on the right. Can you see a difference?

I’ll teach you how to use the same Typekit font in Photoshop and on your website, and how to guarantee a 100% web safe design in Photoshop CC. On the left is my Photoshop mockup and on the right my HTML prototype. You can’t notice any difference, right? Let me show you how to use web fonts in Photoshop CC.

Install and use Typekit fonts in Photoshop CC

You start by designing a web page in Photoshop and then you want to add a creative web font for the title. To do so, open your Creative Cloud application and open the Fonts tab. It lists the Typekit desktop fonts you’ve already installed on your computer.

open the Fonts tab of your Creative Cloud desktop application.

Open the Fonts tab of your Creative Cloud desktop application.

To add a font, click Browse fonts on Typekit. It will launch the Typekit.com website. You have filters on the right.

Desktop Use filter on Typekit.com

Desktop Use filter on Typekit.com

Make sure to check “Desktop Use”. I’ll add Coquette in this article. Rollover the font in the list and click on “Use Fonts”.

04-coquette-use

It will open the “Use this family” popup window. To use it in Photoshop CC, you just have to check the box “Sync to your computer using Creative Cloud”:

05-use-font-web

Check the box to install this font on your computer.

The Creative Cloud application will automatically download and install the font on your computer. Let’s also add Coquette to a web kit to use it later in your local prototype or on your websites. Select a kit (or create a new one) in the “On the web” list. It will launch the typekit Editor window:

06-typekit-editor

At the bottom, you can monitor the size of the web fonts of your kit. Keep it as light as possible. To do so, select only the weights and styles you will use in your design. On the screenshot above, I just selected the “Regular” weight, which saves 86K.

If you need to understand how to use this font in your future CSS, click on the link “Using weights and styles in your CSS”.

How to use your font in CSS.

How to use your font in CSS.

In your future CSS code, you set the font-family “coquette”, and set the font-weight to 400 (which corresponds to Regular in this case).

If you declare a font such as “Proxima Nova”, notice that in your CSS, the font-family is ‘proxima-nova’. There is no space between words, it’s forbidden in CSS. We’ll get back to this screen later. Click on Publish to save your new settings.

Now, if we look at the Creative Cloud application, the font has been added. You should also receive a notification on your desktop to inform you that “Coquette” has been added:

07-notification-font-added
You don’t have to restart Photoshop CC, the Coquette font is available!!! Feel free to design a beautiful title with Coquette.

Typekit web fonts in HTML

Now it’s time to create your HTML prototype based on your mockup. You can use Adobe Generator to generate all the assets. You can also directly generate a project for Adobe Reflow CC, or simply select a layer and then right-click > Copy CSS. These techniques can accelerate the production of a web page from Photoshop, but now, let’s focus on Typekit fonts in your HTML page.

Import the kit

Go back to the “Typekit editor” window on Typekit.com and open your kit. You have two links at the top of the popup: Embed Code and Kit Settings. Click on Kit Settings:

add your server names

add your server names

For your local demo, you can add localhost and the IP of your computer. Add at the same time the URL of your website. Click on Save.

Now you can click on the Embed Code link:

09-embed-code

Copy these two lines in your web page

To use Typekit fonts in your web page, you just have to copy these two lines in your page (in the <head> section).

Click on Publish to save your settings.

CSS properties and Photoshop

If you have a DIV element with text…

… create a CSS class to define the font parameters on this block. In my sample, I’ve created “mainTitle”.

font-size

The size in pixel in CSS is the same as within Photoshop CC. That said, by default, Photoshop will set type size using “points”. Go to the Preferences panel of Photoshop > Units & Rulers > Units > Type and select Pixels.

font-family & font-weight

The font-family parameter is defined by Typekit. When you add a font to a kit, Typekit displays a table to indicate the correct font-family and font-weight parameters. Here is the table for Proxima Nova:

10-proxima-nova

The CSS parameters for Proxima Nova

For the weight, as you can see, if you use “Light” in Photoshop, set font-weight:300 in CSS.

letter-spacing

To reproduce the Photoshop tracking (space between the characters) in CSS, use letter-spacing. The ratio is 1em for 1000. So if the tracking is 50 in Photoshop (which is the default value), write in CSS letter-spacing:0.05em.

Aliasing and sub-pixels

Now if you look at the result in your browser, and compare it with your original Photoshop file, you’ll still notice a difference. The fonts in the browser will look thicker, this is due to aliasing. By default, Photoshop use the classic crisp, strong, sharp and smooth aliasing algorithms. Your browser uses sub-pixel anti-aliasing for text.

New Anti-aliasing options for Type in Photoshop CC

New Anti-aliasing options for Type in Photoshop CC

A new anti-aliasing for Type has been introduced in Photoshop CC: MAC and MAC LCD (Windows and Windows LCD also exist for Bill Gates lovers). Now you can simulate the look of anti-aliasing on the web with new anti-aliasing mode for type. These anti-aliasing modes more closely resemble the look of text on browsers. Apply MAC LCD on your type elements and compare your Photoshop mockup with your HTML page in a browser: you can’t notice any difference.

Web safe web design in Photoshop CC ?

YES, it’s now possible thanks to:

  • Typekit Desktop fonts
  • The new anti-aliasing “MAC LCD” for type introduced in Photoshop CC

If you have any questions, post a comment or contact me via twitter.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

2 Comments

  1. thanks for your sharing. I also want to know, how to use other language, for ex. chinese or arabic?
    many thanks, and nice to use typekit

    • For the time being Typekit has a limited support for non-latin alphabet languages. So unfortunately Arabic and Chinese are not supported for now. The team is working to support additional languages. So stay tuned and be patient :)

      Thank you!

Trackbacks/Pingbacks

  1. Web Design Trends – The Why and the How | Creative droplets - […] GETTING STARTED WITH TOOLS – Visit Typekit.com and browse the catalog. The filters will help you to understand the…

Submit a Comment

Your email address will not be published. Required fields are marked *