안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.
이번 포스팅에서는 웹앱디자인 및 개발할 때 사용하면 좋은 폰트에 대해 다뤄보겠습니다.
이 포스팅은 IOS와 Android에서 권장하는 내용을 바탕으로 작성되었어요.
추천 폰트 사이즈
font-xs: 12px / 0.75rem //덜 중요한 내용
font-sm: 14px / 0.875rem //각주
font-base: 16px / 1rem //본문
font-lg: 18px / 1.125rem // 소제목
font-xl: 20px / 1.25rem // 대제목
- 이렇게 정해두고 사용하면 개발할 때도 굉장히 편합니다.
- px 대신에 rem을 사용해야 웹 반응형에 적용하기 쉬워요.
잠깐만 🖐🏼
브라우저 및 OS 환경에 따라 글씨가 너무 작아지는 것을 방지하려면,
html {
font-size: 14px;
@media (min-width: 768px) {
font-size: 16px;
}
}
추천 폰트 패밀리
html {
font-family:
-apple-system,
system-ui,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Helvetica Neue,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji;
}- 모두 시스템 폰트. 즉, 외부 리소스를 가져올 필요가 없어서 리소스를 줄일 수 있어요.
- 웹 콘텐츠에 한중일 언어가 포함되는 경우, 'system-ui'는 사용하지 않는 것이 좋습니다. 깨져서 보일 수 있어요!
728x90