Github.io 블로그 폰트 크기 조절하기

Github 블로그의 전체적인 폰트 크기가 너무 커서, 글을 올렸는데 가독성이 똥망이라 굉장히 맘에 안든다.

본문의 article의 width를 늘리거나 폰트 크기를 줄이려는 해결 방안을 생각해봤는데, 일단 글자 크기부터 줄여봐야겠다.

시작하기 전, 이 글은 minimal-mistakes를 기준으로 작성되었다.

글자 크기 바꾸기

1. /_sass/minimal-mistakes/_reset.scss 수정

자신의 레파지토리에서 우선, _reset.scss를 검색하고 수정을 시작하자.

mmistakes는 사용자의 환경에 따른 유동적인 폰트 크기 환경을 지원하기 위해 breakpoint라는 개념을 사용한다.

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 16px;

  @include breakpoint($medium) {
    font-size: 18px;
  }

  @include breakpoint($large) {
    font-size: 20px;
  }

  @include breakpoint($x-large) {
    font-size: 20px;
  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

위 처럼 작성 된 scss파일을 열었다면, 잘 따라오고 있는 것이다.

font-size가 여러가지 있어서 당황스럽다면 아래 2번 문단을 보면 되고,

대충 나는 한 사이즈로 통일할래!

라는 생각을 가지고 있다면 그냥 다 같은 폰트 크기로 바꾸고 꺼도 무관하다.

2. 창 크기에 따른 분류

기본으로 16px의 글자 크기를 사용하고, 창의 크기가 medium, large, x-large로 나뉨에 따라 유동적으로 글자 크기를 사용한다.

웨일브라우저의 개발자모드(F12)를 통해 확인하니 모바일 화면에서는 기본(16px), 그리고 HD정도의 환경에서 미디움(18px)으로 분류되는 것 같다.

내가 일반적으로 현재 보는 FHD~QHD 환경에서는 20px로 보였다는 이야기이다.

개인적으로 모바일에서는 14px, 그 외는 16px가 예쁜 것 같아 그렇게 설정했다.

약간 오밀조밀한 느낌도 있지만, 나름 맘에 든다.

아래는 내 현재 블로그의 글자 크기 설정이다.

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 14px;

  @include breakpoint($medium) {
    font-size: 16px;
  }

  @include breakpoint($large) {
    font-size: 16px;
  }

  @include breakpoint($x-large) {
    font-size: 16px;
  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

다음에는 mmistakes 환경에서 블로그를 처음 개설했을 때, 촌스러운 파란색 게시글 제목과 빨간색 검색창을 변경하는 방법을 다뤄야겠다.

마크다운 문법 이야기도 하고싶고, 알고리즘 문제 푼 것도 올리고 싶고, 천천히 하나씩 풀어 나가는걸로 해야겠다!