목차
CSS Great Font Pairings
- description : CSS Font Pairing Rules
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-08
Source of the article
CSS Google Fonts
어울리는 폰트 조합은 디자인에 매우 중요합니다.
Font Pairing Rules (폰트 조합 규칙들)
멋진 폰트 조합을 만드는 몇 가지 기본 규칙들은 하기와 같습니다.
1. Complement (보완)
서로를 보완하는 폰트 조합을 찾는 것이 항상 무난합니다.
너무 비슷하거나 너무 다르지 않으면서 폰트 조합은 조화를 이루어야 합니다.
2. Use Font Superfamilies (여러 분류에 속하는 폰트를 포함하는 폰트 패밀리 사용하기)
font superfamily는 함께 잘 어울리도록 설계된 폰트 세트입니다. 그래서 동일한 superfamily내의 다른 폰트를 사용하는 것이 무난합니다.
예를 들어 Lucida superfamily는 다음의 폰트들을 포함합니다: Lucida Sans, Lucida Serif, LUcida Typewriter Sans, Lucida Typewriter Serif, Lucida Math.
3. Contrast is King.
너무 유사한 두 개의 폰트들은 종종 충돌합니다. 하지만 적합한 방식으로 이루어진 대비는 각각의 폰트에서 최상의 결과를 가져옵니다.
예: sans serif와 serif를 조합하는 것은 잘 알려진 조합입니다.
강력한 superfamily는 동일한 폰트의 serif 및 sans-serif 변형 모두를 포함합니다.(예, Lucida 와 Lucida Sans)
4. Choose Only One Boss (메인이 되는 하나 만을 선택하라)
한 폰트가 메인이 되어야 합니다. 이것은 웹 페이지에서 폰트를 위한 계층을 세웁니다. 이것은 크기, 굵기, 컬러를 다양화하여 성취할 수 있습니다.
예제
body { background-color: black; font-family: Verdana, sans-serif; font-size: 16px; color: gray; } h1 { font-family: Georgia, serif; font-size: 60px; /* Georgia is the boss here.*/ color: white; }
Some popular font pairings
1. Georgia and Verdana
클래식한 조합이며, 웹 안전 폰트 표준(web safe font standards)도 준수합니다.
<!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 kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, 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>
2. Helvetica and Garamond
클래식한 조합이며, 웹 안전 폰트 표준(web safe font standards)도 준수합니다.
<!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 kilometres and a population of 5,438,657 (December 2020). Norway is bordered by Sweeden, 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>
Popular Google Font Pairings
하기의 예제들은 상단의 링크를 참조바랍니다.
1. Merriweather and Open Sans
2. Ubuntu and Lora
3. Abril Fatface and Poppins
4. Cinzel and Fauna One
5. Fjalla One and Libre Baskerville
6. Space Mono and Muli
7. Spectral and Rubik
8. Oswald and Noto Sans
