CSS: Typography

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

---

TYPOGRAPHY

Typography

Typography: 페이지에 텍스트를 배열하는 기술

 

학습 내용

• 글꼴 스타일링 및 변환 방법.
• 페이지에 텍스트를 배치하는 방법.
• 외부 글꼴을 웹 페이지에 추가하는 방법을 참조

사용자가 웹 페이지에서 볼 수 있는 가장 중요한 정보 중 일부는 텍스트이며, 페이지 내용에 접근하고 몰입할 수 있도록 텍스트를 스타일링하면 사용자 환경을 크게 개선할 수 있다.

---

Font Family

요소의 글꼴은 font-family property을 사용하여 변경한다.

h1 {
  font-family: Arial;
}

예시에서 모든 <h1> heading 요소의 font-familiy가 Arial로 설정된다.

 

font-family value을 설정할 때 명심해야 할 사항

Multi-Word Values

Times New Roman과 같이 여러 단어로 서체를 지정할 때는 따옴표(')를 사용하여 단어를 그룹화한다.

h1 {
  font-family: 'Times New Roman';
}

Web Safe Fonts

Web Safe Fonts를 통해 모든 브라우저와 운영 체제에서 동일한 글꼴을 선택할 수 있다.

Web Safe Fonts 목록: https://www.cssfontstack.com/

Fallback Fonts and Font Stacks

Web Safe Font는 원하는 글꼴을 사용할 수 없는 경우 사용할 수 있는 좋은 예비 글꼴(fallback fonts)이다.

h1 {
  font-family: Caslon, Georgia, 'Times New Roman';
}

예시에서 Georgia와 Times New Roman은 Caslon의 fallback font이다.

font group을 지정할 때 font stack이 있으며, font stack에는 일반적으로 비슷하게 생긴 글꼴 목록이 포함되어 있다.

브라우저는 우선 Caslon font을 사용하고, 만약 사용할 수 없다면, Georgia와 비슷한 글꼴을 사용하려고 한다.

그리고 만약 Georgia가 이용 가능하지 않다면, Times New Roman을 사용한다.

Serif and Sans-Serif

Caslon, Georgia 및 Times New Roman 글꼴은 Serif 글꼴이다.

Sans-Serif 글꼴과 달리, Serif 글꼴은 각 문자의 끝에 extra detail이 있다.

Serif vs Sans Serif/ 출처: https://content.codecademy.com/courses/web-101/htmlcss1-diagram__fontanatomy.svg

serif와 sans-serif는 font stack에서 다른 어떤 것도 사용할 수 없는 경우 최종 fallback font로 추가할 수 있는 키워드 값이다.

h1 {
  font-family: Caslon, Georgia, 'Times New Roman', serif;
}

예시에서는 font stack에 4개의 글꼴이 있다.

처음 세 개의 글꼴을 사용할 수 없는 경우 브라우저는 시스템에서 사용할 수 있는 모든 Serif 글꼴을 사용한다.

---

Font Weight

CSS에서 font-weight property는 굵거나 얇은 텍스트를 표시하는 방법을 제어한다.

키워드 또는 숫자 값으로 지정한다.

Keyword Values

font-weight property은 다음 키워드 값 중 하나를 사용할 수 있다.

• bold: 굵게 표시
• normal: 일반 글꼴 무게. 기본값
• lighter: 요소의 상위 값보다 얇은 font weight
• bolder: 요소의 상위 값보다 굵은 font weight

Numerical Values

숫자 값(numerical values)은 1(가장 가벼운)에서 1000(가장 굵은)까지 다양하지만, 100의 증분을 사용하는 것이 일반적이다.

font-weight가 400이면 keyword value가 normal이고, font-weight가 700이면 bold와 같습니다.

.left-section {
  font-weight: 700;
}
 
.right-section {
  font-weight: bold; 
}

예시에서는 .left-section 및 .right-section class의 요소에 있는 텍스트가 굵게 표시된다.

 

nemerical font weight은 할당 할 수 없는 글꼴이 있기 때문에, 사용 중인 글꼴의 font weight value를 확인하는 것이 좋다.

---

Font Style

font-style property을 사용하여 텍스트를 기울임꼴(italic)로 표시할 수 있다.

h3 {
  font-style: italic;
}

italtic value은 텍스트를 기울임꼴로 표시하며, font-style property에는 기본값인 normal도 있다.

---

Text Transformation

텍스트는 text-transform property을 통해 모든 대문자 또는 소문자로 표시되도록 스타일 지정한다.

h1 {
  text-transform: uppercase;
}

예시에서 코드는 HTML 코드 내의 제목에 사용되는 경우에 관계없이 모든 <h1> 요소를 uppercase로 표시하도록 포맷한다.

또는 lowercase value을 사용하여 모든 소문자 텍스트 형식을 지정할 수 있다.

 

text-transformtion의 장점

웹 페이지에 표시되는 내용 유형에 따라 항상 특정 요소를 모든 대문자 또는 소문자로 스타일링할 수 있다.

예를 들어, 속보를 보고하는 웹 사이트는 위의 예와 같이 항상 모든 대문자로 나타나도록 모든 <h1> heading 요소를 포맷하기 할 수 있다.

HTML 파일에서 대문자 텍스트를 사용하지 않으므로 코드를 읽기가 어려울 수 있다.

---

Text Layout

Letter Spacing

letter-spacing property(문자 간격 속성)은 요소의 개별 문자 사이의 수평 간격을 설정하는 데 사용된다.

문자 사이의 간격을 설정하는 것이 일반적이지는 않지만, 특정 글꼴이나 스타일을 읽을 수 있는 데 도움이 되는 경우가 있다. letter-spacing property는 길이 값을 2px 또는 0.5em과 같은 단위로 사용한다.

p {
  letter-spacing: 2px;
}

문단 요소의 각 문자는 2픽셀씩 구분된다.

Word Spacing

word-spacing property(단어 간격 속성)을 사용하여 단어 사이의 공백을 설정한다.

단어 사이의 간격을 늘리는 것도 흔한 일은 아니지만, 굵게 표시되거나 확대된 텍스트를 읽을 수 있는 능력을 향상시킨다.

또한 word-spacing property는 길이 값을 3px 또는 0.2em과 같은 단위로 사용한다.

h1 {
  word-spacing: 0.3em;
}

단어 간격은 0.3em으로 설정된다.

단어 간격의 경우 글꼴 크기에 따라 간격을 설정할 수 있으므로 em 값의 사용을 선호한다.

Line Height

line-height property(줄 높이 속성)을 사용하여 텍스트를 포함하는 각 줄의 높이를 설정한다.

line height value는 1.2와 같은 단위 없는 숫자이거나 12px, 5% 또는 2em과 같은 길이 값으로 사용된다.

p {
  line-height: 1.4;
}

예에서 줄 사이의 높이는 1.4로 설정된다.

일반적으로 현재 글꼴 크기에 따라 반응하기 때문에 단위 없는 값이 선호된다.

즉, line-height가 단위 없는 숫자로 지정된 경우 글꼴 크기를 변경하면 라인 높이가 자동으로 재조정된다.

Text Alignment

text-align property(텍스트 정렬 속성)은 텍스트를 상위 요소에 정렬한다.

h1 {
  text-align: right;
}

예시에서 요소는 기본 왼쪽 대신 오른쪽에 정렬된다.

---

Web Fonts

웹 사이트에 사용할 수 있는 글꼴은 제한이 없다.

web fonts을 사용하면 웹에 있는 다양한 글꼴을 통해 고유한 스타일을 표현할 수 있다.

 

Google Fonts 및 Adobe Fonts와 같은 무료 글꼴 서비스는 제공된 <link> 요소를 사용하여 HTML 문서에서 연결할 수 있는 호스트 글꼴(host fonts)이다.

(Google fonts: https://fonts.google.com/)

(Adobe fonts: https://fonts.adobe.com/)

 

또한 fonts.com과 같은 유료 글꼴 배포자의 글꼴을 다운로드하여 사이트의 나머지 파일과 함께 호스팅하여 사용할 수도 있다.

CSS 스타일시트에 @font-face ruleset을 만들어 글꼴 파일의 상대 경로에 연결할 수 있다.

(fonts.com: https://www.fonts.com/)

---

Web Fonts Using <link>

Google Fonts와 같은 온라인 글꼴 서비스를 사용하면 사이트에서 글꼴을 쉽게 찾고 연결할 수 있다.

 

Google Fonts에서 글꼴을 선택하면 해당 글꼴에 사용할 수 있는 모든 스타일이 표시된다.

그런 다음 사이트에서 사용할 스타일을 선택할 수 있습니다.

 

글꼴 및 글꼴 스타일 선택이 완료되면 선택한 font family를 검토할 수 있으며, 사이트에서 사용할 수 있는 <link> 요소가 자동으로 생성된다.

<head>
  <!-- Add the link element for Google Fonts along with other metadata -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<head>

생성된 <link> 요소를 HTML 문서의 <head> 요소에 추가해야 CSS에서 사용할 수 있다.

p {
  font-family: 'Roboto', sans-serif;
}

다른 글꼴 또한 동일한 방법과 마찬가지로 CSS에 font-family declaration을 만들 수 있다.

---

Web Fonts Using @font-face

글꼴은 HTML 문서에서 <link> 요소를 사용하는 대신 CSS 스타일시트의 @font-face ruleset을 사용하여 추가할 수 있다.

글꼴은 다운로드할 수 있다. 글꼴은 다음과 같은 몇 가지 다른 파일 형식으로 제공된다.

• OTF(Open Type Font)
• TTF(True Type Font)
• WOFF(Web Open Font Format)
• WOFF2(WEB Open Font Format 2)

WOFF2가 가장 진보적인 가운데, 다른 형식들은 다른 브라우저에서 글꼴이 작동하는 방식을 위한 표준의 진행형이다. @font-face 규칙에 TTF, WOFF 및 WOFF2 형식을 포함하면 모든 브라우저에서 호환성이 보장된다.

 

Roboto font을 사용하여 @font-face를 사용하는 방법에 대해 알아보자.

 

"Selcted Families" 섹션에서 "다운로드" 단추를 사용하여 글꼴 파일을 컴퓨터에 다운로드한다.

이 경우 파일은 단일 형식으로 다운로드됩니다(TTF).

Google Web Fonts Helper와 같은 도구를 사용하여 WOFF 및 WOFF2에 대한 추가 파일 형식을 생성할 수 있다.

 

필요한 파일이 있으면 웹 사이트의 작업 디렉토리에 있는 폴더로 파일을 이동하면 @font-face ruleset에서 사용할 수 있다.

@font-face {
  font-family: 'MyParagraphFont';
  src: url('fonts/Roboto.woff2') format('woff2'),
       url('fonts/Roboto.woff') format('woff'),
       url('fonts/Roboto.tff') format('truetype')
}

예제를 한 줄 한 줄씩 살펴보자.

• @font-face at-rule은 selector로 사용. CSS stylesheet의 맨 위에 있는 @font-face ruleset을 정의하는 것이 좋다.
• declaratiob block 내에서 font-family property는 다운로드된 글꼴의 사용자 지정 이름을 설정하는 데 사용된다. 이름은 사용자가 선택하는 모든 것이 될 수 있지만 따옴표로 둘러 싸여 있어야한다.
  이 예제에서 글꼴의 이름은 'MyParagraphFont'이다. 이 글꼴은 모든 단락에 사용된다.
• src 속성은 세 개의 값을 포함하며, 각각 글꼴 파일의 상대 경로와 형식을 지정한다.
  예에서 글꼴 파일은 작업 디렉토리 내의 'fonts"라는 폴더 안에 저장되어있다

@font-face at-rule이 정의되면 스타일시트의 글꼴을 사용할 수 있다.

p {
  font-family: 'MyParagraphFont', sans-serif;
}

font-family property를 사용하여 HTML 요소에 글꼴을 설정할 수 있다.

다운로드한 글꼴은 @font-face ruleset에서 font-family property value로 제공한 이름으로 참조할 수 있다.

(이 경우 'MyParagraphFont').

---

참고

• https://www.codecademy.com/learn/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-learn-css-typography/cheatsheet

Web Development Fundamentals: Learn CSS: Typography Cheatsheet | Codecademy

• https://www.cssfontstack.com/

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

• https://fonts.google.com/

Google Fonts

• https://fonts.adobe.com/

Adobe Fonts

• https://www.fonts.com/

Fonts.com | Find, Buy & Download Best Fonts

• https://developer.mozilla.org/en-US/docs/Web/CSS

CSS: Cascading Style Sheets | MDN