코딩 폰트 디자인기, Monoid

코딩할 때 어떤 폰트를 사용하시나요? 개인적으로 코딩의 시작은 에디터를 보기 좋게 세팅하는 일부터라고 생각하는데요, 장시간 에디터 화면을 봐야 하기 때문에 꽤 신중하게 폰트를 고르는 편입니다. 

코딩에는 일반적인 문서를 작성할 때와는 조금 다른 폰트를 사용하게 되는데요. 어떤 폰트를 선택하느냐의 기준은 저마다 다르겠지만, 코드 정렬을 위해 고정폭 폰트를, 작은 크기에서도 가독성이 좋고 문자들간의 구분이 잘 되는 폰트를 사용합니다. 마지막의 예를 들면, 숫자 0과 영문자 O, 대문자 I와 소문자 l 을 확실히 구별할 수 있는 것들 말이죠. Consolas, Monaco, Menlo, Source Code Pro 를 비롯하여, 프로그래머들이 애용하는 몇몇 '코딩용 폰트'들이 있습니다. 그 가운데, 새롭게 선보이는 Monoid를 소개합니다. 

Monoid는 이름의 mono에서도 알 수 있듯이 고정폭 폰트이며, 오픈소스 폰트라 누구나 사용이 가능합니다.이 폰트의 디자이너 Andreas Larsen는 일반적인 디자인의 생각과 조금 다른 접근으로 Monoid를 만들었다고 합니다. 그동안 라센은 다른 코딩용 폰트에 변형을 가하고 바꿔 사용하면서 자신만의 코딩용 폰트를 만들고 싶었습니다. 

타협

글꼴을 디자인 할 때, 한 번에 여러가지 문제를 해결하기도 하고, 한 가지 문제에 대한 답이 다른 문제와 충돌하기도 합니다. 그는 먼저, 디자인 프로세스 전반에서 일관성 있는 디자인을 선택하고, 명확한 초점을 유지할 수 있도록 목록을 작성하였습니다. 

우선순위

그는 자신만의 해석으로 Monoid와 함께 Fira Mono, Source Code와 Pragmata Pro 각각이 추구하는 최우선의 특징을 나열해보았습니다 . 이들은 서로 다른 특징을 가진 대표적인 글꼴입니다.

Fira Mono는 특히 큰 크기에서 예쁜 글자이며, Source Code Pro는 고정폭 폰트 계에서 팔방미인입니다. 어디에든 사용할 수 있지요. 또 다른 훌륭한 폰트인 Pragmata Pro는 가장 콤팩트하고 장평이 좁은 글꼴 중 하나입니다. 

그에 비해 Monoid는 어떤 폰트일까요? Monoid에는 다음과 같은 우선순위를 정했습니다. 

1. 읽기 쉬운 - 읽기 쉽고 문자를 구별하기 쉬워야 한다.

2. 조밀함 - 화면에 보다 많은 코드를 쓸 수 있어야 한다.

3. 예쁜 - 매일 몇 시간을 봐도 좋아야 한다.

 

다른 접근

그는 코딩에서 자신이 선호하는 줄 간격이 있다는 것으로 가독성에 우선순위를 두었습니다. 그 간격은 15px이었고, 특정한 크기의 그리드 안에서 Monoid가 매우 뚜렷하게 보이길 원했습니다. 

- Bitmap

비트맵 글꼴을 사용하면, 글리프를 만들기 위해서는 그리드에 적절히 픽셀을 채우면 됩니다. 특정 글자 크기에서 완벽하게 선명하다는 것이 장점이지만, 크기 조절의 단점이 있습니다. 

 

- 외곽선

벡터 방식의 외곽선 글자도 작게 축소할 때의 오차로 인한 부자연스러운 모양이 출력되기도 합니다. 힌팅은 외곽선 글자 정보인 힌트를 이용하여 가능한 그리드에 맞게 글꼴을 인위적으로 변형하는 것인데요. 이를 통해 글자의 출력 형태를 다듬어 보다 나은 결과물을 얻을 수 있습니다.  

Monoid의 방식

Monoid에는 위의 두가지 방식을 결합하여, 처음에 15px의 그리드에 맞게 외곽 글리프를 그렸습니다.

해상도를 제한하는 그리드에서 그리면,  M과 N처럼 동일한 폭이 되지만 결과적으로 비트맵에서의 선명도와 같이 15px에서 글자는 매우 분명해집니다.  

(위에서부터) Monoid, Fira Mono, Source Code Pro, Pragmata Pro

저는 가독성과 실용성, 심미성까지 갖춘 Monoid를 사용해보려고 에디터 설정을 바꿔보았습니다. 작은 글자에서부터 큰 글자까지 읽기에 무리가 없고, 무엇보다 몇 가지 줄간격 옵션이 있어 입맛에 맞게 다운로드할 수 있다는 점이 마음에 듭니다. 여러분도 한 번 사용해보세요!

출처 : Monoid, Medium

by 비숑 발자국