O documento discute as famílias de fontes no CSS e como formatá-las, incluindo tamanho, estilo, cor e outras propriedades. Ele explica as cinco famílias principais (sem serifa, com serifa, monoespaçadas, cursivas e fantasias), e como aplicar fontes, negrito, itálico, cores e tamanhos usando CSS.

1. HTML 4.1 - Aula 11
Canal Effeccinco

2. Revisão da Aula Anterior
 Na ultima aula nós aprendemos:
 O que é CSS
 Como colocar diretamente na sua página html.
 Como separar o CSS para melhor manutenção.
 Aprendemos a colocar com CSS o Plano de fundo, borda, Mudar a cor do texto, mudar a fonte do texto e
colocar sublinhado.
 Aprendemos o que é Herança no CSS.
 Aprendemos a criar uma classe.
 E aprendemos como validar seu CSS no site da W3C.

3. Conteúdo dessa Aula
 Na ultima aula nós vimos por cima o que o CSS é capaz de fazer, nessa aula nós vamos nos voltar a
aprender sobre as fontes e algumas configurações que podemos fazer nas nossas fontes, vamos
aprender aonde devemos tomar cuidado com as nossas fontes.
 Vocês sabiam que as fontes são separadas em famílias? Isso mesmo cada estilo tem sua família, e
apenas algumas fontes são instaladas nos computadores em comum, por isso é altamente importante
você saber mais sobre as fontes pois, vamos supor que você coloque uma fonte na sua página que não
vai rodar na maioria dos computadores, por isso é interessante saber qual fonte escolher.
 Vamos entender quais e como são essas famílias de fonte:

4. Famílias de fontes
 Existem 5 tipos de famílias de fontes no CSS, e cada uma dessas famílias compartilham algo em
comum, vamos conhecer cada uma delas:
 Sem Serifa
 Com Serifa
 Monoespaçadas
 Cursivas
 Fantasias

5. Famíla com Serifa
 A família com Serifa, são aqueles tipos de letra que possuem uma pontinha no
final da Palavra, as pessoas sempre associam a esse tipo de letra, aquelas
letras que são colocadas em Jornais, a mais conhecida delas é:
Times New Roman
 Observe como ela tem várias pontinhas.

6. Família sem Serifa
 São fontes reconhecidas por serem maiores legíveis para telas de computadores, e sans-serfi significa
sem Serifa, veja um exemplo de fonte sem serifa
Arial Black
 Viu essas fontes cansam menor o olho, por isso são as melhores para computadores.

7. Família Monoespaçadas
 São fontes com espaçamento contínuo entre as letras, parecem serem
escritas em uma máquina de escrever, são usadas para mostrar exemplos de
códigos veja um exemplo:
 Courrier
 Viu como tem um espaçamento entre as palavras

8. Família Cursiva
 São fontes que parecem serem escritas a mãos, geralmente usamos elas para
algum título, para deixa-lo diferente, veja um exemplo:
Comic Sans
 Veja como as formas se parecem com a nossa escrita.

9. Família Fantasia
 São fontes mais decorativas, geralmente não é utilizada na Web, raramente
vai se ver esse tipo de fonte, ela é mais utilizada em cartões onde se pode
brincar com esse tipo de letra, veja um exemplo:
Impact
 Viu essas são as diferenças das 5 famílias.

10. Colocando uma fonte na sua página
 Nós já vimos como colocar uma fonte na sua página na aula anterior, mas vamos dar uma revisada,
vamos supor que queremos colocar uma fonte nos parágrafos:
 P{
 font-Family: Verdana, Geneva, Arial, sans-serif;
 }
 É muito simples é só você colocar o comando font-Family e especificar o tipo de letra, nesse exemplo
nos declaramos a fonte como Verdana, mas nós sempre podemos colocar outros tipos de letra por que
se não tiver o primeiro tipo instalado no computador do usuário, ela tenta rodar a próxima e assim vai
até colocar a padrão que existe em todos os computadores que é a sans-serif, lembre quando você for
colocar vários tipos de letras coloque tipos da mesma família como colocamos acima, todas são da
família sans serif.

