Set beautiful type for your site

Use premium web fonts from Typekit to design a beautiful website without writing code.

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.

Add web fonts

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.

Search for font

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.

Add Prenton Ultra Condensed font

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.

Redefine Style icon

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. 

Open the Text panel

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.

Apply superscript

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.

Bullets panel with text selected
Change the bullet character

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. 

Apply new bullet character

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. 

Use ligatures
06/15/2015

Contributor: Ali Pordeli

Was this page helpful?
Yes
No