Style your content into clear and easy for reading

book

 

How to make the content to be read easily and comfortable is very important. In order to do this, you have to think about several essentials like line height, color, font, font size and typography.

In this article, we create one page for showing some content of a novel (The old man and the sea).

There are four sections consisted in this page:

1. Novel name

2. Author name

3. Interior paragraphs

4.Page number

First of all is to choose font for Novel name, Author name and  interior paragraphs, sometime the font in local machine can not match our request, we have to choose web font from third site such as google font.

Here, we choose 3 fonts from google font site, and it also is very easy to implement into our page, we can use css import function to include those fonts:

@import url(http://fonts.googleapis.com/css?family=UnifrakturMaguntia|Belgrano|Montserrat+Alternates|Alike+Angular|Belgrano);

Use the decorated letter font “UnifrakturMaguntia” for novel name, set it’s font size as 2.5em, and add shadow for it so that it looks more elegant.

font-size:2.5em;
text-shadow:0 0 2px #000,0 0 8px #999;

and meanwhile make the novel name alight to center.

The second line is author name, its format is “by xxxx”, in order to make the author name stand out, we can reduce the font size of “by” and make it vertical align to super at top, and we also need to choose a special font for it.

h2{
text-align:center;
font-family:Belgrano;
}
h2 span{
vertical-align:super;
font-size:0.6em
}

for interior paragraph content we choose “Belgrano” as font, and font size as 1.1em.

p{
font-family:’Belgrano';
line-height:1.5em;
font-size:1.1em;
color:#111;
}
p.pagenum{
text-align:center;
}

In novel book, often make the first letter of every chapter into large as the start point.
article p:first-of-type:first-letter{
font-size:3em;
}

 

See the Pen Style content with real book look by Wang Weiqiang (@WangWeiqiang) on CodePen.

 

Tagged with: ,
Posted in CSS3, HTML5

Categories

Related Posts