Home / Articles / Adding and Styling Text

Adding and Styling Text

Chapter Description

In this sample chapter from The Adobe Muse CC Classroom in a Book, author Brian Wood provides step-by-step instructions on adding and formatting text and creating type styles on your Adobe Muse created website.

Formatting text

In this section, you’ll work with a wide range of text formatting options available to you in Muse, from changing font size to adjusting paragraph spacing. You can find these formatting options in the Control panel (Window > Control) and Text panel (Window > Text).

The Text panel contains more formatting options than the Control panel, but the Control panel can be more convenient because it’s always showing (by default).

  • Open the Text panel by choosing Window > Text, and take a look at some of the formatting features available. With either a text frame selected, or text selected within a frame, the options in the Text panel become available.

The first formatting you’ll change is font size. Muse uses Arial as the default font and 14 pixels as the default font size, whether you type or place your text onto your pages.

Adjusting font size

In print work, most of us use the unit points to set the size of text. In Muse, the font size unit used is pixel to correspond with web standards.

  1. Select the Text tool (text_tool.jpg) in the Toolbar, and insert the cursor in the text frame that begins with the text “Coffee... At CoffeeShop, our coffee is...”

  2. Choose Edit > Select All.

  3. Choose 18 from the Font Size menu in the Control panel. The text frame may expand to fit the resized text.

  4. With the Text tool still selected, position the cursor over the “Coffee Company Food & Beverage Offerings” text. Click three times to select the text.

  5. In the Font Size menu in the Control panel, select 14 and type 28. Press Return (Enter) to accept the change.

    If the text is wrapping in the text frame, you can select the Selection tool and drag the right, middle point to the right until all of the text fits on one line. Know that you will fix that in a later lesson if you decide not to do it now.

  6. Select the Selection tool (selection_tool.jpg) in the Toolbar and click the larger text frame. Drag the bottom, middle bounding point up until a dotted line appears. You won’t have to drag far.

    The dotted line across the text frame near the bottom indicates a minimum height for the text frame. When you drag the frame shorter than the text and the dotted line appears, Muse inserts a style property called min-height in the code. This tells the browser that the frame must be at least that tall and can expand in height if the content dictates it.

  7. Drag the same bottom, middle bounding point down until the dotted line disappears.

  8. Choose File > Save Site.

    Selecting a font

    For years, web designers and developers had to rely strictly on “web safe” fonts, or fonts that came installed on Mac OS and Windows machines. We used web safe fonts in our designs because a font we used on a web page needed to be installed on the machine of the visitor viewing your website for it to work. These days you can use a variety of methods, like hosted fonts, for getting the font you want in your page designs.

    Using a hosted font in your design will cause the web fonts needed to download to the users machine and display the content as text in the chosen font. This has lots of advantages, one being the large variety of fonts we can now use in our designs. In this section, you’ll change the font that is applied to the text by default. Adobe Muse offers three categories of fonts that you can use:

    • Standard fonts (with fallbacks): Most systems or devices have these fonts installed, which increases the likelihood of them displaying correctly on your visitors’ devices. These are also referred to as “web safe” fonts.

    • System fonts: These fonts are those located on your machine. If you apply one of these to text on your pages, Muse converts that text to an image when your site is previewed, published, or exported.

    • Web fonts: These are fonts hosted by a company such as Adobe Typekit, Edge Web Fonts, or Self-Hosted fonts. When a hosted font is viewed, your site visitor’s browser downloads the font from that company’s server, so the font appears on your web page regardless of whether that site visitor owns the specific font. Using Muse, you get access to a wide variety of fonts hosted by Adobe Typekit.

Applying a standard font

