sainture
7/31/2015 - 10:46 AM

Text & font related

Text & font related


/*
font-family
font-size: 1em
font-weight: 900
font-style: italic
word-spacing: 0.2em
text-indent
text-transform
text-decoration
text-shadow
*/
p {
  /* The text-indent property specifies the indentation of the first line in a text-block */
    text-indent: 50px;
}

p {
  text-transform: capitalize;
  /* capitalize, uppercase, lowercase */
}

p {
  text-decoration: underline;
  /* underline, overline, line-through, none*/
}

/* The text-shadow property adds shadow to text.
This property accepts a comma-separated list of shadows to be applied to the text.
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
h-shadow   : Required. The position of the horizontal shadow. Negative values are allowed
v-shadow   : Required. The position of the vertical shadow. Negative values are allowed
blur-radius: Optional. The blur radius. Default value is 0
color      : Optional. The color of the shadow.
*/
p {
  text-shadow: 2px 2px 1px #ff0000;
}
/*line-height

The line-height property defines the amount of space above and below inline elements. 
That is, elements that are set to display: inline or display: inline-block. 
This property is most often used to set the leading for lines of text.

The line-height property can accept the keyword values normal or none as well as a number,
length, or percentage.

According to the spec, a value of "normal" is not just a single concrete value that 
is applied to all elements, but rather computes to a "reasonable" value depending 
on the font size set (or inherited) on the element.

A length value can be defined using any valid CSS unit (px, em, rem, etc).

A percentage value is the font size of the element multiplied by the percentage.

The recommended method for defining line height is using a number value,
referred to as a "unitless" line height. A number value can be any number, 
including a decimal-based number, as is used in the first code example on this page.

Unitless line heights are recommended due to the fact that child elements will inherit
the raw number value, rather than the computed value. With this, child elements can
compute their line heights based on their computed font size, rather than inheriting
an arbitrary value from a parent that is more likely to need overriding.

*/

p {
    line-height: 1.5;
}
p.big {
    line-height: 200%;
}
p.big {
    font-size: 25px;
    line-height: 30px;
}

/* letter-spacing
The letter-spacing property controls the amount of space between each letter in a given 
element or block of text. Values supported by letter-spacing include font-relative values (em, rem),
parent-relative values (percentage), absolute values (px) and the normal property,
which resets to the font's default.

Using font-relative values is recommended, so that the letter-spacing increases or decreases 
appropriately when the font-size is changed, either by design or by user behavior.

The most important point to note when using letter-spacing is that the value specified
does not change the default, it is added to the default spacing the browser applies
(based on the font metrics)
*/
p {
    /* 16 * 0.0625 = 1px */
    letter-spacing: 0.0625em;
}
h1 {
    letter-spacing: 2px;
}

/* text-align
The text-align property specifies the horizontal alignment of text in an element.

justify : Stretches the lines so that each line has equal width 
(like in newspapers and magazines)
*/
h2 {
    text-align: center;
}
.main {
    text-align: justify;
}