[Drupal] How to make Drupal theme more elegent with Typography?

Tintu.manuel | Updated 27 Jun 2016 | 3 min read

In Drupal themes, the Typography styles are important. We know that there are many classes and different tags are generating while making a Drupal theme. And it will display with the default Drupal CSS styles. Sometimes it wont be matching with our design. So its necessery to make a CSS Typography for those tags/classes.

Here am explaing to override the the default Drupal styles with the Typography styles.

The main Typography elements are shown below.

To check the Typography, make a new page and add these tags in to your page and check how it display. You can make the css for the elements in the stylesheet.

This is a Heading 1

This is a Heading 1 title class

This is a Heading 2

This is a Heading 2 Block title

This is a linked Heading 2 title class

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

Drupal's messages

Sample help message. Modules are plugins that extend Drupal's core functionality. Enable modules by selecting the Enabled checkboxes below and clicking the Save configuration button. Once a module is enabled, new permissions may be available.

Sample status message. Page Typography has been updated.

Sample error message. There is a security update available for your version of Drupal. To ensure the security of your server, you should update immediately! See the available updates page for more information.

Sample warning message. There are updates available for one or more of your modules or themes. To ensure the proper functioning of your site, you should update as soon as possible. See the available updates page for more information.

Code tags

#header h1 a { display: block; height: 80px; width: 300px; }

Strong Text

This is a test of strong text so it should appear bold.

Italic Text

This is a test of italic text so it should appear in italics.

Blockquote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Paragraph With Links

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Ordered List

This is a sample Ordered List.
Lorem ipsum dolor sit amet consectetuer.
Condimentum quis.
Congue Quisque augue elit dolor.
1. Something goes here.
2. And another here
3. Then one more
Congue Quisque augue elit dolor nibh.

Unordered List

This is a sample Unordered List.
Condimentum quis.
Congue Quisque augue elit dolor.
- Something goes here.
- And another here
  - Something here as well
  - Something here as well
  - Something here as well
- Then one more
Nunc cursus sem et pretium sapien eget.

Fieldset

Account information

Form elements

Table

	Forum	Topics	Posts	Last post
Row 1	News and announcements For news and announcements to the Drupal community at large.	1763 18 new	18926	8 hours 19 min ago by Chris Charlton
Row 2	General discussion For less technical discussions about the Drupal project. Not for support questions!	25704 292 new	98651	5 min 9 sec ago by polluxmr2
Row 3	Drupal showcase Showcase your site to others, maybe share a little about it - modules, theme, why you used Drupal.	4660 52 new	22819	9 hours 20 min ago by Thomasr976
Row 4	Events For events, conferences and other Drupal happenings.	337 1 new	1554	3 weeks 13 hours ago by greggles

These are the Typography for the main elements in Drupal. By styling these elements appropreate to the design, we can save the bug fixing time and we can make theme clean and unique look.