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.
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.
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.
To add a font, click Browse fonts on Typekit. It will launch the Typekit.com website. You have filters on the right.
Make sure to check “Desktop Use”. I’ll add Coquette in this article. Rollover the font in the list and click on “Use Fonts”.
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”:
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:
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”.
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:
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:
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:
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…
<div class="mainTitle">Design the responsive web</div>
… create a CSS class to define the font parameters on this block. In my sample, I’ve created “mainTitle”.
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:
For the weight, as you can see, if you use “Light” in Photoshop, set font-weight:300 in CSS.
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.
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.