티스토리 반응형 폰트 크기 설정하기! - (현재 가독성 좋은 폰트 크기는?)

안녕하세요. 가즈입니다.

이번에는 티스토리의 기본 폰트 크기를 설정하는 방법을 해보려고 합니다.

 

요즘에는 FHD(1920X1080)를 넘어서 QHD(2560X1440)도 많이 쓰니,

그만큼 PC유저들은 글을 읽을 때 확대를 해야 합니다.

그래서 블로그들의 폰트 크기 변화는 당연한 수순입니다.

※ 저는 티스토리를 사용하기에 티스토리를 예시로 사용했습니다.

사용하는 스킨 : 오디세이 반응형

 

 

가독성이 좋아야 한다.

결국 블로그는 뉴스처럼 글을 읽게 하는 게 목적입니다.

글이 안 읽히면 그냥 뒤로 가기나 다른 사이트로 넘어가기 마련입니다.

그러므로 가독성이 좋은 폰트 크기를 찾아야 합니다.

 

현재는 언론사를 벤치마킹하는 사이트들에서

18포인트가 가장 좋다고들 합니다.

하지만 해상도가 증가됨에 따라 18 ~ 20포인트까지도 추천드립니다.

 

 

폰트크기 변경법(CSS 사용)

저는 반응형 스킨을 사용 중이기 때문에 화면에 보이는 폰트 크기를 조절하면

전부 자동으로 해당 폰트 크기로 반응하게 됩니다.

※ 반응형의 큰 장점이죠.

 

 

1. 스킨 편집에 html 편집에 들어간다.

 

스킨 편집에서 html 편집으로 갈 수 있다.

 

 

2. CSS 칸으로 이동 후 "컨트롤+F(검색)"하기를 누른다.

  "article-view p"를 검색한다.

 

 

article-view p : PC에서 보이는 화면을 의미한다.

 

 

3. 해당 폰트 사이즈를 원하는 사이즈로 조절한다.

 

font- size : 폰트 크기를 의미한다.

line-height : 줄 간격을 의미한다.

※ 저는 19px와 줄간격은 32px를 줬습니다.

 

 

4. media screen and 부분의 view p 부분도 수정한다.(모바일 화면)

 

media screen and : 모바일에서 보이는 화면을 의미한다.

※ 저는 pc와 똑같이 설정해 줬습니다.

 

 

5. 적용을 클릭 후 새 로고침해서 적용되었는지 확인한다.

 

 

왼쪽 미리 보기 칸에서 글로 이동후 확인하면 적용되는지 확인이 가능합니다.

확실히 큰 폰트 크기가 더 가독성이 좋은 걸 확인할 수 있습니다.

 

이상으로 티스토리 반응형 스킨 폰트 크기 설정법(CSS 이용법)을 알아보았습니다.

더 좋은 해상도의 모니터는 앞으로 계속 나올 테니

알아뒀다가 나중에 조금씩 늘려가면 좋을 듯합니다.