Famílias de fontes
Depois da cor, a fonte (letra) é provavelmente a mais fundamental propriedade de uma página. Neste artigo eu não quero mostrar nenhuma 'dica' especificamente, mas sim apresentar toda a variadade de estilização para fontes oferecida pelas CSS.
Uma vez que nem todas as fontes existentes estão instaladas nos computadores dos usuários (existem milhares de fontes e a maioria delas não é gratuita), CSS fornece um mecanismo para compensar esta lacuna. Você define uma lista de fontes para seu documento a serem usadas na ordem que você definiu (se a primeira da lista não estiver disponível no computador do usuário usar a segunda e assim por diante) e a última fonte da lista deverá ser uma fonte genérica dentre uma das cinco disponíveis: serif, sans-serif, monospace, cursive e fantasy.
A tabela a seguir mostra exemplos de vários tipos de fontes (talvez o seu navegador não dê suporte para todas elas) e assim você poderá visualizar como o seu navegador renderiza cada uma das cinco fontes genéricas:
| Fonte | Seu navegador | Imagem |
|---|---|---|
| 'sans-serif': fontes normais sem serifas | ||
Arial, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Helvetica, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Verdana, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Trebuchet MS, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Gill Sans, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Noto Sans, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Avantgarde, TeX Gyre Adventor, URW Gothic L,
sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Optima, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Arial Narrow, sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
sans-serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
| 'serif': fontes normais com serifas | ||
Times, Times New Roman, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Didot, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Georgia, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Palatino, URW Palladio L, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Bookman, URW Bookman L, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
New Century Schoolbook, TeX Gyre Schola, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
American Typewriter, serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
serif
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
| 'monospace': fontes com largura fixa | ||
Andale Mono, monospace
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Courier New, monospace
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Courier, monospace
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
FreeMono, monospace
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
OCR A Std, monospace
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
DejaVu Sans Mono, monospace
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
monospace
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
| 'cursive': fontes que simulam manuscrito | ||
Comic Sans MS, Comic Sans, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Apple Chancery, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Bradley Hand, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Brush Script MT, Brush Script Std, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Snell Roundhand, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
URW Chancery L, cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
cursive
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
| 'fantasy': fontes decorativas , para títulos, etc. | ||
Impact, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Luminari, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Chalkduster, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Jazz LET, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Blippo, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Stencil Std, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Marker Felt, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
Trattatello, fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | 
|
fantasy
| A Ágil Raposa Marrom Pulou Sobre o Cão Preguiçoso | |
