프로그래밍 폰트

프로그래밍 폰트가 필요한 이유.

폰트의 용어[from 폰트 관련 용어]

프로그래밍 용도의 폰트가 필요한 이유는

1. 비슷하게 생긴 글자 구분
2. 고정폭
3. 기타 가독성 향상.

나눔고딕, 굴림체과 비교해보자.(/font/로 되어 있는 것은 웹폰트가 없어서 PC에 깔려 있어야 보인다.)

참고로 ~체나 Mono가 들어간 것은 고정폭 폰트.

애초에 프로그래밍 폰트로 나온 것은 '체'나 'Mono'가 붙어있지 않지만, 굴림-굴림체 처럼 일종의 시리즈로 묶인 폰트는 '체'나 'Mono'가 붙는다.

리가추어(ligature) 폰트는 여러 글자를 하나로 묶어 표현 해준다. ( 여기서 확인 )

난 햇갈려서 잘 안쓰긴 하지만.

아래 사이트를 보면 폰트 비교와 설치가 가능하다.

https://black7375.tumblr.com/post/175268344655/programming-fonts

나눔고딕.

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

폰트 자체는 좋으나 a~z와 A~Z의 크기가 달라 혼동이 올 수 있다.

소문자 L과 대문자 i의 구분이 잘 안된다.

/굴림체./

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

못생겼다.

역시 소문자 L과 대문자 i의 구분이 잘 안됨.

추천하는 폰트.

1. Hack

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

Bitstream Vera Sans Mono를 기반으로 만들어진 글꼴이다.

파워 라인 글꼴도 지원도 하고, 아름다움과 가독성 모두 잡았다. 단점이라면 한글 지원을 안 하는 것.

2. D2 Coding

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

한글을 지원하는 몇 안되는 폰트다.

나눔바른고딕을 기반으로 한다. | 표시가 2개로 나누어져 있는 것도 좋다.

이 블로그는 영문은 hack, 한글은 d2 coding을 사용중이다.

문제는 두개의 크기가 안맞다는 건데 1.17배를 시켜서 해결했다.

기타 유명한 폰트(16개).

설명 안 써놓은 것은 귀찮은 걸로..

1. /Bitstream Vera Sans Mono/ 또는 DejaVu Sans Mono

예전부터 꾸준히 인기가 있던 폰트들이다.

둘을 ‘또는’ 으로 분류한 이유는 거의 비슷하게 생겼기 때문이다.

/Bitstream Vera Sans Mono/

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

DejaVu Sans Mono

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

DejaVu Sans Mono는 Bitstream Vera Sans Mono를 개선한 폰트이다.

차이점이라면 과하게 오른쪽으로 치우쳐져 있던 'm'자를 올바르게 정렬 시켰고, _ _로 되어 있던 것을 __로 합쳤다는 것이다.

m자가 오른쪽으로 치우져져 있다는 것은 빨간색으로 표시한 부분에서 n,someString 에서 e와 붙어있다는 것에서 드러난다.

_ _표시를 선호한다면 Bitstream Vera Sans Mono, __를 선호하고 m의 올바른 정렬을 원한다면 DejaVu Sans Mono를 사용하자.

이 아래는 알파벳 순.

2. Anonymous Pro

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

1990 년대 중반에 개발한 Macintosh 비트맵 글꼴 인 Anonymous 9의 트루 타입 버전을 기반으로 만들어졌다.

3. /Consolas/

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

마소가 만든 것.
윈도우 코딩용 기본 폰트

4. /Courier New/

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

윈도우 고정폭 중 하나.

5. /Dina/

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

6. Droid Sans Mono

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

작은 화면에서도 잘 보여준다고.

7. /Fixedsys/

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

또 윈도우 글꼴. CMD의 전통적인 폰트다.

Fixedsys Excelsior라고 비슷한 느낌의 폰트가 존재한다.

Fixedsys Excelsior

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

css 적용을 했는데 안된다. 왜 그러지?

이유 찾는 중.

8. /Lucida Console/

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

9. M+

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

css 적용을 했는데 안된다. 왜 그러지?

이유 찾는 중 2.

10. /Menlo/

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

애플 코딩용 기본 폰트

11. /Monofur/

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

Tex용 글꼴인 Malvem을 기반으로 만든 것으로 특이하다.

12. /ProggyClean/

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

프로그래머가 만든 폰트라고 한다.

13. IBM Plex Mono

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

이름에서 알 수 있듯 IBM이 만들었다.

14. Source Code Pro

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

그래픽 계의 갑인 어도비가 만든 폰트.

15. Roboto Mono

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

16. Ubuntu Mono

//Abcdefghijklmnopqrstuvwxyz
//ABCDEFGHIJKLMNOPQRSTUVWXYZ
//1234567890([{<>}])
//`~!@#$%^&*-_=+:;”’\|
//1LlIij|¦!❙❚⏸丨亅 «‹❮<>❯»›
//-―ㅡㅡ Ø0Oo8B ;；
//„‚'`“‟‘‛ ”’"❛ ❜❟ ❝ ❞⹂〝〞〟＂丶


var sum = 0;
for (var i=0; i<arr.length; i++){
    sum += arr[i];
};

var TestClass = React.createClass({
    render: function() {
        return (
            <div className="someString">
                fooBar
            </div>
        );
    }
});

이름에서도 알 수 있듯 우분투에 들어갈 목적으로 만든 폰트

이외에 Fira Code, Input Mono, Monoid, Terminus, Operator, PragmataPro도 아끼는 폰트다.

폰트 관련 용어는 A beautifully illustrated glossary of typographic terms you should know에서 아주 깔끔하게 나와있다.

기타 타이포그래피에 관심이 있는 분들을 위해 몇가지 링크를 준비해두었다.

일반.

• 라틴알파벳의 이탤릭체와 한글의 흘림체 비교연구
  흘림체에 관한 연구인데, 폰트 지식의 기초를 잘 정리해놓아서 추천한다.
• 굴림체의 조형적 특징과 선호도 분석
  악명이 자자한 굴림체를 왜 쓰면 안되는지에 대한 논문까지 나왔다. ㅋㅋㅋ
  

친환경.

각각 잉크의 번짐, 조형을 이용해 친환경적으로 만드는 방법에 대한 연구.

• 잉크를 ‘아끼는 글자’
  
• 인쇄물에서의 친환경 타이포그라피
  

가독성.

• 본문용 한글 서체의 구조와 인지 요인 상관성 연구
• 글자 너비 변화와 가독성의 상관관계
  
• 반응형 타이포그래피의 기본 원칙
  

웹.

웹 프로그래머가 읽으면 좋다.

• KS 코드 완성형 한글의 추가 글자 제안
  Readable Font란 부가기능에 폰트를 탑제할 때 이용했다.
  
• multilingual.js:다국어 웹 타이포그래피를 위한 섞어쓰기 라이브러리
  이 블로그의 <code></code>내부의 영문(Hack)/한글(D2 Coding) 폭을 동일하게 맞추기 위해 사용했다.

다국어

• 한글과 로마자의 섞어 짜기를 위한 로마자 형태 연구
• 다국어 타이포그래피를 위한 한글-로마자 하이브리드 글자체 디자인