Use premium web fonts from Typekit to design a beautiful website without writing code.
Typekit is now Adobe Fonts.
What you'll need
As part of your Creative Cloud membership you have direct access to thousands of quality, premium web fonts from Typekit to use seamlessly in your desktop and mobile designs.
1. Add a web font from Typekit
Download the beautiful-web-typography.zip file and open the Ike's_Bikes_before.mu file. Switch to Design mode and click the Text tool. Select the text below the Services heading. Then click the font pop-up in the Text panel and Choose + Add Web fonts from the menu.
2. Choose a font
Click Get Started then click the Typekit tab in the Add Web Fonts window. Search for Adelle and select it in the font browser, then click OK.
With your text still selected choose Adelle Light from the font pop-up menu.
Note: You have access to an extended library of web fonts from Typekit with your paid Creative Cloud membership. To achieve the look applied to the website in this tutorial we used fonts from the extended library.
3. Pair fonts for headlines and paragraphs
Careful selection of different fonts for headings and paragraphs help give this site a clean, modern look.
Add the Prenton Ultra Condensed font using the process in step 1. Then, with the Text tool, select the Services heading. Click the font pop-up menu in the Control panel and choose Prenton Ultra Condensed > Regular.
4. Redefine Paragraph styles
With the headline text still selected, open the Paragraph Styles panel, the H1 + style should be highlighed. Click the Redefine Style icon to apply the new font to all headings.
Select the paragraph below the Services heading. The Body + style should be highlighed in the Paragraph Styles panel. Click the Redefine Style icon to redefine the style. All your body text will now use Adelle Light.
Tip: You can also right-click on a style and choose Redefine Style to update a style.
5. Make headings all-caps
Select the Point Services heading with the Text tool. Open the Text panel (Windows > Text) and click the Uppercase icon.
6. Apply superscript
Select the 00 in the price below the 93 Point Service heading. Click the Superscript icon in the Text panel. Do the same to all the other prices on the page.
7. Change the bullet character in lists
Each font has its own set of default bullets. However, for a unique look, you can apply the bullets from a different font to your bulleted lists. Add the Franklin Gothic URW Extra Condensed font using the process from Step 1.
Open the Bullet panel (Windows > Bullets). With the Text tool, select the list below the 67 Point Service heading. Click the bullet list button to create a list.
In the Bullet panel, click the options button next to the bulleted list menu and then click + New Character. Then click the font pop-up menu and choose Franklin Gothic URW Extra Condensed> Book. Click the diamond bullet, then click Add and Ok.
8. Apply the new bullet character
Now you can click the diamond in the Bullet panel to apply it to your list.
Tip: You can save this a new bullet style. Open the Bullet Styles panel and click the New style icon. Then you can apply your bullet style to all the other lists on the page.
9. Use ligatures
Choosing a font that supports ligatures can improve the appearance of character pairs or triplets that have features that tend to overlap when used together, like "ff" or "fi".
The Adelle font you applied as the Body style, has ligatures built in. However, to ensure ligatures appear across modern browsers, open File > Site Properties and click the Content tab. Click the Web Font Characters menu and choose All.