Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
When working in print design, the choice in what font to use ultimately lies with the rationale for its use. However, in web design you have to consider not only a font that matches your design, but also one that is available on another user's computer. While there are some ways around this issue, it is important to understand the way that Muse organizes and uses fonts. On this page let's scroll down and select some text. I'm going to grab this headline, Celebrating the Best of Modern Art. Now, at the top of the screen we can see this is the Arial font with a globe next to it.
The globe is telling us that this is a Web Safe Font, which means anybody can use it. So if I choose this font, you can see right now we have the option for Arial. Arial is likely to show up on everybody's computer, but in the case that it isn't, when we hover over, an alternate font dialog will appear. It says Helvetica Neue, Helvetica, and finally Sans-Serif. What that means is if you happen to use this font in your layout and someone didn't have Arial on their computer, it would roll back to each of those fonts and then finally to a Sans-Serif if a user didn't have any of those fonts on their computer.
Web Safe Fonts are a great choice to use for a lot of your text. One of the best reasons for this is it is actual selectable text on your website. So if I click Preview and I scroll down, I'm able to select all of this text. I could copy it to a clipboard, paste in another document, search on the page, or for people with visual impairments, they'd be able to find this text and have the screen read it back to them. They could even change the size of the font to be larger or smaller, even replace the font with a different font. Now, another option are System Fonts.
I'm going to select this exact same text and go into my text field, and we're going to scroll down into System Fonts. And you notice it says export as image. Well, let's come down here, and now I'm going to choose Apple Chancery. Now, we're going to make this a little bigger so we can see this. That looks better. And I'm going to make it be a different color so it pops a little more. Let's grab the eyedropper, and we're going to grab, let's say this blue. No, that's not dark enough. We're going to need to choose something else.
Let's make it a little bit darker, there we go. That looks the way that I want it to be. Now, this looks really good in my layout, I can select my text, I can change the spelling, I can type something else, that's not a problem, but watch what happens when I click on Preview. When I click on Preview, everything looks good, but if I try to select this, it's not going to let me. The reason is this font is a System Font which will automatically export as one big image. So back in Design mode, if I scroll down, you notice this little icon in the lower right-hand corner, this is telling me that this entire frame is getting rasterized as one big picture, which is a really bad idea because you can't select the text. It's bad for search engine optimization and accessibility.
You really don't want to do this unless you absolutely have to. So a good compromise is if I really like this headline and I want to keep it looking like this is just to put it inside its own frame. So I'm going to select this text and cut it to the clipboard. Next, I'm going to go out here and click and drag to draw a frame and paste it in. Next, I'm just going to move this frame down, we'll put this one up here, and we'll resize this and put it right where I want it to be. So now looking at this, this text looks exactly the same as it did before, but only this top frame is going to get rasterized and everything else will stay as normal text.
To prove this, we'll go back in Preview mode, and you can see I can select all of this text, but I can't grab this one, because it's just a picture. Be sure to try and use web safe fonts for the majority of the text in your layouts. This will make it easier for people to change the size of your text in your site, search, and even copy the text for other uses. However, there is another option that combines the freedom of design that System Fonts bring, combined with the flexibility of web safe fonts. In the next movie we'll take a look at using Web Fonts.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.