Adobe Muse / Tutorials

Typography in Muse: Using web fonts, web safe fonts, and system fonts, part 1

When you use Muse to design web pages, you can choose between three different font types to apply fonts to text. When you publish or export pages, the font type you apply determines how text content is rendered. The three different font types also affect site behavior and performance in varying degrees, so it is important to understand the results of choosing each type.

To add text to a web page, you can:

• Use the Text tool to type text directly on the page

• Choose File > Place and choose an external TXT file to place the text content

• Copy text from another external source and then paste it on the page

 

Once you have created a text frame that contains text, you can use the options in the Text panel or the Control panel to set the font's color, size, style, alignment and other formatting options. You can also use the Font menu to choose a font (such as Arial or Helvetica) to match your page design.

In this article, you'll get an overview of the three different types of fonts you can apply using the Font menu. You'll learn about the benefits and potential issues associated with each font type, and strategies for controlling text and editing text frames.

Back to top >>

 

Understanding the difference between web fonts, web safe fonts, and system fonts

After creating and selecting some text content, you can use the Font menu (located in the Text panel and the Control panel) to choose a font. When you want to format and style text, use the Text tool to select the text and then apply changes that affect the appearance of the text content.

Note: If you select the text frame using the Selection tool, you can change the location, rotation, appearance, and dimensions of the text frame.

The Font menu contains three sections that list web fonts, web safe fonts, and system fonts.

Figure 1. The Font menu is available in both the Control panel (as shown above) and in the Text panel.

Each of these top-level font options has sub options that you can choose to apply specific fonts.

Here's a brief description of each font type:

•  Web fonts are hosted by Typekit and display dynamically as a page loads

•  Web safe fonts are a small subset of fonts installed on all modern computers

•  System fonts are fonts installed on your computer; text is exported as images

In the following sections, you'll find more detailed descriptions of each type of font and how applying each type affects the rendering of text content on a live website.

 

Back to top >>

Working with web fonts

Web fonts enable you to choose from hundreds of fonts in a large online library hosted by Typekit.com. The library of web fonts in Muse is included with your Adobe Muse subscription. You don't need to sign up or purchase a Typekit account to access the fonts and start using them in your web designs.

Note: If you have a Typekit account, you'll notice that the set of web fonts currently available in Muse is different than the set you access when visiting typekit.com. The web fonts provided in Muse are free, restriction-less, and do not require a Typekit account. The web fonts offered with a Typekit account are metered and access-controlled. Future versions of Muse will enable you to access your library of Typekit fonts from within the Muse workspace, but this feature is not yet available.

The benefits of using web fonts are:

•  You can choose very unique and stylized fonts to style text content, even though you do not have the fonts installed on your computer

•  Web fonts that you apply to text are linked to pages automatically when you publish, export, or preview the site

•  The fonts are hosted by Typekit.com. When visitors view the live site in a browser, the font is downloaded behind the scenes to display the text

In the rare event that the Typekit servers are unable to load the font you've applied dynamically as the pages load, the text content will still display—using a default backup font. This scenario is very unlikely, but it is good to note that the text content will still be legible to visitors in any case and the site won't display an error message.

Exercise caution when adding web fonts to your design. If you add too many web fonts, visitors will experience longer overall download times, which may make sites much slower—impacting the overall user experience. With this in mind, limit your designs to applying 1-2 font families with 4 styles per family. Because web fonts are remote resources (just like images and video), they must be downloaded into the visitors' browser cache as they view a site's pages.

Another feature is that Muse tracks all of the web fonts that are used in a site. If you remove a web font that is in use for a .muse file, the web font will remain in the list in the Font menu the next time you open the .muse file. So you can't accidentally remove a web font that the site needs, and you don't have to manually keep track of the fonts you are using as you design pages.

 

Back to top >>

Adding web fonts to a Muse project

Follow these steps to add a new web font:

1. Use the Text tool to select some text in a text frame.

2. Use the Font menu (in the Control panel or in the Text panel) to choose Web Fonts > Add Web Fonts...

Figure 2. Choose Add Web Fonts in the Web Fonts section of the Fonts menu.

A new window appears that displays the web font library.

Figure 3. The web font library allows you to access hundreds of fonts that you can apply to your pages.