The first category of font you’ll use is a standard font that you’ll apply to the placed text on the MENU page.

  1. Double-click the placed text frame, that contains the text, “Coffee... At CoffeeShop, our coffee is...” to switch to the Text tool (text_tool.jpg).

  2. Insert the cursor in the text, if it isn’t in the text already, and choose Edit > Select All.

  3. Click the Font menu in the Control panel.

    In the Font menu that appears, you’ll see a sectioned list with each of the three font categories available: Web Fonts, Standard Fonts (with fallbacks), and System Fonts (exports as image). Web fonts and system fonts are grouped by font family. Individual weights and styles (e.g., Bold, Italic, Bold Italic, etc.) of multiface font families appear in submenus. At the top of the menu is a filter by name field that you can use to search for fonts by entering a font name or partial font name, as well as a recently used fonts list.

  4. In the menu, click the Standard Fonts (with fallbacks) category shortcut to scroll to those fonts. Position the pointer over the Lucida Sans font in the list that appears.

    A yellow tooltip appears. In the tooltip, you’ll see the words “Alt Fonts...” and a list of fonts. Keep in mind that selecting a web safe (standard) font doesn’t guarantee it will work, because visitors need to have the font (Lucida Sans in this example) on their devices. The alt (alternate) fonts are second, third, and subsequent choices the browser will use if Lucida Sans isn’t available. You cannot change alt fonts in Muse. Just know that Muse selects alternate (fallback) fonts that are similar to your first choice font.

  5. Click the Lucida Sans font to apply it to the text.

Adding Typekit web fonts

The next type of font you’ll apply to text is a web font (also called a hosted font). You’ll need an Internet connection to choose a web font the first time. Choosing a web font in Muse will download a local version of the font so that you can preview it in Muse when you’re working on your site. The code for your page will contain a link to the Typekit servers that allows site visitors to view the font in the browser, but you don’t need to worry about that. Even if you decide to export the site content and host the site elsewhere, you can still use the web fonts that you apply to your design content within Muse.

  1. With the Text tool (text_tool.jpg) selected, select the “Coffee Company Food & Beverage Offerings” heading text. Click the Font menu in the Control panel. In the Font menu click the Web Fonts category to see the options. Click the +Add Web Fonts option that appears to open the Add Web Fonts dialog box.

  2. Click the Get Started button in the Add Web Fonts dialog box to begin selecting Typekit web fonts.

  3. In the Add Web Fonts dialog box, type Estilo in the Search For Web Fonts field at the top of the dialog box. You’ll see that on each of the tabs (Typekit, Edge Web Fonts, and Self-Hosted) below the field, a number appears next to the name on the tab. The Typekit tab will show (3) most likely (circled in the following figure). This indicates that 3 Estilo fonts were found on Typekit.

  4. With the Typekit tab selected, click to select the Estilo Pro font in the list and a blue check mark appears next to the font name indicating that it will download and appear in your web fonts list when you’re finished.

  5. Clear the word Estilo from the search field by clicking the X on the right end of the search field.

  6. Click the Filter button. Click the Sans Serif button in the Classification options.

  7. Filtering allows you to see only specific font types, such as serif or sans serif. To stop filtering, you can click the filter button again and deselect the filter option.

  8. Click the Acumin Pro font, and then any other font you want, to select them both. I selected Proxima Nova. You may want to scroll in the list of fonts. Both fonts will show a blue check mark. Click OK.

  9. When the Web Fonts Notification dialog box appears, click OK.

    The Web Fonts Notification dialog box indicates that the fonts you’ve chosen have been downloaded and added to the Font menu. The fonts will appear in the Font menu no matter what site file is open, allowing you to apply them to any site.

Managing Typekit web fonts

While designing your site, you may want to add more Typekit fonts, or even remove a few from the font list in Muse. Next, you’ll learn how to add and remove a Typekit font from the list.

  1. Choose File > Add/Remove Web Fonts.

    This is just another way to access the Add Web Fonts dialog box. I will sometimes use this menu command when I work on a Muse site so I can load Typekit fonts I know I need even before I begin designing.

  2. Click the Get Started button in the Add Web Fonts dialog box.

  3. Click Selected Fonts in the dialog box (circled in the following figure).

    This shows a list of all of the web fonts that you’ve downloaded.

  4. Making sure Acumin Pro and Estilo Pro are still selected, click the Proxima Nova font (or the extra font you chose) to deselect it and remove that font family from the Web Fonts menu. Click OK.

  5. Click OK in the Web Fonts Notification dialog box that indicates that the font family was removed.

  6. With the header text still selected, click the Font menu in the Control panel, and then click the Estilo Pro > Medium font, or a font you selected. You may need to scroll in the list to see the fonts.

Changing other text formatting

With the main generic formatting complete, you can begin to fine-tune some of the text to better suit your design. As mentioned earlier, you can change the formatting options in either the Text panel or the Control panel, depending on what tool or content is selected in Muse and the resolution of your screen. For this part of the lesson, you’ll use the Text panel.

  1. Open the Text panel by choosing Window > Text or clicking the word Text in the docked panels on the right side of the workspace, if necessary.

    I dragged the Text panel from the dock closer to the text to make it easier to see the panel relative to the text.

  2. Click in the first paragraph of the text that begins with “At CoffeeShop, our coffee is...” to insert the cursor. Click three times to select that paragraph only.

    In the Text panel, notice that the Leading value (leading.jpg) is 120%. That means that the distance between the lines of text is 120% of the font size of the text.

  3. Change the Leading value to 140% in the Text panel.

    You don’t have to type the percent sign (%) because Muse will assume that the unit is percent. You can also enter a value for the leading with px (for pixel), like 32px, instead of a percent, and Muse will keep it as a pixel value in the code that is generated.

  4. With the Text tool (text_tool.jpg) selected, insert the cursor into the text, “Coffee Company Food & Beverage Offerings.” In the Text panel, click the Align Center button (align-center.jpg) to align the text to the center of the text frame.

    Muse offers four alignment options: Align Left, Align Center, Align Right, and Align Justify. The Align Justify option justifies the entire paragraph (makes it look like a block of text) except for the last line of text in that paragraph. Next, you’ll adjust the spacing between the letters in the heading.

  5. Select the Selection tool (selection_tool.jpg) in the Toolbar and ensure that the text frame that contains the “Coffee Company Food & Beverage Offerings” text is still selected. In the Text panel, change the Tracking option (tracking.jpg) to 1.

    In Muse, tracking is the distance between characters (not just letters). When you select the entire text frame, Muse changes the spacing between all characters in the text frame. If you come from the print world, tracking in Muse is the web equivalent of tracking and kerning. Muse tracking uses pixel values rather than the typical print unit of points. On the web, we typically use tracking for text like headlines, not entire stretches of body copy. Just keep in mind that every small kerning adjustment adds code to the HTML pages that Muse creates for you when you preview, publish, or export as HTML, which can ultimately increase download times for your pages.

  6. With the Selection tool selected, drag the text frame that contains the text, “Coffee Company Food & Beverage Offerings” into the horizontal center of the page. Make sure the top edge is still aligned with the guide you created previously. When a vertical smart guide appears in the center of the page between the columns, you’ll know it’s centered horizontally.

  7. Choose File > Save Site.

    There are lots of other text formatting options in the Text panel and Control panel to explore, like Left and Right Indents, Space Before and Space After, and more. Feel free to try them out!

Changing the color and case of text

The last bit of text formatting you’ll learn about is changing text color and changing text case from lowercase to uppercase and vice versa.

  1. Select the Text tool (text_tool.jpg) and select the first word “Coffee” in the text frame below the heading you just centered.

  2. Click the Color option in the Text panel (or Control panel) and change the RGB values to R=117, G=76, B=0 to change the color of the text.

  3. With the “Coffee” text still selected, choose Edit > Change Case > UPPERCASE to capitalize the selected text from “Coffee” to “COFFEE.”

  4. Choose File > Save Site.

Now that you’ve explored basic text formatting options in Muse, you’ll learn how to add bulleted and numbered lists to your page designs.

Creating a list

In Adobe Muse you can easily create both bulleted and numbered lists from your text. In this section, you’ll explore working with bulleted lists.

  1. With the Text tool (text_tool.jpg) selected, drag to select the three lines of text, Espresso... Latte... and Mocha.

  2. Click the Bullets button (bullets.jpg) in the Control panel to apply a bullet list to the selected text.

  3. Choose Window > Bullets to open the Bullets panel and change the following options:

    • Click the arrow to the right of the Bullets button (circled in the following figure). This is where you can select another available bullet. In this case, leave it at the default bullet character.

      • Color: 50% Grey swatch

      • Indent For Right Edge of Bullets (indent_bullet.jpg): 20

      In the Bullets panel, you can apply a list and edit bullet properties like size and color, as well as placement.

  4. Choose Edit > Deselect All.

3. Creating Type Styles | Next Section Previous Section

There are currently no related articles. Please check back later.