When you use Adobe 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.
When you apply the font to format text content, you have three choices:
- Web fonts
- Standard fonts
- System fonts
Here's a brief description of each option:
Web fonts in Adobe Muse consists of Typekit fonts, Edge Web Fonts, and Self-hosted Web Fonts. They enable you to access a large library (with hundreds of font types) that you can apply to your pages in Adobe Muse. When you apply web fonts to text content, Adobe Muse automatically adds the code in the page that will create links to the font family. When a browser visits the page, it will download the web fonts needed to render the page and display the content as text. This has many advantages because you can design your headers and other important text content using a large variety of fonts and the published or exported pages will render the text as selectable text. However, take care not to use too many web fonts on the same page. Just like image-heavy designs, the browser may take longer to load a page if it has too many linked files. It is best to limit designs to using no more than three web fonts per page, and to keep the font size fairly large to ensure that the text will be easy to read. For more information, see Typekit and other Web Fonts.
Standard fonts (with fallbacks) are fonts that are likely to be installed on all machines that visit your site. These fonts include standard font families, such as Arial, Georgia, and Times New Roman. You can choose from a small set of commonly used Standard fonts, which render on the live site as text. Standard fonts load quickly but are not decorative. Standard fonts are the best choice when setting the formatting for long paragraphs of text content because they are optimized for legibility on the web. Use standard fonts whenever possible to ensure that your site performs well and doesn't take a long time to load.
System fonts enable you to use more unique typography, based on the specific fonts you (the designer) have installed on your machine. For example, if you are designing a site that has a specific theme, such as a gardening site, you can install an unusual flower font that isn't available in the Typekit web font library. It is fine to apply system fonts sparingly to text, but remember that the text content will export as images. That means the page will take longer to load and visitors will not be able to select, copy, or paste the text on the page. System fonts are also best suited for small chunks of text, like headers. To make the site easy to use, avoid using system fonts for addresses, phone numbers, and any content that visitors might want to copy and paste into a calendar or email message. Keep in mind that some visitors have difficulty reading smaller text and may set the browser to increase the font size; but this strategy won't help them read text that is exported as image files. Also remember that search engines index sites looking for text content to set a site's ranking in the search results. For these reasons, it is best to only apply system fonts when you really need to make an impact in the design. If there is a comparable web font or Standard font, apply that font instead.
To apply each of these three types of fonts, select text using the Text tool and then choose the desired option in the fonts menu.
At the top of the Font menu you'll see the list of fonts that you've used recently. This makes it easy to reapply them as you are designing pages. If you later decide you do not want to see that many fonts, or want to clear all recently used fonts, you can update the settings in the Adobe Muse preferences.
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.
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 Adobe 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 Standard fonts and System fonts. To style text using web fonts, follow these steps:
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.
Once you have applied a 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.
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.
Once you are finished designing a site, click Preview to see how the design appears within Adobe Muse. Or choose File > Preview Page in Browser, to see review the design in a browser window.
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.
The Font menu contains a section that lists Standard fonts. You can freely apply Standard fonts to design pages, because all modern computers already have them installed. There's no need to install anything new on your machine and visitors will already have the fonts available on their computers to render the text content on pages.
Standard fonts are a small set of commonly used computer fonts, which all computers share to display text content. Text using Standard fonts render on the live site as text.
Like web fonts, Standard fonts enjoy all the benefits of rendering text as text, including:
- Visitors can select, copy, and paste web page content
- Pages with text content load more quickly compared to image heavy pages
- Search result ranking improves because search engines can index text content
- Visitors using screen readers can access text more easily than image content
However, the downside of using Standard fonts is that you are limited to a small number of choices when designing pages.
When you use the Font menu to choose Standard Fonts, the full list is displayed.
Standard fonts are limited to:
- Comic Sans
- Courier New
- Lucida Sans
Notice that if you hover over an option, a tooltip displays a list of alternate fonts.
This tooltip indicates that in the event that the visitor does not have the font installed that you apply a similar looking font will be substituted automatically. The page design looks like the original design and the missing font will fail gracefully without the visitor noticing. They won't see an error message and the page content will load. The text will just display using a similar, alternate font that is installed on their machine.
Generally speaking, Standard fonts are a good choice for page content that needs to be legible and easy for visitors to navigate—but the limited set makes it harder to find a typeface that reflects the site’s aesthetic.
System fonts refer to the fonts that you have installed on your individual computer. You can install them for use for a wide variety of programs, including image-editing programs. And those same fonts are also available for you to apply when designing pages in Adobe Muse.
For example, if you are designing a website about an earthquake, you can install a font with a shaky or cracked look, so that the page headers match the theme of the design. Any font you install can be used within Adobe Muse, so you are not limited in your page layouts and you can completely personalize pages (or use a client's custom font on their site). System fonts enable you to use a wide variety of unique fonts so that you can really spice up pages.
Visitors will see the text with system fonts applied exactly as you've styled it, even though they do not have the fonts installed on their machine. To accomplish this, Adobe Muse automatically exports any text using system fonts as image files. It is a seamless operation that happens behind the scenes. And as you are designing pages, the system font text remains editable so you can continue to make changes.
If you choose System Fonts in the Font menu, you'll see the list of fonts you have installed on your machine.
The downside of applying system fonts to text is that text is rendered on the live site as images, which take much longer to load than text content.
There is a trade-off with using system fonts, because you can use more unique typography, based on the specific fonts you (the designer) have installed on your machine. But as a result of applying those font families, the pages become image heavy and take longer to load. And that can impact a site's performance.
So apply system fonts to text in your designs sparingly.
Also, it is a best practice to select text with system fonts applied, even if the text is not linked, and enter a descriptive title in the Title field of the Hyperlink menu.
When you preview the page in a browser, the Title appears as a tooltip when you hover over the text.
The title tag is helpful for visitors using screen readers, who are listening to your site content rather than visually reading it. Adding titles is also very important because search engines that index a website will use the image's title to better categorize the site's content, especially if the image text is conveying important information, such as the page headers.
Whenever possible, look for Standard fonts that are comparable to the system fonts you have installed, and use them instead.
After you apply fonts to text in Adobe Muse, the first section of the Font menu displays the name of the fonts. This feature facilitates the process of re-applying the same fonts to other text in your site design, because the fonts are easy to locate. It is not necessary to remember which fonts are web fonts, standard fonts, and system fonts. All three types of fonts are listed at the top, if you have previously applied them.
In general, it is a web practice to limit the number of fonts used on a page. If you use 4 font faces or less on a page, the text content tends to be more legible when viewed by visitors on a screen. Usually the Recently Used Fonts section will only list a handful of font names, making it easy to navigate.
However, you may be experimenting with different fonts in a design. Or you may be designing several different sections of the site, and discover that the Recently Used Fonts list in the Fonts menu has become much longer. If the list becomes too long, choosing the desired font face becomes more difficult.
You can control the display of fonts listed in the Recently Used Fonts section. Follow these steps: