Typography is the art and technique of arranging type, type design, and modifying type glyphs. The main advantage of elegant CSS typography lies in its ability to be both attractive and improves the user experience. The editor is perfectly placed to bring these two elements together - here's how to create a custom (typography) style-sheet and how best to configure the editor to use it.

Now using styles is actually very easy. You can either link your web pages to an external Cascading Style Sheets (CSS), or you can include the styles inside the editing area of individual Joomla article. The advantage of configuring the editor to use a custom style-sheet is that you can control what typography styles are used by the end-user. This works to dramatically improve the workflow and ensures that the website is kept looking clean and consistent.

Adding a custom style-sheet

The @import rule allows us to add (or import) external style-sheets to the one present in your template. It very easy to do - simply copy and paste the @import rule to one of the style-sheet being used by your template. Most of the time, the template CSS files are found in the /templates/TEMPLATENAME/css/ folder.

This rule must always be first in a document and should look something like this: @import url( YOUR STYLE-SHEET NAME );.

Example:

@import url(typography.css);

Example: defult Joomla! template / beez_20 / style-sheet: layout.css

/**
 * @author  ( Angie Radtke  )
 * @package Joomla
 * @subpackage Accessible-Template-Beez
 * @copyright Copyright (C) 2005 - 2009 Open Source Matters. All rights reserved.
 * @license GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant to the
 * GNU General Public License, and as distributed it includes or is derivative
 * of works licensed under the GNU General Public License or other free or open
 * source software licenses. See COPYRIGHT.php for copyright notices and
 * details.
 */

 /* typography styling */
@import url(typography.css);

h3
{
        font-size:1.1em;
        font-weight:bold;
        margin:10px 0;
}

h4
{
        font-size:1em;
}

fieldset
{
        margin:10px 0 ;
        padding:15px 0px;
        border:solid 1px
}

What should a typography style-sheet contain?

A typography style-sheet should contain your content typography including your ‘body’ and ‘h1 to h6’ headings. This will ensure that the editor uses the same styles (e.g. font, size & color…) as defines your template body. However, not all templates adhere to a general code of practice which means you many have to hunt around for these classed in the other style-sheets used by your template.

/* ####################### ADD GENERAL BODY ############################ */

/* The body class defines the document's body. This usually contains generic typography (e.g. font, size & color…) which is used across your site.
# If you have configured the editor to use a custom (or typography) style-sheet, the best practise is to add your body class to that style-sheet.
# By doing the editor will read and use the same styles (e.g. font, size & color…) as defines your template body. */

body {}

/* #######################(PARAGRAPH)FORMAT STYLES ############################ */

/* <h1> defines the most important heading. <h6> defines the least important heading. Similar to the body tag this usually contains generic typography (e.g. font, size & color…) which is used across your site.
# The best practise is to add your H headers to the custom (or typography) style-sheet. By doing the editor will use the same styles in its editing area as defines your template document's body. */

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

Configuring the editor to use typography style-sheet.

As standard practice the editor look for a CSS file called “template.css” in the /templates/TEMPLATENAME/css/ folder. To configure the editor to use your custom typography style-sheet, please visit ‘Extensions’ (which is in the top navigation menu) in your Joomla admin and navigate down to the ‘Plug-in Manager’ menu item. In the Plug-in Manager use the ‘Filter’ to locate the 'JoomlaCK' plug-in and then click on the 'Plugin Name' to edit and open up into a screen-called ‘Plugin: [Edit]’. On the right hand-side you will notice a list of parameters - please see below:

Lastly we need to:

1. Set the “Use Template CSS classes?” to NO
2. Set the “Use Editor CSS classes?” to NO
3. In the “Use Custom CSS Classes?” field, place the pathway to your CSS file, It will look something link this: templates/yourtemplatename/css/typography.css) and press Save.