ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 프로그래밍 폰트
    프로그래밍/기타 2018. 7. 8. 23:29

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

    폰트의 용어[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에서 아주 깔끔하게 나와있다.


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


    일반.

    친환경.

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

    가독성.

    웹.

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

    다국어


    댓글

Designed by black7375.