CSS Text
CSS provides several properties that allows you to
define various text styles such as color, alignment, spacing, decoration,
transformation, etc. very easily and effectively. The
commonly used text properties are:
- color
text-aligntext-decorationtext-transformtext-indentline-heightletter-spacingword-spacing
These properties give you precise control over
the visual appearance of the characters, words, spaces, and so on.
Color
The color of the text is defined by the CSS color property. The style rule in the following example will define the default text color for the page
body {
Although, the color property seems like it would be a
part of the CSS text, but it is actually a standalone property in CSS. See the
tutorial on CSS color to learn more about the color property.
Text Alignment
The text-align property is used to set the horizontal alignment of the text. Text can be aligned in four ways: to the left, right, centre or justified (straight left and right margins). Let's take a look at an example to understand how this property basically works.
h1 {
Note: When text-align is set to justify, each line is
stretched so that every line has equal width (except the last line), and the
left and right margins are straight. This alignment is generally used in
publications such as magazines and newspapers.
Let's take a look at the following illustration to
understand what these values actually mean.
Text Decoration
The text-decoration property is used to set or remove decorations from text. This property typically accepts one of the following values: underline, overline, line-through, and none. You should avoid underline text that is not a link, as it might confuse the visitor. Let's try out the following example to understand how it basically works:
h1 {
Removing the Default Underline
from Links
The text-decoration property is extensively used to remove the default underline from the HTML hyperlinks. You can further provide some other visual cues to make it stand out from the normal text, for example, using dotted border instead of solid underline. Let's take a look at the following example to understand how it basically works:
a {
Note: When you create an HTML link, browsers built in style sheet automatically underline it and applies a blue color, so that the readers can clearly see which text is clickable.
Text Transformation
The text-transform property is used to set the cases for a text. Text are often written in mixed case. However, in certain situations you may want to display your text in entirely different case. Using this property you can change an element's text content into uppercase or lowercase letters, or capitalize the first letter of each word without modifying the original text.
Let's try out the following example to understand how
it basically works:
h1 {
Text Indentation
The text-indent property is used to set the indentation of the first line of text within a block of text. It is typically done by inserting the empty space before the first line of text. The size of the indentation can be specified using percentage (%), length values in pixels, ems, etc. The following style rule will indent the first line of the paragraphs by 100 pixels.
p {
Note: Whether the text is indented from the left or from the right depends on the direction of text inside the element, defined by the CSS direction property.
Letter Spacing
The letter-spacing property is used to set extra spacing between the characters of text. This property can take a length value in pixels, ems, etc. It may also accept negative values. When setting letter spacing, a length value indicates spacing in addition to the default inter-character space. Let's check out the following example to understand how it really works:
h1 {
Word Spacing
The word-spacing property is used to specify additional spacing between the words. This property can accept a length value in pixels, ems, etc. Negative values are also allowed. Let's try out the following example to understand how this property works:
p.normal {
Note: Word spacing can be affected by text justification. Also, even though whitespace is preserved, spaces between words are affected by the word-spacing property.
Line Height
The line-height property is used to set the height of the text line. It is also called leading and commonly used to set the distance between lines of text. The value of this property can be a number, a percentage (%), or a length in pixels, ems, etc.
p {
Note: Negative values for the line-height property are not allowed. This property is also a component of the CSS font shorthand property.
If the value of the line-height property is greater
than the value of the font-size for an element, this difference (called the
"leading") is cut in half (called the "half-leading") and
distributed evenly on the top and bottom of the in-line box. Let's check out an
example:
p {
See the Pen
CSS Text Properties by PANKAJ (@pankkap)
on CodePen.
CSS Fonts
Choosing
the right font and style is very crucial for the readability of text on a page.
CSS provide several properties for styling the font of the text, including
changing their face, controlling their size and boldness, managing variant, and
so on. The font properties are:
- font-family
- font-style
- font-weight
- font-size
- font-variant
Font Family
The font-family property
is used to specify the font to be used to render the text.
This property can hold several comma-separated font names as a fallback system, so that if the first font is not available on the user's system, browser tries to use the second one, and so on. A typical font family declaration might look like this:
body {
Font Style
The font-style property
is used to set the font face style for the text content of an element. The font
style can be normal, italic or oblique. The default value
is normal.
p.normal {
Font Variant
The font-variant property
allows the text to be displayed in a special small-caps variation.
Small-caps
or small capital letters are slightly different to normal
capital letters, in which lowercase letters appear as smaller versions of the
corresponding uppercase letters.
p {
The
value normal removes small caps from the text which is already
formatted that way.
Font Size
The font-size property
is used to set the size of font for the text content of an element. There are
several ways to specify the font size values e.g. with keywords, percentage,
pixels, ems, etc.
The font-size value can
be an absolute, or relative size.
Absolute size:
- Sets the text to a specified
size
- Does not allow a user to change
the text size in all browsers (bad for accessibility reasons)
- Absolute size is useful when
the physical size of the output is known
Relative size:
- Sets the size relative to
surrounding elements
- Allows a user to change the
text size in browsers
Setting Font Size with Pixels: Setting the font size in pixel values (e.g. 14px, 16px, etc.) is a good choice when you need the pixel accuracy. Pixel is an absolute unit of measurement which specifies a fixed length.
h1 {
Defining the font sizes in pixel is not considered very accessible, because the user cannot change the font size from the browser settings. Tip: If you use pixels, you can still use the zoom tool to resize the entire page.
Setting Font Size with EM: To allow users to resize the text (in the browser menu), many developers use em instead of pixels. The em size unit is recommended by the W3C.
1em is
equal to the current font size. The default text size in browsers is 16px. So,
the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
h1 {
Unfortunately,
there is still a problem with older versions of Internet Explorer. The text
becomes larger than it should when made larger, and smaller than it should when
made smaller.
Using the Combination of Percentage and EM: As you've observed in the above example the calculation of em values doesn't look straightforward. Solution to this is one that works in all browsers, is to set a default font-size in percent for the <body> element:
The technique
is to set the font-size for the body element to 62.5% (that
is 62.5% of the default 16px), which equates to 10px, or 0.625em. Now you can
set the font-size for any elements using em units, with an
easy-to-remember conversion, by dividing the px value by 10. This
way 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em,
and so on.
Setting Font Size with Root EM: To make things even more simpler CSS3 has introduced rem unit (short for "root em") which is always relative to the font-size of the root element (html), regardless of where the element lies in the document (unlike em which is relative to parent element's font size).
This
means that 1rem is equivalent to the font size of
the html element, which is 16px by default in most
browsers.
Setting Font Size with Keywords: CSS provide several keywords that you can use to define font sizes. An absolute font size can be specified using one of the following keywords: xx-small, x-small, small, medium, large, x-large, xx-large. Whereas, a relative font size can be specified using the keywords: smaller or larger.
Note: The keyword medium is equivalent to the browsers default font-size, which is normally 16px. Likewise, xx-small is the equivalent of 9 pixels, x-small is 10 pixels, small is 13 pixels, large is 18 pixels, x-large is 24 pixels, and xx-large is 32 pixels.
Responsive Font Size with Viewport Units: The text size can be set with a vw unit, which means the "viewport width". That way the text size will follow the size of the browser window. Viewport units refer to a percentage of the browser's viewport dimensions, where 1vw = 1% of viewport width. Hence, if the viewport is 1600px wide, 1vw is 16px.
body {
Font Weight
The font-weight property
specifies the weight or boldness of the font. This property can take one of the
following values: normal, bold,
bolder, lighter, 100, 200, 300, 400, 500,
600, 700, 800, 900 and inherit.
The numeric
values 100-900 specify the font weights, where each number represents
a weight greater than its predecessor. 400 is same
as normal & 700 is same as bold.
The bolder and lighter values
are relative to the inherited font weight, while the other values such
as normal and bold are absolute font weights.
p {
Shorthand Property
To
shorten the code, it is also possible to specify all the individual font
properties in one property.
The font property is a shorthand property for:
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
Example
Set
some font properties with the shorthand declaration:
Note: The font-size and font-family values
are required. If one of the other values is missing, their default value are
used.
Google Fonts
If you do not want to use any of the standard fonts in HTML, you
can use the Google Fonts API to add hundreds of other fonts to your page.
Steps to use Google Fonts:
- Goto the site https://fonts.google.com/
- Choice the font you want to use in your web page
- Just add a stylesheet link and refer to a font family of your choice.
See the Pen Google Fonts by PANKAJ (@pankkap) on CodePen.