Understanding font styling options

General text appearance settings*:

* (Not all of the option areas shown below are available in all text appearance areas.)

Individual option explanations:

1) link/font size: This is, simply, the size of the font, specified in pixels.

2) font family choice: This area allows you to pick from about 14 fonts. You can also choose any custom fonts that you’ve uploaded.  For more information on uploading custom fonts, check out this tutorial here.

3) font styles: These buttons control basic styles for your text and have multiple states that you can cycle through by clicking on each button. For all the button states, a blue box indicates that the style is turned on, while no blue box indicates it is turned off. Each button also has a state with an arrow in the corner that tells the text to inherit settings for that style. Click for more info on INHERITANCE.

All of the font style button states

All of the font style button states

There are five types of text style buttons:

Bold – Sets apart text by rendering the characters thicker. Can be set to inherit, bold, or off.

Italics – Sets apart text by rendering the characters at a slight angle. Can be set to inherit, italics, or off.

Text-transform – Forces all the characters to a certain case. Can be set to inherit, UPPERCASE, lowercase, or off.

Text-decoration – Sets apart text by adding a line to the text. Can be set to inherit, underline, overline, strikethrough, or off.

Line-height – Sets the height of each line of text proportional to your font size. Can be set to inherit, 1.0, 1.5, 2.0, 2.5, or 3.0. (Your actual line-height is equal to your line-height value multiplied by your font size, so a line-height of “2” with a font size of 14px, will give an actual line-height of 28 pixels.)

4) text color: Set the default color for the text. If unchecked, the color for this text will be inherited from a more general text appearance area. For example, if you don’t set a color for your bio text, then this text would inherit the text color you set in your “ProPhoto” > Customize” > “Fonts” > “Overall font appearance” area. Generally speaking, text without a color applied will inherit the appearance settings that have been applied to the relevant option in the “Fonts” tab. If applying a color to the text, you can select your color using the built-in color picking tool. Click for more info

5) px below: This option will show up for some body font and heading text areas. Paragraphs and Headlines both have a default amount of space under them to give separation from the content that follows it. Here you set an exact amount of space under these elements in pixels.

Link-specific Appearance Settings:

Links are items that you want to stand out to your visitors. They are bits of text that you want to say, “Hey, I’m special, and if you click on me, I do something!”. There are some web standards regarding styling links that pretty much everyone will recognize. The first is to set your links to a color, or apply a text style that is different from the surrounding text. The “Hey, click on me” effect is achieved using what is called a “hover” effect.

6) link hover appearance: Set the text appearance that will display when visitors mouse over your links. When a visitors mouse moves over any link text, browsers give us the option of changing the appearance of this text. You can change the color or apply underline styling to the links to get their attention.

A brown link color with an underline style added to the hover

gives you this effect

7) link visited appearance: Set a different color for links that have already been visited. Web browsers actually have a memory and keep track of places you visit on the internet. Then they feed all of this information to secret government agencies. Not really, but if you apply a different color here, links that visitors have already gone to can be changed to this color for them. This helps folks keep track of where they have been. It also adds another color to your site, which can be unappealing, but we give you the option either way.

Live Font Preview*:

* (All text appearance areas have a live preview except for the Menu Link Appearance area)

8) Your most important tool when customizing text appearance is your live preview area. Clicking on any option within your text appearance area will open an area underneath the options containing some sample text. The sample text will vary depending upon the type of text being customized, but will allow you to see a live representation of your text as you make changes. You can even move your mouse over links to see hover styles.

General text appearance settings*:

* (Not all of the option areas shown below are available in all text appearance areas.)

Individual option explanations:

1) link/font size: This is, simply, the size of the font, specified in pixels.

2) font family choice: This area allows you to pick from about 14 fonts. You can also choose any custom fonts that you’ve uploaded.  For more information on uploading custom fonts, check out this tutorial here.

3) font styles: These buttons control basic styles for your text and have multiple states that you can cycle through by clicking on each button. For all the button states, a blue box indicates that the style is turned on, while no blue box indicates it is turned off. Each button also has a state with an arrow in the corner that tells the text to inherit settings for that style. Click for more info on INHERITANCE.

All of the font style button states

All of the font style button states

There are five types of text style buttons:

Bold – Sets apart text by rendering the characters thicker. Can be set to inherit, bold, or off.

Italics – Sets apart text by rendering the characters at a slight angle. Can be set to inherit, italics, or off.

Text-transform – Forces all the characters to a certain case. Can be set to inherit, UPPERCASE, lowercase, or off.

Text-decoration – Sets apart text by adding a line to the text. Can be set to inherit, underline, overline, strikethrough, or off.

Line-height – Sets the height of each line of text proportional to your font size. Can be set to inherit, 1.0, 1.5, 2.0, 2.5, or 3.0. (Your actual line-height is equal to your line-height value multiplied by your font size, so a line-height of “2” with a font size of 14px, will give an actual line-height of 28 pixels.)

4) text color: Set the default color for the text. If unchecked, the color for this text will be inherited from a more general text appearance area. For example, if you don’t set a color for your bio text, then this text would inherit the text color you set in your “ProPhoto” > Customize” > “Fonts” > “Overall font appearance” area. Generally speaking, text without a color applied will inherit the appearance settings that have been applied to the relevant option in the “Fonts” tab. If applying a color to the text, you can select your color using the built-in color picking tool. Click for more info

