CSS typography / CSS 폰트 및 타이포그래피

Font-family

 font-family로 폰트를 바꿀 수 있다. 여러 어절로 된 폰트의 경우 인용구 " " , ' ' 를 활용하여 표기한다. Web safe font를 활용하여 여러 브라우저에서 활용되는 범용성있는 폰트를 사용할 수 있다.  

 

 fall back 폰트라고 해서 만약 폰트를 이용자가 사용할 수 없는 종류의 폰트라면 , 첫 번째가 아닌 두번 째 세번째 기입된 폰트를 자동으로 사용하게 한다. 

 

예시) 

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

 

 비슷한 종류의 폰트를 나열해 놓으면 된다. 위와 같은 일련의 폰트 무리를 font stack 이라고 한다. 브라우저에서는 Caslon을 먼저 시도해보고, 안되면 조지아 그것도 안되면 마지막인 Times new roman을 시도하게 된다. 

 

 Serif 와 Sans-Serif 

 

본명조는 세리프 체이다. 

고딕은 산세리프 체이다. 

 

 위와 같이 폰트의 끝에 stroke가 달린 것을 세리프라고 하고 그것이 없는 종류의 폰트를 산세리프라고 한다. serif 와 sans-serif 자체도 위 예시에 나온 font stack에 마지막에 붙어, 앞의 폰트들이 사용불가할 때 마지막 수단으로 사용될 수 있다. 

 

 

 Monospace font

 

일반적인 폰트와는 다르게, 각 글자사이의 간격이 일정한 폰트를 말한다. text eidtior를 사용할 때 쓰이는 폰트도 모노스페이스 류의 폰트로, 비슷하게 생긴 l 1 등의 글자를 구분하거나, 글자 수를 세기 용이하거나 한 이유로 사용되고 있다.

 

 

 

font-weight 

 font weight의 경우 초반에 설명이 나오긴 했었지만, 간단하게 요약하자면 폰트의 굵기를 조절하는 명령어이다. 

bold

normal

lighter

bolder

 

 이렇게 네 가지 정도를 대표적으로 쓸 수 있다. lighter와 bolder는 그것이 속한 부모 요소의 굵기에 상대적으로 한단위씩 두껍거나 얇게하거나 이다. 

 

Numeric Values 

 숫자로 표현한다면 1부터 1000까지 있는데, 400이 normal 700이 bold에 해당한다. 

주의할 점은, 모든 폰트가 numeric(숫자로 표현) bold 를 사용할 수 있지는 않다는 점이다. 따라서 numeric이나 보통의 방법을 시도해보고 되는 것을 골라서 사용하면 된다 .

 예시 : font-weight: 700;

 

 

font-style 

 italic 

 normal

 등을 받아들인다. 

 

text-transform

 텍스트를 대문자화 소문자화 할 수 있다. 속보 뉴스와 같이 어느 상황에서든 대문자로 사용되거나, 혹은 소문자만 사용되어야할 경우 활용할 수 있다. 또한 코딩을 읽을 때에도 html 과 css 가 따로 있으니 보다 간편하다고 한다. 

 

 

Letter spacing/ word spacing / line height 

 

첫 두개는 px, em 등 길이 단위

line height는 단위가 없는 숫자, %, 길이단위 다 사용가능

line height는 해당 폰트가 들어가있는 박스의 높이를 조절한다, 일반적으로 여기서는 단위가 없는 숫자가 선호되는데 폰트 사이즈에 따라 유동적으로 바꾸는 것이 보다 용이하기 때문이다. (responsive 하기 때문) 

 

Text align 으로 좌, 우 , 중간, justify 등 정렬 가능하다. 

 

 

Web safe font와 Web font

 

1) <link>로 불러오는 방법

google font 와 같은 플랫폼을 이용하면 보다 다양한 폰트를 사용할 수 있다. 

구글 폰트에 들어가 원하는 폰트를 선택한 후 <link> element 구문을 복사하고 html문서의 head에 붙여넣기한다. 

그렇게 web font와 연결되고 나면, 그 폰트를 css에서 font-family를 통해 이용할 수 있다. 

 

https://fonts.google.com/ 

Google Fonts

2)@font-face 를 사용하는 방법

  폰트를 다운로드하여 불러오는 방식인데, 4가지 타입의 포맷이 존재한다. 가장 최신의 포맷만 사용해도 괜찮지만, 여러 다른 브라우저의 상황을 고려하여 모든 포맷을 다 불러오면 호환성에 좋다. 아래 네 가지 타입의 포맷이 있고, WOFF2가 가장 최신이다. 

• OTF (OpenType Font)
• TTF (TrueType Font)
• WOFF (Web Open Font Format)
• WOFF2 (Web Open Font Format 2)

 아래와 같은 구문을 사용한다. 폰트 파일들을 다운로드 받은 후 (만약 특정 포맷이 없다면  https://google-webfonts-helper.herokuapp.com/fonts/abeezee?subsets=latin 를 활용한다고 한다) 브라우저의 작업폴더 안에 저장한 후 아래와 같이 불러와 사용할 수 있다. 

 

 아래와 같은 구조이고, css의 최상단에 보통 입력한다. 또한 작성한 format의 순서도 중요한데, 브라우저가 우리가 작성한 순서대로 불러오기 때문이다. font-family에 우리가 입력한 이름이 해당 폰트의 실제 사용 명이 된다. css에서 다른 폰트들 처럼 불러와서 사용할 수 있게 된다 .

 

 웹개발에 사용중인 작업폴더(예 : /font) 에 저장된 것을 불러오는 장치라고 생각하면 된다. woff2가 가장 먼저 오는 것이 보통이고 로딩속도를 빠르게 한다(가장 압축률이 좋은 포맷이므로)

 

@font-face {

  font-family: "";

  src : url(폰트 위치한 경로) format(포맷 위에 상술한 4가지중하나, 추가로 쓰일 포맷은 콤마 이후에 같은 구문으로 추가),

 url(폰트 위치한 경로) format() ;

}

 

 

(작성해보면서 실수한 점 , format에 quotation mark("", '') 사용 안한것 / src는 한번만 쓰면 되는점 ) 

 

 이후에 나오는 텍스트 디자인 관련 리뷰(새로 포스팅 쓸만큼의 분량은 아니라)

 그 아티클에서 새로 알게된 용어 F-skimming(사람은 화면을 좌->우 , 상->하의 우선순위로 인식한다, 몇몇 우측에서 출발하는 글자 언어권은 제외)

 

• Differentiating text is essential, and there are several ways to do this:
  • Use <h1>, <h2>, and <h3> header elements
  • Use 2-3 well-paired fonts, but no more.
  • Adjust font style, size, weight, spacing, and color.
• Whitespace plays a big part in readability. Make sure all of your text elements have enough whitespace.
• Use standard convention for links and navigation buttons so users know what to expect.
• Use columns when necessary to keep line length at around 50-75 characters.
• Use colored cards to pair images with important text so users’ eyes are drawn towards it.
• Have the elements you want users to notice at the top of the page, or down the left-hand side because those are the areas of the page users will notice when skimming.
•