CSS3 Basis part 3 of 4

 

In this post we will talk about

  • Fonts
  • Web Fonts
  • Text Transformations

Fonts

We can use any fonts which are available on the users system. We also specify a font family and in that case the user’s browser will use any font available from that font family. The three most popularly used fonts are:

 

Serif Fonts

These fonts are generally used in articles or paragraphs as these provide easier reading. Some of the Serif fonts are

  • Baskerville
  • Georgia
  • MS Serif
  • New York
  • Palatino Linotype
  • Times
  • Times New Roman

If we want to default to any available font from this family available on the user system then we can use serif.

Sans-Serif Fonts

These fonts are generally used for headlines as they stand out. Some of the Sans-Serif fonts are

  • Arial
  • Arial Black
  • Century Gothic
  • Geneva
  • Helvetica
  • Impact
  • Lucida Grande
  • Palatino Linotype
  • Tahoma
  • Trebuchet MS
  • Verdana

If we want to default to any available font from this family available on the user system then we can use sans-serif.

Monospace Fonts

These fonts are good for writing code. Some of the Monospaced fonts are

  • Andale Mono
  • Cooperplate
  • Courier
  • Courier New
  • Lucida Console
  • Monaco

If we want to default to any available font from this family available on the user system then we can use monospace.

So with this all this new knowledge on fonts let us go ahead and change the fonts in our html.

And our page with new fonts looks something like below

Fonts

Fonts

Web Fonts

The fonts mentioned above need to be present on the user’s system, so that the web page could use it but in the case of Web Fonts we can specify to download these fonts on the user’s machine. But sometimes this might not be the right choice as this might lead to ownership issues because of the font’s ownership. The best solution around that is to use a Font Server and better yet use Google font server. To get the specific font all we need to do is get the link of a particular font from the Google font server and include it in the web page so that it is downloaded as and when it is needed.

Let’s try to use Web Fonts and for that we need to go to http://www.google.com/fonts. On the left hand panel we can see various options to filter and customize our fonts.

 

Google Web Fonts

Google Web Fonts

We also have multiple option to select the text we want to analyze, the size we want to analyze and the various way we can sort it. We can also see it in poster, paragraph, sentence or word.

 

Google Web Fonts

Google Web Fonts

To use a particular type of font we need to add it to the collection and click on Use at the bottom right corner of the page.

 

Google Web Fonts

Google Web Fonts

Once we do that we see all the instructions as to how we can use that font in our web page. And before we use it we can include or exclude the stuff we want and also see the load time of that font in the web page.

 

Google Web Fonts

Google Web Fonts

We will go ahead and use this font in our webpage for paragraph and headings.

It works really well even after the fact this font is not present on my system.

 

Web Fonts

Web Fonts

Font Size

Just selecting the font family is enough, for our webpage to look really amazing we also need set the font size appropriately as well. We can specify the font size in

  • em – It is a scalable unit. 1em = current font size. So if the current font size is 16 px then 1em = 16px and 2em = 32px.
  • percentage – It is similar to em but the current font size is 100%. So if the current font size is 16px then 100% = 16px and 200% = 32px.
  • px – These are the fixed sized unit where 1px = one on screen.
  • keywords (small, medium, large, etc) – These are also fixed sized units. One point = 1/72 of an inch.

Font Color

We can also set the font color in our styles. The various ways to set font color are

  • rgb – We need to pass the red, green and blue hexadecimal values of the color
  • rgba – This is similar to rgb with an additional attribute of a which repsents the opacity. The value of a ranges between 0(Transparent) and 1(Opaque).

Font Style

We could also use Font style. The various font styles that we can set in our font are

  • italic – This will italicize the content.
  • bold – This will make the content bold.

Also if font style is already set before in the hierarchy then we can reset it to normal which will remove any font style that is already present.

Other Text Decorations

We can use to change the text to

  • text-transform: lowercase
  • text-transform: uppercase
  • text-transform: capitalize
  • font-variance: small caps
  • text-decoration: overline

Below is the usage of all of these

Text Decorations

Text Decorations

Kerning

The “font-kerning” property controls metric kerning, kerning that utilizes adjustment data contained in the font.

    • letter-spacing: 1px;
    • word-spacing: 2px;

 

Leading

The CSS line-height property is similar to leading in desktop publishing – it determines the “line height”. This results in lines of text appearing closer together or further apart.

    • line-height: 1.5

 

    • line-height: 150%

 

li { letter-spacing: -1px; word-spacing: 5px; line-height: 150%; }

 

Text Decorations

Text Decorations

Box Model

In CSS3 we can consider our page to consist a set of boxes. Every element that we have could be considered as an individual box. So an image will be a box so will be a paragraph or any other element on our page.

Border

It is the line around each of these boxes. It can be set for all four sides of the element or individual side.

  • border
  • border-top
  • border-right
  • border-bottom
  • border-left

Margin

All these boxes are separated by space which is known as margin. It can be set for all four sides of the element or individual side. An inline box cannot have top and bottom margins.

Padding

It is the space between the border and the content of the boxes. It can be set for all four sides of the element or individual side. An inline box cannot have top and bottom paddings.

Block level and Inline Tags

The various block level tags are:

  • p
  • div

The various inline tags are as below. These tags cannot have top and bottom margin.

  • strong
  • em
  • image

By default we have a square box for the elements however we can create a rounded corner box for the elements using the following style

 

And

 

 

Round Corners

Round Corners

Let us apply few of the these changes on our initial page

Border Margin Padding

Border Margin Padding

The code for this post can be found here or @ mirror

Any questions. comments or feedback are most welcome.