5) px below: This option will show up for some body font and heading text areas. Paragraphs and Headlines both have a default amount of space under them to give separation from the content that follows it. Here you set an exact amount of space under these elements in pixels.

Link-specific Appearance Settings:

Links are items that you want to stand out to your visitors. They are bits of text that you want to say, “Hey, I’m special, and if you click on me, I do something!”. There are some web standards regarding styling links that pretty much everyone will recognize. The first is to set your links to a color, or apply a text style that is different from the surrounding text. The “Hey, click on me” effect is achieved using what is called a “hover” effect.

6) link hover appearance: Set the text appearance that will display when visitors mouse over your links. When a visitors mouse moves over any link text, browsers give us the option of changing the appearance of this text. You can change the color or apply underline styling to the links to get their attention.

A brown link color with an underline style added to the hover

gives you this effect

7) link visited appearance: Set a different color for links that have already been visited. Web browsers actually have a memory and keep track of places you visit on the internet. Then they feed all of this information to secret government agencies. Not really, but if you apply a different color here, links that visitors have already gone to can be changed to this color for them. This helps folks keep track of where they have been. It also adds another color to your site, which can be unappealing, but we give you the option either way.

Live Font Preview*:

* (All text appearance areas have a live preview except for the Menu Link Appearance area)

8) Your most important tool when customizing text appearance is your live preview area. Clicking on any option within your text appearance area will open an area underneath the options containing some sample text. The sample text will vary depending upon the type of text being customized, but will allow you to see a live representation of your text as you make changes. You can even move your mouse over links to see hover styles.

General text appearance settings*:

* (Not all of the option areas shown below are available in all text appearance areas.)

menu-option-link-appearance

Individual option explanations:

1. link/font size: This is, simply, the size of the font, specified in pixels.

2. font family choice: This area allows you to pick from about 14 fonts. The reason there aren’t more choices is because in order for someone to see your font choice on their computer, they have to have that font already installed on their computer. There are very few fonts that are almost universally installed on all computers, and these area considered (more or less) “web-safe”. This list gives you access to all those fonts. Fallback choices are also made behind the scenes, so if your user doesn’t have the selected font, they will get a font that looks pretty darn close.

3. font styles: These buttons control basic styles for your text and have multiple states that you can cycle through by clicking on each button. For all the button states, a blue box indicates that the style is turned on, while no blue box indicates it is turned off. Each button also has a state with an arrow in the corner that tells the text to inherit settings for that style. Click for more info on INHERITANCE.

All of the font style button states

All of the font style button states

There are five types of text style buttons:

Bold – Sets apart text by rendering the characters thicker. Can be set to inherit, bold, or off.

Italics – Sets apart text by rendering the characters at a slight angle. Can be set to inherit, italics, or off.

Text-transform – Forces all the characters to a certain case. Can be set to inherit, UPPERCASE, lowercase, or off.

Text-decoration – Sets apart text by adding a line to the text. Can be set to inherit, underline, overline, strikethrough, or off.

Line-height – Sets the height of each line of text proportional to your font size. Can be set to inherit, 1.0, 1.5, 2.0, 2.5, or 3.0. (Your actual line-height is equal to your line-height value multiplied by your font size, so a line-height of “2” with a font size of 14px, will give an actual line-height of 28 pixels.)

4. text color: Set the default color for the text. If unchecked, the color for this text will be inherited from a more general text appearance area. For example, if you don’t set a color for your bio text, then this text would inherit the text color you set in your “Appearance” > “P3 Customize” > “Fonts” > “Overall font appearance” area. Generally speaking, text without a color applied will inherit the appearance settings that have been applied to the relevant option in the “Fonts” tab. If applying a color to the text, you can select your color using the built-in color picking tool. Click for more info

5. px below: This option will show up for some body font and heading text areas. Paragraphs and Headlines both have a default amount of space under them to give separation from the content that follows it. Here you set an exact amount of space under these elements in pixels.

Link-specific Appearance Settings:

Links are items that you want to stand out to your visitors. They are bits of text that you want to say, “Hey, I’m special, and if you click on me, I do something!”. There are some web standards regarding styling links that pretty much everyone will recognize. The first is to set your links to a color, or apply a text style that is different from the surrounding text. The “Hey, click on me” effect is achieved using what is called a “hover” effect.

6. link hover appearance: Set the text appearance that will display when visitors mouse over your links. When a visitors mouse moves over any link text, browsers give us the option of changing the appearance of this text. You can change the color or apply underline styling to the links to get their attention.

A blue link color with an underline style added to the hover

A blue link color with an underline style added to the hover

gives you this effect

gives you this effect

7. link visited appearance: Set a different color for links that have already been visited. Web browsers actually have a memory and keep track of places you visit on the internet. Then they feed all of this information to secret government agencies. Not really, but if you apply a different color here, links that visitors have already gone to can be changed to this color for them. This helps folks keep track of where they have been. It also adds another color to your site, which can be unappealing, but we give you the option either way.

Live Font Preview*:

* (All text appearance areas have a live preview except for the Menu Link Appearance area)

menu-option-link-text-preview8. Your most important tool when customizing text appearance is your live preview area. Clicking on any option within your text appearance area will open an area underneath the options containing some sample text. The sample text will vary depending upon the type of text being customized, but will allow you to see a live representation of your text as you make changes. You can even move your mouse over links to see hover styles.

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us