You can click the Filters across the top of the page to choose the style of font you are interested in adding. Or use the search field to find a font by name.

3. Once you find a font that you want to use, simply click it. A checkmark appears indicating the font is selected. You can choose multiple fonts to add at once, if you'd like.

Figure 4. Click the fonts you want to add; a checkmark indicates that they are selected.

You can click the single line or multi-line button near the top right side to view the fonts that are best suited for headers or paragraphs.

Figure 5. View the list of fonts that work well for styling header text.

If you click the checkmark button to the far right, the window displays the list of fonts that you've selected. If you change your mind and decide not to add a font, just click the font's name again to deselect it.

4. When you are finished selecting the fonts you want to add, click OK.

Figure 6. Click OK to close the web font library and add the selected fonts.

The Web Fonts Notification dialog box appears, confirming the new web fonts were added.

5. Click OK. (And check the Don't show again checkbox if desired).

Figure 7. Click OK to close the confirmation message.

Now when you use the Font Menu to choose the Web Fonts option again, the list of fonts you added are displayed.

Figure 8. The Web Fonts section of the Fonts menu displays the web fonts you added.

 

Back to top >>

Applying fonts to selected text

For the best font rendering results, choose a font that is suited to your intended use. For example, when you are applying a font to paragraphs (large amounts of continuous text displayed at smaller font sizes), avoid choosing more ornate, decorative fonts (which are typically intended for headers displayed at larger font sizes).

One of the most important considerations for text in websites is to ensure it is legible. Ornate fonts don't render well at small font sizes because there's not enough resolution on the web to render the amount of visual detail they contain.

Additionally, a paragraph font should have the regular, italic, bold and bold italic styles available, so that you have the ability to embolden or emphasize text to highlight people's names, book or movie titles, and other distinctive content within a paragraph. Many decorative and highly stylized font families do not include these style options.

Fonts can be technically optimized for particular uses, as well. A font may use an outline format that renders better specifically at larger sizes, or it might contain font hinting, to render optimally at smaller sizes across platforms. As mentioned previously, when you access web fonts in Muse, the web font library enables you to filter the fonts to see the list recommended for use in paragraphs or in headings. If you are not sure whether a specific font will work well for text headings or paragraphs in your design, choose fonts based on these paragraph and heading recommendations, and you'll be confident that the pages you create are easy to read.

You can style text with web fonts using the same process used to apply web safe fonts and system fonts. Follow these steps:

1. Use the Text tool to select some text in a text frame.

2. Select the font you want to apply in the Font menu, by choosing Web Fonts and then selecting the name of the Font family from the list.

Figure 9. Apply a web font to selected text content by choosing the font's name.

Once you have applied a web font, a web safe font, or a system font, you can use the Text panel or the options in the Control panel to set the font's size, color, and other attributes as desired.

Tip:  Web fonts behave just like any other font type as you design pages. You can edit the formatting of the text, edit and resize the text frame, and position it on the page where you want it to appear.

3. Once you are finished designing a site, click Preview to see how the design appears within Muse. Or choose File > Preview Page in Browser, to see review the design in a browser window.

As mentioned above, web fonts are especially useful for designing interesting pages because you can choose from hundreds of fonts and (unlike system fonts) the unique typography in the page is exported as text, not as image files.

4. Notice that when you preview the page in a browser, the web font text is rendered as text content. Try selecting it and copying it to see how it behaves.

Figure 10. Web font text is selectable in a web browser because it is exported as text.

Exporting text content as text, rather than images, is preferable. When you choose system fonts, the text content is exported as images, which causes the pages to take longer to load.

Using web fonts, visitors can copy and paste the text content directly from the site's pages. This enables them to access and store addresses, phone numbers, and other important information that they want to share with someone or store offline in their Address Book.

The rendering of web fonts as text also helps improve a site's search result ranking because as search engines index the content of websites they parse text content more easily than image files. So using web fonts helps sites gather more traffic, as well as loading pages more efficiently for visitors.

And finally, the text content is much easier for visitors using text readers to navigate. Rendering important areas, like page headers, as text ensures your site is more accessible for everyone.

In the next section of this tutorial — Typography in Muse part 2 ­— you'll learn how to work with web safe vs. system fonts and specific typographic controls like padding, text wrap, leading and tracking.

Back to Top >>

 

 

 

 

 

 

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.