Configuring Font Settings for Links

The Font popup lets you change the font family of a text element and configure the settings that affect its appearance. If the text element is a link, the Font popup will have additional settings that allow you to set the hover style for the link text.

To edit the appearance of a link text element:

1. Click on the font name at the right of an element.
   

   The Font popup for links will be displayed

   
2. Select the font family from the dropdown list.
3. Configure the settings for the selected font.
   • Color: lets you specify the color of the link text. Click on the color spot to edit the color using the Color popup. See the Using the Color Popup article for instructions.
   • Size: sets the size of the font in pixels. Use the slider or specify a value between 6 and 120.
   • Line Height: sets the height of the line of the text element by adding space above the text. The height is specified as a factor of the current font size. Use the slider or specify a value between 0.6 and 6.
   • Weight: sets how thin or thick the characters of the text should be.
     • 400: Standard weight
     • 700: Bold weight
   • Italics: displays the font in italics if the checkbox is ticked.
   • Small Caps: if this checkbox is ticked, all letters entered as lowercase will be set to uppercase, but will maintain the original height of the lowercase letters.
   • Spacing: sets the letter spacing of the font as a factor of the current font size. Use the slider or specify a value between -0.1 and 0.4.
   • Letter Spacing: sets the letter spacing of the font as a factor of the current font size. Use the slider or specify a value between -0.1 and 0.4.
   • Word Spacing: sets the word spacing of the font as a factor of the current font size. Use the slider or specify a value between -0.1 and 1.
   • Decoration: sets the appearance of the decorative line, if any, added to the text.
     • None: no line is added.
     • Underline: adds a 1-pixel line across the baseline of the text.
     • Overline: adds a 1-pixel line across the top of the text.
     • Line-Through: adds a 1-pixel line across the middle of the text.
   • Transform: sets the capitalization style of the text.
     • None: leaves the text exactly as it was entered.
     • Capitalize: capitalizes the first letter of each word.
     • Uppercase: makes all letters uppercase.
     • Lowercase: makes all letters lowercase.
   • Edit Hover: lets you configure the appearance of the link text when you move the mouse over it. Tick the checkbox to enable the hover settings.
     
     • Hover Transition Duration: sets the length of time, in milliseconds, over which the hover properties will occur. Enter a value between 0 and 2000.
     • Hover Color: sets the color of the link text on hover.
     • Hover Size: sets the size of the link text on hover, in pixels.
     • Hover Weight: sets how thin or thick the characters of the text are when you hover over them.
       • 400: Standard weight
       • 700: Bold weight
     • Hover Italics: displays the font in italics on hover if the checkbox is ticked.
     • Hover Decoration: sets the appearance of the decorative line, if any, added to the text on hover.
       • None: no line is added.
       • Underline: adds a 1-pixel line across the baseline of the text.
       • Overline: adds a 1-pixel line across the top of the text.
       • Line-Through: adds a 1-pixel line across the middle of the text.
     • Hover Transform: sets the capitalization style of the text on hover.
       • None: leaves the text exactly as it was entered.
       • Capitalize: capitalizes the first letter of each word.
       • Uppercase: makes all letters uppercase.
       • Lowercase: makes all letters lowercase.

     For the Size, Line Height, and Spacing properties, you can use the slider to configure the setting.

     

     The slider will appear when you hover your mouse anywhere along the line between the label and the input field of the property.

4. Close the font dialog box.