깃블로그(14) 폰트크기 변경

minimal-mistakes 테마 폰트

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

적용

: 다음과 같이 적용한다

(1) _reset.scss 수정

: /_sass/minimal-mistakes/_reset.scss 파일을 수정한다.

# ASIS

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%;
}

다음과 같이 변경한다.

# TOBE
# 기본으로 16px의 글자 크기를 사용하고, 
# 창의 크기가 medium, large, x-large로 나뉨에 따라 
# 유동적으로 글자 크기를 사용한다.
# 
# 웨일브라우저의 개발자모드(F12)를 통해 확인하니 모바일 화면에서는 기본(16px), 그리고 HD정도의 환경에서 미디움(18px)으로 분류되는 것 같다.
# 내가 일반적으로 현재 보는 FHD~QHD 환경에서는 20px로 보였다는 이야기이다.
# 개인적으로 모바일에서는 14px, 그 외는 16px가 예쁜 것 같아 그렇게 설정했다. ( 2022-12-19 기록 다르게 수정했다... 아래가 최신 변경분이다^^)
# 약간 오밀조밀한 느낌도 있다.
# [참고](https://danggai.github.io/github.io/Github.io-%EB%B8%94%EB%A1%9C%EA%B7%B8-%ED%8F%B0%ED%8A%B8-%ED%81%AC%EA%B8%B0-%EC%A1%B0%EC%A0%88%ED%95%98%EA%B8%B0/#1-_sassminimal-mistakes_resetscss-%EC%88%98%EC%A0%95)

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 15px;    <!-- 이 부분을 수정하면 된다. -->

  @include breakpoint($medium) {
    font-size: 17px;  <!-- 이 부분을 수정하면 된다. -->
  }

  @include breakpoint($large) {
    font-size: 17px;  <!-- 이 부분을 수정하면 된다. -->
  }

  @include breakpoint($x-large) {
    font-size: 17px;  <!-- 이 부분을 수정하면 된다. -->
  }

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

참고)
대충 나는 한 사이즈로 통일할래!
라는 생각을 가지고 있다면 그냥 다 같은 폰트 크기로 바꾸고 꺼도 무관하다.

적용 완료

: 크기가 커서 가독성이 조잡해보였던 블로그가 훨씬 깔끔해졌다.