Start learning with our library of video tutorials taught by experts. Get started

Productivity Tips for Web Designers
Illustration by John Hersey

Productivity Tips for Web Designers

with Sue Jenkins

Video: Formatting text for the web

- Hi there, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson, I'll show you how to format text for the web in Illustrator, so you can harness the power of some new features in Creative Cloud. When designing for web and mobile apps in Adobe Illustrator Creative Cloud, there's a little time-saving trick that you can do, when formatting text, to make your web development go a lot faster. This trick has to do with using the Character Styles instead of regular text, and then working with Adobe Illustrator CC's new CSS Properties Panel.

Watch this entire course now —plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Watch the Online Video Course Productivity Tips for Web Designers
3h 1m Appropriate for all Jul 31, 2014 Updated Jan 29, 2015

Viewers: in countries Watching now:

Productivity Tips for Web Designers is the weekly series for web designers who want to enhance their design, software, and freelance business skills and streamline their workflow. Whether you're new to web design or working professionally as a seasoned designer, you'll discover techniques that can help you become more proficient at your craft. Tune in every Thursday for a new tip on topics including typography; SEO; design software like Illustrator, Photoshop, and Dreamweaver; and web coding in HTML and CSS.

Subjects:
Web Web Design Web Foundations
Author:
Sue Jenkins

Formatting text for the web

- Hi there, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson, I'll show you how to format text for the web in Illustrator, so you can harness the power of some new features in Creative Cloud. When designing for web and mobile apps in Adobe Illustrator Creative Cloud, there's a little time-saving trick that you can do, when formatting text, to make your web development go a lot faster. This trick has to do with using the Character Styles instead of regular text, and then working with Adobe Illustrator CC's new CSS Properties Panel.

Once you try this technique and use it a few times, I think you'll see for yourself how totally useful this is to your performance and to your workflow, plus, if you frequently use Illustrator templates to start your projects, you can save default Character and Paragraph Styles into your template to further speed up your design process, so let's switch over to Illustrator and let me show you how these work. Creating Character Styles is really just a matter of saving your Styles to the Character Styles Panel, so, in this sample document, I've created two text boxes, one with formatting, and the other without, but no Styles have been created yet with the Character Styles Panel.

You can open the Panel by selecting Window, Type, Character Styles, then, to add a Style to the Character Styles Panel, start by selecting an entire text block, a word, or a line within your text block that shares the same formatting, so, for instance, I'll start with this one here, then you're going to click the Create New Style button at the bottom of the Character Styles Panel, and double-click on the New Styles Layer to edit the name, so, clicking here once to create the new Style, double-clicking the name to give it a name, so let’s say this is my Heading One, I may just do h1 to give it a name.

I'll repeat the process for the next one, so, selecting my text, clicking the button, double-clicking to rename here, call this one Heading Two, and, for the third one, I'll do it again and that will be for my p style, for my Paragraph Style, so now I've created Character Styles in the Character Styles Panel, which means that I can reuse them, apply those Styles, to other areas of my web layout in Illustrator. To apply one of your Character Styles to another block of text or word or selected text, what you do is you'll select it, so we'll start here, and then what you're going to do is you're going to ALT or Option click on the desired Style name in the Styles Panel, so, holding them down, your ALT or Option key, and then pressing on the Style that you want to apply to it applies the Style, so let's do it again, so choosing this block of text, holding down your ALT or Option key, clicking on the Character Style that you'd like to use.

We'll do it again for our paragraph text. It's pretty easy to do, it's a huge time saver. If, at any time, you need to change a Style globally, like you want to change the font face, or the font color, the font size, something like that, you're going to click on the name of the Style in the Character Styles Panel, but not on the text, just on the bar, double-clicking, that will launch the Character Style Options menu for you, and then you could go in and change any of the characteristics, so, if I wanted to change the size, let's make it 28, I could go in and scroll through here, maybe I want a different color.

We'll choose a different color, how about … we'll make it a brighter pink, and then you can say OK, and all instances will update globally throughout your entire document, which is pretty handy. Now, before we can export the text and the Style of our boxes, say, or anything else in our layout, what we need to do is make sure that all of the elements in our layout have names. As you can see, I've already labeled the Layer, so we'll go to our Layers Panel, let me pull this out so that we can see it easier, I've already labeled the Layer for boxes and the Layer for text but, if you expand the boxes panel, you'll see that the two boxes themselves are just called < Path > and we need to name those so that when Illustrator exports our CSS, they have actual names so, just for simplicity's sake, call it box1 and box2, like so.

Okay, so now that everything's named, we can open up our CSS Properties Panel, through the Window menu, Window, CSS Properties, and here it is, over here, so let me just pull it out so we can have it on the artboard and see it more clearly, so what you can see is all of the Properties that we've already created. We have Heading One, Heading Two, and Paragraph, and there's a few buttons at the bottom of the Panel. The first button has export options that you can customize to suit your needs, so let’s click on that one first, so you could choose Points or Pixels for your CSS units.

You can choose the Appearance options, Position and Size options and other general Options, so you'd customize this to suit your needs. You can also tell Illustrator to Generate CSS for any unnamed objects, so just in case you forgot something along the way, I always turn that on so I can get the CSS for it. Click OK. The next three buttons in the Panel let you Export Selected CSS, Copy Selected Styles and Generate CSS. If you'd like to view the CSS and copy it from within Illustrator, you're going to select the desired content first, so let's grab all of this, just selecting everything first, and then you can see that there is a prompt in the Panel to click the Generate CSS button to get the CSS.

The CSS appears in the Panel display, and you can see h1, p, h2, there's box1, there's another h2. Now what it does is if it has duplicate instances, so there's Heading One in two instances, Heading Two, two instances, paragraph, two instances, boxes, two instances, it will automatically add a number one or a number two, so you will have to do a little hand-coding cleanup at the end of this, but at least you have all the CSS. You've got your font-family, font-size, font color in both hexadecimal and rgb values.

If you want to copy, you can select inside the Panel and drag all the way up to the top, and click the Copy Selected Style button at the bottom of the Panel. You can then head over to your Code Editor and paste it into your CSS. Another thing you can do is have Illustrator export the CSS for you, so, after you click the Export Selected CSS button, the dialog box opens and it'll name the file for you and you can save it to the location of your choice.

So, whether you export your CSS Styles or not, working with the Character Styles Panel in Illustrator for your headings, your body text, and whatever other Styles you may need, can really help speed up the design process for all your web and mobile app projects.

There are currently no FAQs about Productivity Tips for Web Designers.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Productivity Tips for Web Designers.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.