CSS Combinações de Fontes
Georgia
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:
black;
font-family:
Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family:
Georgia, serif;
font-size: 60px;
color: white;
}
</style>
</head>
<body>
<h1> Lorem Ipsum usa</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "".
Este tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto. </p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos softwares para
processamento de texto ou layout da página usando esses textos como o modelo
padrão, daí a sua presença em locais de construção. </p>
</body>
</html>
Geórgia e Verdana
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family:
Verdana, sans-serif;
font-size: 16px;
}
h1 {
font-family:
Georgia, serif;
font-size:
46px;
}
</style>
</head>
<body>
<h1> Lorem Ipsum usa</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "".
Este tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto.</p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos software para
processamento de texto ou layout da página usando esses textos como o modelo
padrão, daí a sua presença em locais de construção.</p>
</body>
</html>
Helvética e Garamond
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family:
Garamond, serif;
font-size:
16px;
}
h1 {
font-family:
Helvetica, sans-serif;
font-size:
46px;
}
</style>
</head>
<body>
<h1> Lorem Ipsum usa</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "".
Este tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto.</p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos software para
processamento de texto ou layout da página usando esses textos como o modelo
padrão, daí a sua presença em locais de construção.</p>
</body>
</html>
Combinações
de Fontes do GOOGLE
Merriweather e Open Sans
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans">
<style>
body {
font-family:
"Open Sans", sans-serif;
font-size: 16px;
}
h1 {
font-family:
Merriweather, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1> Lorem Ipsum usa.</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "". Este
tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto.</p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos software para
processamento de texto ou layout da página usando esses textos como o modelo
padrão, daí a sua presença em locais de construção..</p>
</body>
</html>
Ubuntu e Lora
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Ubuntu|Lora">
<style>
body {
font-family: Lora,
serif;
font-size:
16px;
}
h1 {
font-family: Ubuntu,
sans-serif;
font-size:
46px;
}
</style>
</head>
<body>
<h1> Lorem Ipsum usa.</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "".
Este tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto..</p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos software para
processamento de texto ou layout da página usando esses textos como o modelo
padrão, daí a sua presença em locais de construção.</p>
</body>
</html>
Abril Fatface e Poppins
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins">
<style>
body {
font-family:
Poppins, sans-serif;
font-size:
16px;
}
h1 {
font-family: 'Abril
Fatface', serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Lorem Ipsum usa.</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "".
Este tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto.</p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos software para
processamento de texto ou layout da página usando esses textos como o modelo
padrão, daí a sua presença em locais de construção.</p>
</body>
</html>
Cinzel e Fauna Um
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Cinzel|Fauna+One">
<style>
body {
font-family: 'Fauna
One', serif;
font-size:
16px;
}
h1 {
font-family: Cinzel,
serif;
font-size:
46px;
}
</style>
</head>
<body>
<h1>Lorem Ipsum usa.</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "".
Este tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto.</p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos software para
processamento de texto ou layout da página usando esses textos como o modelo
padrão, daí a sua presença em locais de construção.</p>
</body>
</html>
Fjalla One e Libre Baskerville
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville">
<style>
body {
font-family: 'Libre
Baskerville', serif;
font-size:
16px;
}
h1 {
font-family: 'Fjalla
One', sans-serif;
font-size:
46px;
}
</style>
</head>
<body>
<h1> Lorem Ipsum usa.</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "".
Este tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto.</p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos software para
processamento de texto ou layout da página usando esses textos como o modelo
padrão, daí a sua presença em locais de construção.</p>
</body>
</html>
Espaço Mono e Muli
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Space+Mono|Muli">
<style>
body {
font-family: Muli,
sans-serif;
font-size: 16px;
}
h1 {
font-family:
"Space Mono", monospace;
font-size: 46px;
}
</style>
</head>
<body>
<h1> Lorem Ipsum usa.</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "".
Este tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto.</p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos software para
processamento de texto ou layout da página usando esses textos como o modelo
padrão, daí a sua presença em locais de construção.</p>
</body>
</html>
Espectral e Rubik
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Spectral|Rubik">
<style>
body {
font-family: Rubik,
sans-serif;
font-size: 16px;
}
h1 {
font-family:
Spectral, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1> Lorem Ipsum usa.</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "".
Este tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto.</p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos software para processamento
de texto ou layout da página usando esses textos como o modelo padrão, daí a
sua presença em locais de construção..</p>
</body>
</html>
Oswald e Noto Sans
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Oswald|Noto+Sans">
<style>
body {
font-family:
"Noto Sans", sans-serif;
font-size: 16px;
}
h1 {
font-family: Oswald,
sans-serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1> Lorem Ipsum usa.</h1>
<p>A Lipsum é um texto usado como um substituto na
ausência do texto final de um modelo ou um site. Lipsum vem da contração dos
textos alternativos mais conhecidos: "" Lorem ipsum "".
Este tipo de texto também é chamado de texto em branco, texto falso, falso,
preencher texto de substituição de texto.</p>
<p>O uso de texto fictício é comum desde o século 16
nos meios de comunicação e da composição de impressão. O conteúdo falso foi
democratizado na década de 60, quando a empresa especializada em typo Letraset,
publicado pranchas com Lorem Ipsum. Na era do computador, muitos software para
processamento de texto ou layout da página usando esses textos como o modelo
padrão, daí a sua presença em locais de construção.</p>
</body>
</html>