Home Classroom Joomla Creating a website using Joomla – Part 11

Creating a website using Joomla – Part 11


Joomla! 1.5 Using Typography

This month article provides detailed instructions for using the Typography styles included in the template on your site. If you would like to see all of the Typography styles in action, check out the appropriate place on the demo site.


Most templates have their own set of content styles, known as Typography. Typography can come in a number of varying and diverse formats, ranging from simple text modifications to image insertions. Typography improves the look and layout of your website and gives it life. This article will take you through the necessary steps to adding typography to your Joomla! content.


Inserting Typography with the HTML Editor

To insert the Typography into your content, you must use the HTML feature of all Joomla! content editors. The article will outline the steps in which does this with the default Joomla! content edit, TinyMCE. Please be aware, even though there are other content editors available, all are basically the same and the steps with be just as effective if you are using another content editor.

Please note that the following article will show you how to insert HTML (typography) into Static Content, the same procedure is apparent for Content Items and Custom Modules.









    • Login to the Joomla! Administration Control Panel. Either, use the Administrator link on your mainmenu when you are logged into the Frontend of your website or use the direct web address of the Administrator Control Panel, www.yoursite.com/administrator. Enter the Administrator’s Username and password.
    • Navigate to the Article Manager. Once you have logged in, hover over the Content link on the top taskbar, scroll down to Article Manager.
    • The Article Manager

When you selected the Article Manager link, you will be sent to the Article Manager control panel. Select either Edit or New, depending on whether you want to add typography to an existing or new item.

    • The HTML icon

To add typography to your content, you must enter the HTML mode of the Content editor. In the TinyMCE 2.0 editor, this is an icon called “HTML”, in some other content editors; it is a tab but will be clearly marked for easy navigation. Push the icon to enter HTML mode.

    • The HTML Editor

A popup will appear with your content in HTML format, in the following screen shot, you will see the above screenshot’s text in HTML coding. You must do all of your editing here for typography.

    • Inserting Typography

In this case, we will be using the Info span style for the example text. You will not see the effects in the content editor; all style affects are only visible on the Frontend of your Joomla! Website.

    • The Result

The following screenshot shows you the end result of inserting the HTML code into the content.

We highly appreciate your valuable comments after reading this article. Also, if you have any issues in joomla you could email to harsha@vishmitha.com or Supporting Forum to get our assist.


Special Offer

Celebrating the first Digit anniversary a free Joomla template will be offered to all our valuable readers. VDigitEco is a free Joomla template in a natural green colour variation. It is fast loading and W3C compliant. Click here to download it.



Harsha Gomes is the Managing Director of Vishmitha.com and Winhost Inc. He is a past employee of CINTEC, Ministry of Economic Reforms&Science&Technology, Pathfinder Holdings (Pvt) Ltd, and Sannasa Media (Pvt) Ltd. He has experience in PHP,AJAX, Flex, HTML,CSS, Javascript, MySQL, Joomla, Payment Integration, Smarty, PHPBB, Magento, OS Commerce. He is an expert in developing websites using the CMS tool Joomla.


Leave a Reply