📖 Text and Fonts
Typography
This is the science (or art) of choosing text size and fonts for publications including web sites.
There are many CSS style attributes that can be used to control the appearance of your text. The list below shows some examples of available attributes.
<style>
/* Change the font */
/* font-family: 1stchoice, 2ndchoice, 3rdchoice(should be a generic font); */
/* Font names with spaces must be in quotes "Times New Roman" */
font-family: Arial, Geneva, sans-serif;
/* Increase or decrease in size */
/* font-size: size in ems, %, keywords or pixels; */
/* List below shows 4 options */
font-size: 1.2em;
font-size: 150%;
font-size: large;
font-size: 14px;
/* Make text bolder or lighter */
/* font-weight: keyword (lighter, normal, bold, bolder); */
font-weight: bold;
/* Use small caps */
/* font-variant: keyword (normal, small-caps) */
font-variant: small-caps;
/* Change capitalization */
/* text-transform: keyword (none, capitalize, lowercase, uppercase); */
text-transform: uppercase;
/* Add an underline, overline or line-through */
/* text-decoration: keyword (none, underline, overline, line-through); */
text-decoration: underline;
/* Italicize the text */
/* font-style: italic; */
font-style: italic;
/* Line spacing */
/* line-height: size in %, ems or pixels; */
/* List below shows 3 options */
line-height: 1.2; /* (em is optional) */
line-height: 150%;
line-height: 14px;
/* Change text color */
/* color: color name, hex code or rgb value; */
/* List below shows 3 options */
color: red;
color: #FF0000;
color: rgb(100%, 0%, 0%);
/* Indent text */
/* text-indent: size in ems or pixels; */
text-indent: 3em;
/* Align text */
/* text-align: left (default), right, center or justify; */
/* Change space between letters */
/* letter-spacing: size in ems or pixels; */
/* Change space between words */
/* word-spacing: size in ems or pixels; */
</style>@font-face rule
Adding a special font to your site can really add a lot of personality. Using the @font-face rule enables automatic download of font file(s) to users' computers when needed. The font-file must be included in the website files. A good source for font-files is http://www.fontsquirrel.com/ or https://fonts.google.com/
The code below works when the files have been seleced, downloaded and prepared for use which usually included unzipping a compressed file and organizing the directories in the website.
- fontname is a name you give the font which will become the name for the font-family: CSS attribute for elements that should use this font.
- filename.ttf is the url of the font download file in ttf format for Firefox, Chrome, Safari, and Opera.
- filename.eot is the url of the font download file in eot format for Internet Explorer.
- filename.svg is the url of the font download file in svg format for iPad and iPhone.
- filename.woff is the url of the font download file in woff format for Firefox, IE and Chrome.
In order to cover the most number of possible browsers, you will need to include as amny of these font types as possible. Not all fonts will include all font types.
<style>
@font-face {
font-family: fontname;
src: url('filename.ttf') format("truetype"),
src: url('filename.ttf') format("woff"),
src: url('filename.svg') format("svg"),
src: url('filename2.eot') format("opentype");
}
</style>Text Shadow
Example
The text-shadow property adds shadow to text. Values are specified in pixels with a required h-shadow offset and v-shadow offset. An optional blur and color may be specified. This is not supported in IE and not recommended for mobile sites.
<style>
/* text-shadow: h-shadow v-shadow blur color; */
/* Red text shadow with 2px offsets and 8px blur */
text-shadow: 2px 2px 8px #FF0000;
</style>