Typography in Muse Part 1 describes how to work with web fonts and apply fonts to text content. In Part 2 of this series, you'll learn about web safe fonts and system fonts. You'll also get tips for editing text frames and controlling the layout of text with padding, indenting, and more.
Working with web safe fonts
The Font menu contains a section that lists web safe fonts. You can use freely apply web safe 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.
Web safe fonts are a small set of commonly used computer fonts, which all computers share to display text content. Text using web safe fonts render on the live site as text.
Like web fonts, web safe 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 web safe fonts is that you are limited to a small number of choices when designing pages.
When you use the Font menu to choose Web Safe Fonts, the full list is displayed.
Figure 11. Choose Web Safe Fonts from the Fonts menu to see the full list.
Figure 11. Choose Web Safe Fonts from the Fonts menu to see the full list.
Web safe fonts are limited to:
- Comic Sans
- Courier New
- Lucinda 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, web safe 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.
Working with system fonts
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 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 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, 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.
Figure 12. The System Fonts section displays the list of fonts you have installed.
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.
Figure 13. Enter a descriptive title in the Title field.
When you preview the page in a browser, the Title appears as a tooltip when you hover over the text.
Figure 14. The Title text you enter appears as a tooltip.
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 web safe fonts that are comparable to the system fonts you have installed, and use them instead.
Editing the appearance of text frames
No matter whether you apply web fonts, web safe fonts, or system fonts to text, you can always edit the text content while working in Design view. You can also update the appearance of the text frame itself, so that the text block displays differently.
Think of text frames as containers that surround each section of text. You can control them in many ways to affect how they will display on the live site.
When you want to format and style text frames, use the Selection tool to select the text frame and then apply changes that affect the appearance of the text content.
Note: If you select the text using the Text tool, you can style the text by setting formatting options in the Text panel or the Control panel.
You can resize the dimensions of a text frame by dragging the handles to stretch or shrink it. You can also drag the entire text frame around on the page to reposition it. As you resize the text frame, a tooltip displays its dimensions.
Figure 15. Drag the handles surrounding a text frame to resize it.
You can also rotate a text frame, but be aware that if you rotate a text frame (regardless of the fonts you apply) the text will be exported as an image file. So do that sparingly, and always add a title to rotated text.
To update the appearance of a text frame container, you can use the same formatting options you use to edit rectangles. You can set the fill color and even add background images. You can also set a stroke and use the same settings to control the stroke width, color, and alignment. Using the Corners and Effects menus in the Control panel, you can set the corner radius of the text frame and apply drop shadows, bevels, and glows.
Figure 16. Set fill, stroke, corner radius, and effects using the options in the Control panel.
To add transparency to a text frame, change the opacity value using the Opacity slider.
And use the Hyperlink menu and Hyperlink field to add titles to text, as well as adding links and defining if the link opens in a new browser window.
Controlling text alignment and wrapping text around an image in a text frame
Text frames are extremely useful for creating page content. As you saw in the previous section, text frames can contain graphic elements and effects, as well as holding text content.
In this section you'll take a look at how to control the text content within a text frame, by setting padding to add more space. You'll also learn how to create magazine-style layouts by creating columns of text that wrap around images.
Adding padding to text
By default, the text you type, place, or paste into a text frame is aligned along the left side. If you look at the settings in the Spacing panel, they are all set to 0.
Figure 17. The default padding applied to text in a text frame.
To add more space to the left, right, top, or bottom of the text frame, type the desired value (in pixels) or click the up and down arrows next to each field to increment or reduce the numeric value.
Figure 18. Update the Padding values to control how the text displays in the text frame.
Indenting text and controlling leading and tracking values
You can control text formatting in Muse the same way you update text content in word processors and many other image editing tools. The Text panel includes many additional settings, some of which are not displayed in the Control panel when text is selected.
Follow these steps to indent the first line of text in a paragraph:
- Use the Text tool to select some text.
- Update the Indent value in the Text tool to the desired pixel value.
Figure 19. Type a number in the field or click the up and down arrows to change the value.
The Letter Space option in the Text panel enables you to define the amount of space between each character. It is especially useful for text effects and to make ornate or stylized fonts easier to read on the web.
You can apply letter spacing to selected text by entering the number of pixels in the Letter Space field. Alternatively, you can click the up and down arrows to increment or decrease the value until you achieve the desired effect.
Figure 20. Type a number in the Letter Space field or click the up and down arrows to change the value.
Leading is another helpful feature you can use to control the format of text in paragraphs. Leading enables you to adjust the space between lines of text. The Leading feature is available in both the Control panel and the Text panel.
Figure 21. Update the Leading value to add or decrease the space between lines.
The other four typography controls available in the Text panel are:
Left Margin and Right Margin
As you would expect, these control the space between the characters on either side of the text frame, and the text frames' border. These settings are very similar to setting the Padding values in the Spacing panel, except you select the text frame with the Selection tool, (rather than selecting the text content with the Text tool) to edit padding values.
Space Before and Space After
You can use these settings to control the amount of space (in pixels) that is displayed before or after a hard paragraph return. These settings enable you to display more or less white space in between a set of paragraphs that are in a single text frame.
Be sure to experiment with using all of these settings in the Text panel to learn how you can control the display of text content on the pages you design.
In the next section of this tutorial — Typography in Muse part 3 — you'll learn how to wrapping text around an image in a text frame and create a rollover button using a text frame