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.
- Open the paragraph style sheet pallet. (Window > Paragraph Styles)
- 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.
- Name your style something descriptive, like “Headline.”
- 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:
- Enter in some new text.
- Select any of the new text, and then pick a style. That’s it. Done!
Next, let’s modify Photoshop text without touching a single letter. Tweet This
- 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)
- Double click on your headline style to modify it.
- Change the space below to 12pt, and the color to red.
- 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.
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.
- Open the character styles palette (Window > Character Styles).
- Create a new style, let’s call it “Link.”
- 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:
- All of your standard headlines:
- H1, H2, H3, H4, H5, H6
- Base copy style:
- 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
- Block quote
- Table header row
- Table content
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!
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.
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|
|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!