Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a legible text to your website using CSS

We will see today the approach that can be followed to come up with a simple and readable content for the web pages that you are developing. There are three useful properties in the CSS to develop the readability of the site such as letter spacing, font and line-height.

One of the essential elements of Web Designing is fonts. The content should be understandable to the spectators for it to be of any use much similar to the one in the print globe. As a universal rule, make sure that Web site provides as slight resistance as probable to the customer, and the easier the site is to understand, the superior it becomes. There are three useful properties in the CSS to develop the readability of the site such as letter spacing, font and line-height.

A model page

Let's start with a little model Webpage. This document uses a little, attractive pattern plan with various low-key colours to highlight the content. This is a superior use of plan and colour in the “content is king” category if the site is hysterics, particularly if the content consists of articles.

The transcript does its position needs to be noticed firstly: it communicates a note and the customer can stroll away having devoted the content. The complete page has the same transcript with the exemption of a shade transform in the small subheading beneath the subtitle transcript and the positioning of it. Here's the coding of the CSS that can be used in the model page.

Listing 1: Css code

body {
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #363942;
	color: #382513;
}

#container {
	margin: 15px auto;
	text-align: left;
	background-color: #D8CAA8;
	border: 1px solid #4B1E18;
	padding: 0px;
	width: 850px;
}

#header {
	height: 80px;
	border-bottom: 1px solid #284907;
	margin-bottom: 15px;
	padding: 15px;
}

#header h1 {
	position: relative;
	vertical-align: center;
	color: #382513;
	margin-bottom: -10px;
}

.subheading {
	color: #284907;
}

#sidebar {
	border-left: 1px solid #8FB65F;
	margin: 0 0 15px 15px;
	padding: 0px 15px 15px 15px;
	float: right;
	width: 175px;
}

#content {
	padding: 0 15px;
}

#footer {
	clear: both;
	border-top: 1px solid #284907;
	padding: 15px;
	margin-top: 15px;
}

Fonts Selection

To develop the readability, it’s time to select the font that looks superior with the different colours that you’ve selected and needs to plan the volume of the transcript. Classically, a non-serif font is desirable for the most important content.

Regularly, serifs are chosen for blocks of transcript for the reason that the serifs assists in the differentiation of every line in the print world. Though, current operational systems have many options to flat the limits of screen fonts mechanically.

The below represents the lines representing fonts and CSS:

font-family: Arial, Helvetica, sans-serif;

The given fonts are very safe to apply in the design, and if cross-browser compatibility is a worry, remember them. They are very excellent to utilize it and utilize all the fonts from a preparatory point for the non-serif transcript. At this time, the stiff segment of the CSS looks like this:

Listing 2: Add font

body {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #363942;
	color: #382513;
}

There is a little modification in the transcript; taken as a whole readability of the document has transformed faintly for the better.

The minor modification is fine, but each of the fonts is still identical and this will build an awful nature of regularity. It’s time to locate the headings and sub-headings apart from the remaining content. Now, ignore the h1 at the very top for a moment and let us code something different.

The heading and sub-heading in the contents are used in the serif font.

font-family: Georgia, "Times New Roman", Times, serif;

All over again, now use the safest fonts in the Web Designing, even if it's now for a preparatory point and make a diagram to spread out the fonts shortly. Now detach the line with the headers and previous spaces where it would appear excellent in little doses.

At this time, the subheading class looks like this:

Listing 3: Editing subheading class

.subheading {
	color: #284907;
	font-family: Georgia, "Times New Roman", Times, serif;
}

It’s time to build a fresh regulation for h2 tags in the content segment like this:

Listing 4: Editing content h2

#content h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
}

At this time the header detail is far apart from the content, which is excellent.

At this moment, what about that h1 header that is present at the peak of the page? Now compose it to a good size and give it less contrast to its background.

color: #6B5846;
font-size: 48px;

It’s time to examine the full header h1:

Listing 5: header h1

#header h1 {
	position: relative;
	vertical-align: center;
	color: #6B5846;
	margin-bottom: -10px;
	font-size: 48px;
}

Now, let us focus on sidebar and footer. The transcripts are identical as in the body transcript in major content region. The sidebar and footer are not playing an important role, calling for a smaller text with altogether a different font.

font: 12px Verdana;

Currently, the sidebar and footer divs have the below CSS:

Listing 6: Style for sidebar and footer

#footer {
	clear: both;
	border-top: 1px solid #284907;
	padding: 15px;
	font: 12px Verdana;
	margin-top: 15px;
}

#sidebar {
	border-left: 1px solid #8FB65F;
	margin: 0 0 15px 15px;
	padding: 0px 15px 15px 15px;
	float: right;
	width: 175px;
	font: 12px Verdana;
	color: #5A4735;
}

At this moment, the content transcript appears to be slightly overwhelming thereby requiring decreasing its size using the below:

font-size: 15px;

Now, locate it in the content rule, it will read like this:

#content {
	padding: 0 15px;
	font-size: 15px;
}

Line-height — let us attract the users to our website

Line-height property is used to build a transcript more readable. The transcript helps to increase the quantity of gap between every stripe while adding the extra line-height and it helps in the judgment that bound as it moves behind the content.

The content div of a line height is 160%, which fundamentally gives it 60% extra line height than it usually based on the range of the font. This is a straight quantity of line height and gives the transcript several rooms to inhale. In the sidebar, now the transcript is lesser, the line-height is of 140%. Now, the content of the CSS and sidebar of the CSS are as follows:

Listing 7: content and sidebar div's style

#content {
	padding: 0 15px;
	font-size: 15px;
	line-height: 160%;
}
	
#sidebar {
	border-left: 1px solid #8FB65F;
	margin: 0 0 15px 15px;
	padding: 0px 15px 15px 15px;
	float: right;
	width: 175px;
	font: 12px Verdana;
	line-height: 140%;
	color: #5A4735;
}

Tuning letter gap

There is only pair of places where letter spacing plays an important role. Headers and headings are regularly high-quality of candidates for letter spacing. With the help of the creator’s observation, the use of letter spacing on the header transcript to append some enhanced visuals to the page, like with this:

letter-spacing: 20px;

Letter Spacing will help to increase the gap that exists between the letters of the text by 20px and this is a very large integer for common transcript.

For the headings (the h2 tags) in the content of the page, it’s time to enlarge the letter spacing by just 2px.

letter-spacing: 2px;

So, the header's h1 CSS and the content's h2 CSS now look like this:

Listing 8: New look of h1 and h2

#header h1 {
	position: relative;
	vertical-align: center;
	color: #6B5846;
	margin-bottom: -10px;
	font-size: 48px;
	letter-spacing: 20px;
}

#content h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing: 2px;
}

Conclusion

The article concentrated on the content visibility to the users visiting your web site and making sure that there is no sloppiness in the same.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login