Set Developer Friendly Web Typography in Photoshop

Set Developer Friendly Web Typography in Photoshop

Posted by on May 19th, 2015

photoshop-web-type

Designers love typography, but that doesn’t mean their developer will. With just a few little tricks, designers can set up Photoshop layouts in a way that speaks to developers on their own terms, resulting in beautiful web typography.

This post will walk you through my tried and tested process for creating developer friendly layouts in a snap — Here’s what you will need to do the same with your designs:

  • An understanding of paragraph and character styles in Photoshop
  • A basic understanding of CSS and HTML tags (you don’t have to code it, just know a bit about how your developer will use it)
  • A few moments to show your developer how to read your font styles in Photoshop
  • Optional: My base layout Photoshop template set up with default styles for key HTML elements.

Paragraph and character styles in Photoshop: the almighty power of consistency

A developer has one edge over web designers when it comes to consistency in their typography, and it’s called CSS. Those wonderful style sheets will let a developer change a font family, color, size and more on a global basis. Imagine how easy life would be, if only we could do just that in our Photoshop layouts!

That’s where paragraph and character styles come in. These little gems from Adobe can help designers retain style consistency within a single Photoshop layout, and communicate those styles to the dev team.

  • Paragraph styles cover everything you could want when it comes to type: font family, weight, color, leading, and paragraph-specific settings such as space above, space below, and indentation.
  • Character styles are more limited, but with just cause. They cover character-specific elements including font family, style, and color. Let’s consider these “minor overrides” to the paragraph style that allow you to easily style some bold blue text in the middle of a paragraph.

Creating and using paragraph styles

First, let’s style some text. We’ll enter in some type on a text layer in Photoshop, use 12pt. Arial for our base font family, and create a headline with 30pt. bold and blue. Alright, that was super easy (it’s just setting type like always) – but now, let’s turn these into styles and apply them to more text.

Creating Paragraph Styles in Photoshop

  1. Open the paragraph style sheet pallet. (Window > Paragraph Styles)
  2. With your headline text selected, click on the “new style” icon. All of the styles you applied to the selected text are now saved to the style sheet.
  3. Name your style something descriptive, like “Headline.”
  4. Repeat the steps with some of your copy selected to create a basic content style. I named mine “Copy.”

Now let’s use our style sheets:

  1. Enter in some new text.
  2. Select any of the new text, and then pick a style. That’s it. Done!

Apply paragraph styles in Photoshop

Next, let’s modify Photoshop text without touching a single letter. Tweet This

Editing paragraph styles

  1. First make sure you do not have any text or text layers selected (or select text of the same style you will be editing – we just want to avoid applying a style to any other text)
  2. Double click on your headline style to modify it.
  3. Change the space below to 12pt, and the color to red.
  4. Every little bit of text that you had applied the headline style to is now updated, and you didn’t have to touch a bit of it.

 Creating and using character styles

Creating character styles is just like creating paragraph styles, but remember, these styles only capture settings from the character pallet, while paragraph styles capture settings from both the character and the paragraph palette.

Paragraph and character styles vs. paragraph and character pallets

A great example of a character style is a link. When you want to show how a traditional link will look within a block of text, the only thing you change is the color and underline style. The rest of the style remains: font family, size, leading, etc. Let’s make a quick style for a very traditional link: blue and underlined.

Creating Character Styles in Photoshop

  1. Open the character styles palette (Window > Character Styles).
  2. Create a new style, let’s call it “Link.”
  3. Set any style options that you would like this style to override, and leave everything else blank. In this case, we’re setting the color to blue and underlining the text.

Now, simply select any text, and apply the character style “Link”. The text can be in a headline, copy, etc, and will always be blue and underlined for you! But the best part is that when you decide to change that link color, one change to your style will change all links in all of your text, in all layout documents (I’ll show you how next).

Using Photoshop styles to simulate CSS

Now that we are making and using styles in our layouts, let’s talk about how to use them. The basic idea here is to make your typographic selections as clear as possible to your developer. The best way I have found to do this is to call them the same things he does. That means, “Copy” would be a <p> tag, main headlines would be an <H1> tag, and so forth.

To make this really simple for designers who don’t code, I have created a Photoshop document that contains styles for standard HTML tags. Here’s what’s included:

Paragraph styles:

  • All of your standard headlines:
    • H1, H2, H3, H4, H5, H6
  • Base copy style:
    • P
  • Definition list styles:
    • Definition List Title
    • Definition List Division
  • List styles:
    • UL, OL
  • Text within a form:
    • Form P
    • Form Label
    • Form Radio
    • Form Button
  • Preformatted
  • Block quote
  • Table header row
  • Table content
  • Breadcrumbs

Character styles:

  • Link
  • Emphasis
  • Strong
  • Cite

Preview all standard styles provided in the photoshop file

Take a moment to look at the default styles in the document and you will quickly gain an understanding of how/when to use each one (just as a developer would wrap tags around content within his code).

 


Importing styles into your layout

I typically start by editing all of the existing styles to match the site style I am working on. Set color, font family, space above / below, leading, etc. Having everything in one layout makes it easy to ensure that every style compliments the others.

Once this is done, I just load the styles (both paragraph and character) from my base document and start applying them to text in any layout. Easy peasy!

Load Paragraph Styles

Note: if you end up changing a style set, you can load styles into all other layouts for your site design. When you load styles, Photoshop will warn you of any conflicts and allow you to either replace or skip. Replacing will update all existing styles to match the new ones.

Replacing styles warning box

 

Talk to your developer like a pro

Getting the styles into our developers’ hands.

First, be sure to supply your developer with layered photoshop files, including the base style document you downloaded and customized. He will love having all of the styles defined in one location, in addition to seeing them in action within your layouts.

Next, let’s make sure we clear up a few other developer lingo vs. designer speak terms so everyone’s on the same page. Your developer will either already know this, or think you are just the most awesome designer for taking the time to help them read designer speak!


Designer / Typography Developer / CSS
Leading Line height
Space above / below Margin or padding
Bold Font weight: bold
Italic Font style: italic
All caps Transform : uppercase

The only missing piece is making sure your developer knows that you took the time to set up style sheets, and knows how to access them.

The simplest way for me is to hop on a call with the dev team, turn on screen sharing, and walk them through my file. I show them the Paragraph and Character Style palettes, let them see what I have included, and even open up a few styles so they can see how to read the data.

Happy designing and developing — and if you have any tips to share, please let us know!

Purchase the Photoshop File

Use the same file I use for creating all of my site designs. Purchase the download!

About 

Kandra is influenced in her design by everything from Hubble Space Telescope imagery to the strawberry plants in her garden. Her concepts are known for their characteristic combination of warmth, simplicity and functionality, and for their strong resonance with her clients’ brand and corporate identities.

Questions or Comments? Leave a reply, we would love to hear from you.


Phone: 303.995.1472 Site Map
Top