웹폰트와 추천 폰트에 대해 알아보자
웹폰트 사이즈에 대해 알아보자
웹 폰트의 적절한 크기는 다양한 요소에 따라 달라질 수 있습니다. 일반적으로 웹 폰트의 기본 크기는 16px로 설정되어 있습니다. 하지만 사용자의 선호도나 디자인 요소에 따라 조정될 수 있습니다.
글꼴 크기를 선택할 때 고려해야 할 몇 가지 요소가 있습니다.
첫째, 가독성을 고려해야 합니다. 폰트가 너무 작으면 사용자들이 내용을 읽기 어려울 수 있으며, 폰트가 너무 크면 디자인이 어색해질 수 있습니다.
둘째, 사용자의 기기와 화면 크기를 고려해야 합니다. 모바일 기기에서는 폰트 크기가 더 작게 보일 수 있으므로 이를 고려하여 크기를 선택해야 합니다.
셋째, 웹 사이트의 디자인 요소와 일관성을 유지해야 합니다. 폰트 크기는 웹 사이트의 전반적인 디자인과 일치하도록 설정되어야 합니다.
일반적으로 본문 텍스트에는 16px에서 18px 사이의 폰트 크기가 적합합니다. 제목이나 주요 요소에는 크기를 크게 조정하여 강조할 수 있습니다. 하지만 사용자의 환경과 디자인 요소를 고려하여 폰트 크기를 조정하는 것이 중요합니다. 웹 사이트의 목적과 대상 사용자를 고려하여 최적의 웹 폰트 크기를 선택하세요.
웹 폰트 크기는 일반적으로 픽셀(px) 단위로 지정됩니다. 일반적으로 12px부터 16px 사이의 크기가 본문 텍스트에 적합하다고 여겨집니다. 하지만 사용자의 기기나 환경에 따라 다르게 표시될 수 있으므로 반응형 디자인을 고려하여 상대적인 단위인 em, rem, vw 등을 사용하는 것도 일반적입니다.
여기서 한가지 더 em 과 rem 의 차이를 알아야 합니다.
em과 rem 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환됩니다. 만약에 1em 혹은 1rem 값을 지정했다면, 브라우저에 의해 16px부터 160px 까지, 아니면 기타 다양한 값으로 변환될 수 있습니다.
rem 단위를 사용하게되면, 변환된 픽셀 크기는 페이지 최상위(root) 요소의 폰트크기가 16px 이라고 가정하면, 10rem은 160px 됩니다. 정리하자면 rem은 최상위의 값을 em은 상위 폰트 크기에 따라 적용된다.
※ 웹 폰트 크기를 정의할 때는 다음과 같은 요소들을 고려해야 합니다:
- 가독성: 텍스트가 적절한 크기로 표시되어야 사용자가 내용을 편리하게 읽을 수 있습니다. 폰트 크기가 너무 작으면 읽기 어렵고, 너무 크면 레이아웃이 혼잡해 보일 수 있습니다.
- 사용자 경험: 다양한 기기와 화면 크기에서 웹 페이지가 일관된 경험을 제공하기 위해 반응형 디자인과 함께 상대적인 크기 단위를 사용하는 것이 좋습니다. 이는 사용자가 확대 또는 축소해도 텍스트가 비율에 맞게 조정되어 읽기 쉽게 유지될 수 있도록 도와줍니다.
- 디자인 요소: 웹 페이지의 전반적인 디자인과 일관성을 유지하기 위해 폰트 크기를 조정합니다. 제목, 부제목, 본문 텍스트 등 각 요소마다 다른 크기를 선택하여 시각적인 계층을 형성할 수 있습니다.
※ 웹 폰트 크기를 지정할 때 em, rem, vw와 같은 상대적인 크기 단위를 사용하는 경우가 있습니다. 각각의 상대적인 크기 단위는 다음과 같은 상황에서 사용하는 것이 좋습니다:
- em:
- 상위 요소에 상대적으로 크기를 조정하고 싶을 때 사용합니다. 예를 들어, 부모 요소의 폰트 크기가 변경되면 자식 요소의 크기도 상대적으로 조정됩니다.
- 다단 구조(다단 레이아웃)에서 각 단의 크기를 일관되게 조정할 때 유용합니다.
- rem:
- 루트(HTML) 요소의 폰트 크기를 기준으로 상대적인 크기를 조정하고 싶을 때 사용합니다. rem은 “root em”의 약자입니다.
- 전체 웹 페이지의 크기를 일관되게 조정하고자 할 때 유용합니다. 예를 들어, 모바일 기기에서 화면 크기에 따라 폰트 크기를 자동 조정하고자 할 때 사용할 수 있습니다.
- vw (Viewport Width):
- 뷰포트 너비에 상대적인 크기를 조정하고 싶을 때 사용합니다. 뷰포트는 사용자의 화면에 표시되는 영역을 의미합니다.
- 반응형 디자인에서 사용자의 화면 크기에 맞게 폰트 크기를 조정하고자 할 때 유용합니다. 예를 들어, 뷰포트의 너비가 줄어들면 폰트 크기도 줄어들도록 설정할 수 있습니다.
이러한 상대적인 크기 단위를 사용하면 사용자의 기기나 화면 크기에 따라 폰트 크기가 조정되어 일관된 경험을 제공할 수 있습니다. 따라서 반응형 웹 디자인에서 자주 활용되며, 사용자 경험과 가독성을 향상시키는 데 도움이 됩니다. 선택한 크기 단위는 디자인 요구사항과 프로젝트의 목적에 따라 달라질 수 있으므로 상황에 맞게 선택하는 것이 중요합니다.
참고 URL
http://wit.nts-corp.com/2014/11/05/2317
[/fusion_text][fusion_text]반응형 웹디자인을 적용하려면 제일 먼저 글꼴 크기를 정의해야 한다.
기존의 px로 되어 있는 크기를 em의 형태로 변환해서 사용해야합니다.
default font size = 16px 를 사용합니다.
| Pixels | Ems | Percent | |
|---|---|---|---|
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
제목 폰트 추천 사이즈는
제목 폰트의 크기는 일반적으로 본문 텍스트보다 크게 설정되어 강조되는 효과를 주는 것이 일반적입니다. 제목 폰트의 크기는 웹 사이트의 디자인과 목적에 따라 다를 수 있습니다.
일반적으로 제목 폰트의 크기는 20px에서 32px 사이로 설정되는 것이 보통입니다. 큰 제목 폰트는 주요 섹션의 제목이나 페이지의 주제를 강조하는 데 도움이 될 수 있습니다. 작은 제목 폰트는 부제목이나 작은 섹션의 제목에 적합합니다.
하지만 웹 사이트의 디자인과 일관성을 유지하는 것이 중요합니다. 제목 폰트의 크기는 웹 사이트의 전체적인 디자인과 일치하도록 설정되어야 합니다. 일관된 디자인을 유지하면 사용자가 웹 페이지를 보다 일관되고 통일된 경험을 할 수 있습니다.
따라서, 제목 폰트의 크기를 선택할 때는 웹 사이트의 디자인 요소와 일관성을 유지하면서, 주요 섹션의 제목을 강조하는 데 도움이 되는 크기를 선택하는 것이 좋습니다.
추천 폰트는 어떤 폰트들이 있을까?
웹 사이트에서 사용할 수 있는 다양한 폰트 중에서 몇 가지 추천해 드릴 수 있습니다. 폰트 선택은 웹 사이트의 분위기, 목적, 대상 사용자 등을 고려하여야 합니다. 다음은 몇 가지 인기 있는 웹 폰트 중에서 추천해 드릴 수 있는 몇 가지입니다:
- 나눔고딕(Nanum Gothic): 국내에서 많이 사용되는 한글 폰트로서 가독성이 뛰어나고 다양한 두께와 스타일을 제공합니다.
- 로브토(Roboto): Google이 개발한 폰트로서 깔끔하고 현대적인 느낌을 주며, 다양한 두께와 스타일을 제공합니다.
- 몰라(Montserrat): 넓은 글자 간격과 선명한 형태로 유명한 폰트로서, 대표적으로 제목이나 헤딩에 사용하기 좋습니다.
- 오픈산스(Open Sans): 깔끔하고 읽기 쉬운 폰트로서, 다양한 두께와 스타일을 제공하여 본문 텍스트나 제목에 모두 적합합니다.
- 루벤토(Lato): 다양한 두께와 스타일을 가진 폰트로서, 현대적이면서도 상업적인 느낌을 주는 폰트입니다.
이러한 폰트들은 일반적으로 웹에서 널리 사용되는 폰트 중 일부입니다. 웹 사이트의 분위기와 디자인 요소에 맞춰 폰트를 선택할 수 있으며, 웹 폰트 서비스나 웹 폰트 라이브러리에서 다양한 폰트를 찾아보실 수도 있습니다. 폰트 선택 시 사용자의 가독성과 디자인 일관성을 고려하며, 웹 사이트의 목적과 대상 사용자에게 적합한 폰트를 선택하는 것이 좋습니다.
필자의 추천 폰트는 Noto sans 폰트로 Google에서 개발한 폰트 패밀리 중 하나입니다. 이 폰트는 광범위한 유니코드 문자 세트를 지원하며, 다양한 언어와 문자를 포괄적으로 제공합니다.
Noto sans 폰트는 다양한 스타일과 두께를 갖추고 있어 다양한 디자인 요구에 부합할 수 있습니다. 이 폰트는 깔끔하고 모던한 디자인으로, 가독성이 높고 다양한 크기에서도 잘 보이는 특징을 가지고 있으며, Noto san 폰트는 웹 사이트, 모바일 앱, 인쇄물 등 다양한 매체에서 사용할 수 있습니다. 또한, 개방형 글꼴 라이선스인 Apache License 2.0으로 배포되어 있어 무료로 사용할 수 있습니다. 이는 개인 및 상업적인 프로젝트에서 자유롭게 사용할 수 있다는 의미입니다.
다국어 지원과 다양한 문자 세트를 제공하기 때문에, 다국적인 웹 사이트나 앱, 문서 등에서 유용하게 활용될 수 있습니다. 또한, 폰트의 일관성과 가독성을 갖춘 디자인으로 사용자 경험을 향상시킬 수 있습니다.
Google Fonts나 다른 폰트 관련 웹 사이트에서 Noto sans 폰트를 다운로드하고 웹 프로젝트에 적용할 수 있습니다. 폰트 파일을 웹 페이지에 포함시키고 CSS 스타일링을 통해 원하는 스타일과 두께를 적용할 수 있습니다. Noto sans 폰트는 널리 사용되는 폰트 중 하나로, 다양한 언어와 문자를 지원하며 깔끔하고 모던한 디자인을 가지고 있어 다양한 프로젝트에 활용될 수 있습니다.
