การจับคู่แบบอักษร CSS ที่ยอดเยี่ยม

สารบัญ

แสดงสารบัญ

การจับคู่แบบอักษรที่ดีมีความสำคัญต่อการออกแบบที่ยอดเยี่ยม

กฎการจับคู่แบบอักษร

ต่อไปนี้เป็นกฎพื้นฐานบางประการในการสร้างการจับคู่แบบอักษรที่ยอดเยี่ยม:

1. ส่วนประกอบ

จะปลอดภัยเสมอที่จะค้นหาการจับคู่แบบอักษรที่เสริมซึ่งกันและกัน

การผสมแบบอักษรที่ดีควรสอดคล้องกัน โดยไม่คล้ายกันหรือแตกต่างเกินไป

2. ใช้แบบอักษร Superfamilies

แบบอักษร superfamily คือชุดของแบบอักษรที่ออกแบบมาเพื่อทำงานร่วมกันได้ดี ดังนั้นการใช้แบบอักษรที่แตกต่างกันภายใน superfamily เดียวกันจึงปลอดภัย

ตัวอย่างเช่น Lucida superfamily ประกอบด้วยแบบอักษรต่อไปนี้: Lucida แซนส์, ลูซิดา เซริฟ, เครื่องพิมพ์ดีดลูซิดา แซนส์, เครื่องพิมพ์ดีดลูซิดา เซริฟ และลูซิดา แมท

3. ความแตกต่างคือราชา

แบบอักษรสองตัวที่คล้ายกันเกินไปมักจะขัดแย้งกัน อย่างไรก็ตาม ตรงกันข้าม เสร็จแล้ว วิธีที่ถูกต้อง ดึงสิ่งที่ดีที่สุดในแต่ละแบบอักษรออกมา

ตัวอย่าง: การรวม serif กับ sans serif เป็นการผสมผสานที่รู้จักกันดี

ตระกูล superfamily ที่แข็งแกร่งประกอบด้วยแบบอักษรเดียวกันทั้งแบบ serif และ sans serif (เช่น Lucida และ Lucida Sans)

4. เลือกบอสเพียงตัวเดียว

แบบอักษรเดียวควรเป็นเจ้านาย สิ่งนี้จะสร้างลำดับชั้นสำหรับแบบอักษรบน หน้าของคุณ ซึ่งสามารถทำได้โดยการเปลี่ยนขนาด น้ำหนัก และสี

ตัวอย่าง

ไม่ต้องสงสัยเลยว่า "จอร์เจีย" เป็นนายใหญ่ที่นี่:

 body {
  background-color: black;
  font-family: Verdana, 
  sans-serif;
  font-size: 16px;
  color: gray; 
}
h1 
  {
  font-family: Georgia, serif;
  font-size: 60px;
  
  color: white;
}

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

ด้านล่างนี้ เราได้แสดงการจับคู่แบบอักษรยอดนิยมที่เหมาะกับแบรนด์และบริบทต่างๆ มากมาย

แบบอักษร `จอร์เจีย` และ `Verdana`

แบบอักษร Georgia และ Verdana เป็นการผสมผสานแบบคลาสสิก นอกจากนี้ยังยึดถือมาตรฐานแบบอักษรบนเว็บที่ปลอดภัยอีกด้วย:

ตัวอย่าง

ใช้แบบอักษร "Georgia" สำหรับส่วนหัว และใช้ "Verdana" สำหรับข้อความ:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

เฮลเวติกาและการามอนด์

Helvetica และ Garamond เป็นอีกหนึ่งการผสมผสานแบบคลาสสิกที่ใช้แบบอักษรที่ปลอดภัยบนเว็บ:

ตัวอย่าง

ใช้แบบอักษร "Helvetica" สำหรับส่วนหัว และใช้ "Garamond" สำหรับข้อความ:

Beautiful Norway

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

การจับคู่แบบอักษรของ Google ยอดนิยม

