Reguli de combinare a fonturilor
Combinațiile bune de fonturi sunt esențiale pentru un design reușit. Iată câteva reguli de bază:
- Complementaritate — alege fonturi care se potrivesc, armonizându-se fără a fi prea asemănătoare sau prea diferite.
- Folosește superfamilii de fonturi — o superfamilie este un set de fonturi concepute să funcționeze împreună, așa că amestecarea fonturilor din interiorul uneia este sigură (de exemplu, familia Lucida).
- Contrastul este rege — fonturile prea asemănătoare pot intra în conflict, în timp ce un contrast bun scoate în evidență ce e mai bun din fiecare. Combinarea unui serif cu un sans-serif este o combinație bine cunoscută.
- Alege un singur șef — lasă un font să domine pentru a stabili o ierarhie clară, variind dimensiunea, grosimea și culoarea.
Un singur șef
Titlul mare, alb, Georgia domină clar textul mic, gri, Verdana.
Prompt
O pagină HTML care arată un font ce este „șeful” pentru a stabili o ierarhie.
Într-un bloc intern
<style>, dă body-ului un fundal negru, Verdana sans-serif, 16px, text gri; și dă <h1>-ului Georgia serif, 60px, alb. Adaugă un titlu și un paragraf astfel încât titlul să domine clar.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>Beautiful Norway</h1>
<p>Norway has beautiful mountains, glaciers and stunning fjords. The large white Georgia heading is clearly the boss over the small gray Verdana text.</p>
</body>
</html>
Georgia și Verdana
Georgia și Verdana este o combinație clasică, care rămâne fidelă fonturilor web safe.
Exemplu
Georgia este folosit pentru titluri și Verdana pentru text.
Prompt
O pagină HTML care combină titluri Georgia cu text Verdana pentru corp (web safe).
Într-un bloc intern
<style>, setează <h1> la Georgia, serif și body-ul la Verdana, sans-serif. Adaugă un titlu și câteva paragrafe de text.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
}
h1 {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums.</p>
</body>
</html>
Helvetica și Garamond
Helvetica și Garamond este o altă combinație clasică ce folosește fonturi web safe.
Exemplu
Helvetica este folosit pentru titluri și Garamond pentru text.
Prompt
O pagină HTML care combină titluri Helvetica cu text Garamond pentru corp (web safe).
Într-un bloc intern
<style>, setează <h1> la Helvetica, sans-serif și body-ul la Garamond, serif. Adaugă un titlu și câteva paragrafe de text.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Garamond, serif;
}
h1 {
font-family: Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums.</p>
</body>
</html>
Combinații populare de Fonturi Google
Dacă nu dorești să folosești fonturile HTML standard, poți folosi Fonturi Google, care sunt gratuite și oferă peste 1000 de fonturi. Mai jos sunt câteva combinații populare de Fonturi Web Google.
Merriweather și Open Sans
Merriweather pentru titluri, Open Sans pentru text.
Exemplu
O combinație de Fonturi Google, Merriweather și Open Sans.
Prompt
O pagină HTML care combină fonturile Google Merriweather (titluri) și Open Sans (text).
În
<head>, leagă https://fonts.googleapis.com/css?family=Merriweather|Open+Sans, setează <h1> la "Merriweather", serif și body-ul la "Open Sans", sans-serif. Adaugă un titlu și câteva paragrafe.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans">
<style>
body {
font-family: "Open Sans", sans-serif;
}
h1 {
font-family: "Merriweather", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Ubuntu și Lora
Ubuntu pentru titluri, Lora pentru text.
Exemplu
O combinație de Fonturi Google, Ubuntu și Lora.
Prompt
O pagină HTML care combină fonturile Google Ubuntu (titluri) și Lora (text).
În
<head>, leagă https://fonts.googleapis.com/css?family=Ubuntu|Lora, setează <h1> la "Ubuntu", sans-serif și body-ul la "Lora", serif. Adaugă un titlu și câteva paragrafe.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lora">
<style>
body {
font-family: "Lora", serif;
}
h1 {
font-family: "Ubuntu", sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Abril Fatface și Poppins
Abril Fatface pentru titluri, Poppins pentru text.
Exemplu
O combinație de Fonturi Google, Abril Fatface și Poppins.
Prompt
O pagină HTML care combină fonturile Google Abril Fatface (titluri) și Poppins (text).
În
<head>, leagă https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins, setează <h1> la "Abril Fatface", serif și body-ul la "Poppins", sans-serif. Adaugă un titlu și câteva paragrafe.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins">
<style>
body {
font-family: "Poppins", sans-serif;
}
h1 {
font-family: "Abril Fatface", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Cinzel și Fauna One
Cinzel pentru titluri, Fauna One pentru text.
Exemplu
O combinație de Fonturi Google, Cinzel și Fauna One.
Prompt
O pagină HTML care combină fonturile Google Cinzel (titluri) și Fauna One (text).
În
<head>, leagă https://fonts.googleapis.com/css?family=Cinzel|Fauna+One, setează <h1> la "Cinzel", serif și body-ul la "Fauna One", serif. Adaugă un titlu și câteva paragrafe.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel|Fauna+One">
<style>
body {
font-family: "Fauna One", serif;
}
h1 {
font-family: "Cinzel", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Fjalla One și Libre Baskerville
Fjalla One pentru titluri, Libre Baskerville pentru text.
Exemplu
O combinație de Fonturi Google, Fjalla One și Libre Baskerville.
Prompt
O pagină HTML care combină fonturile Google Fjalla One (titluri) și Libre Baskerville (text).
În
<head>, leagă https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville, setează <h1> la "Fjalla One", sans-serif și body-ul la "Libre Baskerville", serif. Adaugă un titlu și câteva paragrafe.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville">
<style>
body {
font-family: "Libre Baskerville", serif;
}
h1 {
font-family: "Fjalla One", sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Space Mono și Muli
Space Mono pentru titluri, Muli pentru text.
Exemplu
O combinație de Fonturi Google, Space Mono și Muli.
Prompt
O pagină HTML care combină fonturile Google Space Mono (titluri) și Muli (text).
În
<head>, leagă https://fonts.googleapis.com/css?family=Space+Mono|Muli, setează <h1> la "Space Mono", monospace și body-ul la "Muli", sans-serif. Adaugă un titlu și câteva paragrafe.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono|Muli">
<style>
body {
font-family: "Muli", sans-serif;
}
h1 {
font-family: "Space Mono", monospace;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Spectral și Rubik
Spectral pentru titluri, Rubik pentru text.
Exemplu
O combinație de Fonturi Google, Spectral și Rubik.
Prompt
O pagină HTML care combină fonturile Google Spectral (titluri) și Rubik (text).
În
<head>, leagă https://fonts.googleapis.com/css?family=Spectral|Rubik, setează <h1> la "Spectral", serif și body-ul la "Rubik", sans-serif. Adaugă un titlu și câteva paragrafe.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral|Rubik">
<style>
body {
font-family: "Rubik", sans-serif;
}
h1 {
font-family: "Spectral", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Oswald și Noto Sans
Oswald pentru titluri, Noto Sans pentru text.
Exemplu
O combinație de Fonturi Google, Oswald și Noto Sans.
Prompt
O pagină HTML care combină fonturile Google Oswald (titluri) și Noto Sans (text).
În
<head>, leagă https://fonts.googleapis.com/css?family=Oswald|Noto+Sans, setează <h1> la "Oswald", sans-serif și body-ul la "Noto Sans", sans-serif. Adaugă un titlu și câteva paragrafe.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Noto+Sans">
<style>
body {
font-family: "Noto Sans", sans-serif;
}
h1 {
font-family: "Oswald", sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>