How to Use the Typography Settings
(Difference between revisions)
| (13 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | The [[Typography]] settings in PageLines allow you to change the fonts that appear on your website. | + | [[Category:Framework]] |
| + | The [[Glossary#Typography|Typography]] settings in PageLines allow you to change the fonts that appear on your website. | ||
No need for html or css to make changes to the most common place that you might want to change your fonts. | No need for html or css to make changes to the most common place that you might want to change your fonts. | ||
| − | If you have the need for fonts in specific areas of your site you can always add your own in the [[custom code]] section. | + | If you have the need for fonts in specific areas of your site you can always add your own in the [[How to Use the Custom Code Settings|custom code]] section. |
==Overview== | ==Overview== | ||
| Line 30: | Line 31: | ||
You can change the following options: | You can change the following options: | ||
#'''Letter Spacing''' will increase the distance between individual letters in a word | #'''Letter Spacing''' will increase the distance between individual letters in a word | ||
| − | #'''Text-Transform''' can change the case of all of the text in the element. The options are: | + | #'''Text-Transform''' can change the case of all of the text in the element. The options are: UPPERCASE, Capitalize and lowercase |
| − | + | ||
| − | + | ||
| − | + | ||
#'''Varient''' allows you to select Small-Caps which will make your text UPPERCASE but maintain the increased size of capitalized letters | #'''Varient''' allows you to select Small-Caps which will make your text UPPERCASE but maintain the increased size of capitalized letters | ||
#'''Weight''' lets you change the text from normal to bold or light | #'''Weight''' lets you change the text from normal to bold or light | ||
#'''Style''' changes the text from normal to italics | #'''Style''' changes the text from normal to italics | ||
| − | == | + | {| |
| + | | [[File:Usetypography defaulttype.jpg|none|thumb|alt=Default Type|Default Type]] | ||
| + | | [[File:Usetypography changespacing.jpg|none|thumb|alt=Changing the Spacing| Change Letter Spacing]] | ||
| + | | [[File:Usetypography-uppercase.jpg|none|thumb|alt=All Uppercase|Make Text Uppercase]] | ||
| + | |} | ||
| + | {| | ||
| + | | [[File:Usetypography-smallcaps.jpg|none|thumb|alt=Small Caps|Make Text Small Caps]] | ||
| + | | [[File:Usetypography-bold.jpg|none|thumb|alt=Bold Text|Set Text to Bold]] | ||
| + | | [[File:Usetypography-italic.jpg|none|thumb|alt=Italic Text|Set Text to Italic]] | ||
| + | |} | ||
| + | ==Advanced Options== | ||
| + | [[File:Usetypography-advancedsettings.jpg|thumb|alt=Using the Advanced Settings| Advanced Settings]] | ||
With the advanced options settings you can add other HTML tags which you would like to apply your Typography settings to. | With the advanced options settings you can add other HTML tags which you would like to apply your Typography settings to. | ||
| − | For example the Text Headers settings apply to H1, H2, H3 tags by default. If you added 'strong' to the box any parts of your site that used <strong></strong> HTML tags (that is any text that appears bold) would now use your custom font settings. | + | For example the Text Headers settings apply to H1, H2, H3 tags by default. If you added 'strong' to the box any parts of your site that used <nowiki><strong></strong></nowiki> HTML tags (that is any text that appears bold) would now use your custom font settings. |
| + | |||
| + | Lets run through a quick example: | ||
| + | |||
| + | # Go into the PageLines Settings inside your WordPress Administration Panel and click on Typography | ||
| + | # Under the Typography - Text Headers options click on the advanced button and enter the text 'strong' into the box | ||
| + | # Select a new font from the drop down menu, Tangerine is fun | ||
| + | # Save your settings and navigate to the page where you would like to add your custom tag | ||
| + | # Place <nowiki><strong></strong></nowiki> around the text you would like to change and save the page | ||
| + | # Refresh your page and check out the magic! | ||
Latest revision as of 21:12, 18 January 2012
The Typography settings in PageLines allow you to change the fonts that appear on your website.
No need for html or css to make changes to the most common place that you might want to change your fonts.
If you have the need for fonts in specific areas of your site you can always add your own in the custom code section.
Contents |
[edit] Overview
There are four different classes of font types that you can change from the Typography settings.
These are:
- Text Headers which will change the font of your site's header tags(H1, H2, H3...)
- Primary Font changes the standard font used across the site content(body)
- Secondary Font will change the fonts used for your sites secondary or sub title text (Metabar, Sub Title, etc.)
- Inputs and Textareas changes the font inside of your text inputs and text areas. (Comment forms are an example)
[edit] Changing Fonts
To edit a font:
- Click on the current font and select a new one from the drop down menu.
- Save your settings
It's that easy!
[edit] Editing the font Styles
The Typography settings will also allow you to control elements of the font styling.
You can change the following options:
- Letter Spacing will increase the distance between individual letters in a word
- Text-Transform can change the case of all of the text in the element. The options are: UPPERCASE, Capitalize and lowercase
- Varient allows you to select Small-Caps which will make your text UPPERCASE but maintain the increased size of capitalized letters
- Weight lets you change the text from normal to bold or light
- Style changes the text from normal to italics
  |
  |
  |
  |
  |
  |
[edit] Advanced Options
With the advanced options settings you can add other HTML tags which you would like to apply your Typography settings to.
For example the Text Headers settings apply to H1, H2, H3 tags by default. If you added 'strong' to the box any parts of your site that used <strong></strong> HTML tags (that is any text that appears bold) would now use your custom font settings.
Lets run through a quick example:
- Go into the PageLines Settings inside your WordPress Administration Panel and click on Typography
- Under the Typography - Text Headers options click on the advanced button and enter the text 'strong' into the box
- Select a new font from the drop down menu, Tangerine is fun
- Save your settings and navigate to the page where you would like to add your custom tag
- Place <strong></strong> around the text you would like to change and save the page
- Refresh your page and check out the magic!