11. Tamanho da Fonte:
Para você alterar o tamanho da fonte no CSS, nós temos o seguinte comando:
Font-size: 12px;
Isso Define que sua fonte vai ter 12 pixels de tamanho, o ideal é que antes de você alterar o tamanho da
fonte você faça um planejamento da fonte, pode ser em um papel por exemplo, você dizer assim que todos
os títulos das suas páginas agora vão receber o tamanho de 22 pixels, que o texto vai ter 14 pixels de
tamanho e que sub títulos vão receber o tamanho de 18 pixels, dessa forma você pode criar classes e ir
somente aplicando ao seu CSS, deixando todas as suas páginas com um padrão para que o leitor se acostume
com ele.

12. Tamanho da fonte com porcentagem
 Além da definição do tamanho da fonte em pixels nós podemos definir o tamanho da fonte
em porcentagem, e como isso funciona, ela vai comparar com o tamanho da fonte da
marcação pai, então vamos supor que você tenha uma fonte de 10 no body, e você aplica
100% do tamanho no titulo H1, isso significa que sua fonte no H1 vai ter 20 de tamanho.
 Font-size: 100%;
 Além desse marcador nos temos o em, que significa vezes, então você pode definir o tamanho
da sua letra de acordo com a tag pai para que ela aumente em vezes por exemplo:
 Font-size: 1.2em;
 Ela vai aumentar 1.2 vezes o tamanho da sua letra, no caso de ser 10 o tamanho original
então receberia o tamanho de 12;

13. Tamanho das fontes
 Além desses tipos nós podemos especificar o tamanho das fontes de outra
forma:
 Xx-small
 x-small
 Small
 Medium
 Large
 X-large
 Xx-Large

14. Colocando Negrito
 Para colocar o negrito nós temos um comando específico no CSS, que permite
que você controle bem isso e a intensidade que deseja, esse comando é:
 Font-weight: bold; - deixa com negrito
 Font-weight: normal; –deixa sem negrito
 Assim dessa forma você pode controlar melhor seu negrito nas palavras.

15. Colocando estilo na sua fonte
 Você pode adicionar itálico nas suas palavras usando o comando
 Font-style: italic;
 Para colocar um estilo oblíquo também é muito simples:
 Font-style: oblique;
 Essas duas formas são bem próximas e não importa o que você use, escolha
uma e siga em frente.

16. Cor da fonte
 Nós podemos também alterar a cor da fonte, nós usamos o seguinte comando:
 Color: green;
 Informamos o comando color e depois colocamos a cor, porém escrevendo dessa forma fica muito
limitado, pois nós só temos 17 cores para colocar no html, vejamos quais são elas:
 Aqua, black, blue, fuchsia, gray, green, lime, maroom, navy, olive, Orange, purple, red, silver, teal,
White, yellow;
 Então além dessas cores simples nós podemos colocar cores, diferentes, com outros padrões veja:

17. Cores no CSS
 Nós podemos usar o RGB(Red, Green, Blue – Vermelho, verde, azul) que é um
padrão que mistura essas cores para formar novas cores, para isso você
colocar assim:
 Color: rgb(80%, 40%, 0%);
 Color: rgb(200,200,0);
 As porcentagens que informamos é a porcentagem de cada uma das cores,
geralmente o rgb é usado por programas de manipulação de fotos como
photoshop por exemplo, mas podemos pegar o rgb e usar também no html
com o CSS;

18. Cores no CSS
 Ainda para finalizar nós temos o padrão Hexadecimal que é um dos padrões
mais utilizados pelos webdesigners, para definir nós usamos assim:
 Color: #cc6600;
 Esse código equivale ao RGB cada par de sequencia equivale a uma cor que
vai ser misturada para formar a cor que nós desejamos, existem diversos sites
na internet já com os códigos para que os webdesigners o usem, isso facilita
muito.

19. Quer saber mais sobre html?
 Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no
youtube:
 https://www.youtube.com/watch?v=eJI7x94eN2g
 Quer aulas sobre HTML, veja nosso Canal no Youtube, nos assista, curta e
compartilhe:
 https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A/feed
 Acesse o nosso Blog, e confira matérias mais completas.
 www.effeccinco.wix.com/effeccinco

20. Referências
 Livro: Use a Cabeça HTML, CSS e XHTML, 2º
Edição, Editora Alta Books, Elisabeth Freeman &
Eric Freeman. Capítulo 1 – Comece a entender o
HTML.
 SHARMA, Vivek. SHARMA, Rajiv. Desenvolvendo
Sites de e-Commerce. São Paulo: Makron Books,
2001, 598 p.