หากคุณไม่ต้องการใช้แบบอักษรมาตรฐานใน HTML คุณสามารถใช้ Google Fonts ได้

Google Fonts ใช้งานได้ฟรีและมีแบบอักษรให้เลือกมากกว่า 1,000 แบบ

ด้านล่างนี้คือการจับคู่แบบอักษรบนเว็บของ Google ยอดนิยมบางส่วน

Merriweather และ Open Sans

ตัวอย่าง

ใช้แบบอักษร "Merriweather" สำหรับส่วนหัว และ "Open Sans" สำหรับข้อความ:

Beautiful Norway

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

อูบุนตูและลอร่า

ตัวอย่าง

ใช้แบบอักษร "Ubuntu" สำหรับส่วนหัว และใช้ "Lora" สำหรับข้อความ:

Beautiful Norway

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

อาบริล แฟตเฟซ และ ป๊อปปิ้นส์

ตัวอย่าง

ใช้แบบอักษร "Abril Fatface" สำหรับส่วนหัว และใช้ "Poppins" สำหรับข้อความ:

Beautiful Norway

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

ซินเซลและสัตว์โลกหนึ่ง

ตัวอย่าง

ใช้แบบอักษร "Cinzel" สำหรับส่วนหัว และ "Fauna One" สำหรับข้อความ:

Beautiful Norway

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

ฟยาล่า วัน และ ลิเบอร์ บาสเกอร์วิลล์

ตัวอย่าง

ใช้แบบอักษร "Fjalla One" สำหรับส่วนหัว และ "Libre Baskerville" สำหรับข้อความ:

Beautiful Norway

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

สเปซโมโนและมูลี

ตัวอย่าง

ใช้แบบอักษร "Space Mono" สำหรับส่วนหัว และใช้ "Muli" สำหรับข้อความ:

Beautiful Norway

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

สเปกตรัมและรูบิค

ตัวอย่าง

ใช้แบบอักษร "Spectral" สำหรับส่วนหัว และใช้ "Rubik" สำหรับข้อความ:

Beautiful Norway

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

ออสวอลด์ และ โนโตะ ซันส์

ตัวอย่าง

ใช้แบบอักษร "Oswald" สำหรับส่วนหัว และ "Noto Sans" สำหรับข้อความ:

Beautiful Norway

ลองด้วยตัวคุณเอง →

<!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>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

หากต้องการดูรายชื่อแบบอักษร Google ฟรีทั้งหมด โปรดไปที่วิธีการ - บทช่วยสอนแบบอักษรของ Google

การจับคู่แบบอักษร CSS ที่ยอดเยี่ยม

สารบัญ

กฎการจับคู่แบบอักษร

1. ส่วนประกอบ

2. ใช้แบบอักษร Superfamilies

3. ความแตกต่างคือราชา

4. เลือกบอสเพียงตัวเดียว

ตัวอย่าง

แบบอักษร จอร์เจีย และ Verdana

ตัวอย่าง

Beautiful Norway

เฮลเวติกาและการามอนด์

ตัวอย่าง

Beautiful Norway

การจับคู่แบบอักษรของ Google ยอดนิยม

Merriweather และ Open Sans

ตัวอย่าง

Beautiful Norway

อูบุนตูและลอร่า

ตัวอย่าง

Beautiful Norway

อาบริล แฟตเฟซ และ ป๊อปปิ้นส์

ตัวอย่าง

Beautiful Norway

ซินเซลและสัตว์โลกหนึ่ง

ตัวอย่าง

Beautiful Norway

ฟยาล่า วัน และ ลิเบอร์ บาสเกอร์วิลล์

ตัวอย่าง

Beautiful Norway

สเปซโมโนและมูลี

ตัวอย่าง

Beautiful Norway

สเปกตรัมและรูบิค

ตัวอย่าง

Beautiful Norway

ออสวอลด์ และ โนโตะ ซันส์

ตัวอย่าง

Beautiful Norway

แบบอักษร `จอร์เจีย` และ `Verdana`