Tag: Font

  • Font vs. Typography

    Font vs. Typography

    타이포그래피(Typography)는 활자 서체의 배열을 말하는데, 특히 문자 또는 활판적 기호를 중심으로 한 2차원적 표현을 가리킨다. 활판으로 하는 인쇄술을 가리키는 용어이기도 하다. 오늘날에는 뜻이 바뀌어 사진까지도 첨가하여 구성적인 그래픽 디자인 전체를 가리키고 일반의 디자인과 동의어 같이 쓰이는 일도 있다. 즉, 편집 디자인 분야에서는 활자의 서체나 글자 배치 따위를 구성하고 표현하는 일을 가리키는 용어이다.

    서양의 활판술 발명 이전의 양식을 지금도 계승하고 있으나 바우하우스를 중심으로 하는 근대 타이포그래피는 구성주의적인 창작에 의하여 옛 형태를 타파하고, 점차 기능적인 표현을 행하여 디자인의 한 분야가 되었다. 한편 조본(造本)을 중심으로 하는 고전적인 기법과 유기적·유동적인 아메리칸 타이포그래피 등도 있다.

    타이포그래피는 문자 배열, 문자 디자인과 문자 상형을 수정하는 기술과 예술이다. 상형문자는 창조되고 다양한 일러스트레이션 기법으로 수정된다. 글자의 정돈은 서체의 선택, 포인트 사이즈, 선 길이, 선 간격, 문장 사이의 간격 맞춤과 단어 사이의 간격 맞춤을 포함한다.

    타이포그래피는 도판공 타입세터, 컴포지터, 타이포그래퍼, 그래픽 디자이너, 아트 디렉터, 코믹 북 아티스트, 그래피티 아티스트와 서기관에 의해 표현된다. 디지털 시대까지, 타이포그래피는 전문적인 직업이었다. 디지털화되어 시각 디자이너와 설계자의 타이포그래피의 새로운 시대가 열렸다.

    슬라이드 자료

  • UI를 위한 타이포그래피 규칙

    UI를 위한 타이포그래피 규칙

    한 연구에 따르면 사용자 인터페이스의 70%는 다른 사람과 의사 소통하는 가장 좋은 방법으로 타이포그래피에 의존한다고 한다.

    타이포그래피는 사용자 인터페이스에서 중요한 역할을하며, 타이포그래피 디자인을 개선하는 것은 UI와 UX를 개선하는 중요한 단계이다.

    사용자 중심 디자인은 전자 책 또는 블로그 테마 디자인과는 다르다. 비록 유형 중심 디자인의 원리가 여전히 기술을 적용하고 있지만 UI에서 더 나은 타이포그래피를 위한 8가지 규칙이 있다.

    1. Hierarchy

    콘텐츠를 효과적으로 전달하기 위한 가장 중요한 기술 중 하나는 타이포그래피 계층을 사용하는 것이다.

    2. Font Choices

    • 잘 알려진 안정된 소스 중에서 선택한다.
    • Sans-Serif 또는 Serif 는 안전한 선택이다.
    • 다양한 크기에서 잘 작동하는 서체를 선택하는 것이 중요하다.

    3. Text Sizing

    상대단위와 절대단위

    [ 절대단위 ]
    cm : 센티미터
    mm : 밀리미터, cm 의 1/10
    pc : 1pc 는 12 pt 
    pt : 12pt 는 16px
    in : 1in 2.54cm

    [ 상대단위 ]
    px : pixel, 모니터에 따라서 상대적인 크기를 갖음
    em : font-size, 일반적으로 해당 폰트의 대문자 M의 너비를 기준으로 함
    ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 함
    % : 브라우저 기본 글꼴 크기를 100% 하고 상대적 크기를 나타냄

    4. Text Aligned

    5. Line Spacing

    6. Letter Spacing

    헤드라인과 같은 더 큰 유형의 크기는 글자 간격을 더 엄격하게 하여 가독성을 높이고 글자 사이의 간격을 줄인다. 문자 크기가 작을수록 글자 간격이 좁아 가독성이 향상될 수 있다.

    7. Color & Contrast

    화면에서 본문 텍스트를 검은색 대신 어두운 회색으로 만드는 것을 고려하자. 화면은 종이보다 대비가 더 심하므로 전체 대비로 읽기가 더 어려워진다.

    8. White Space

    음수 공간(Negative Space)이라고도 하는 여백은 디자인 구성에서 요소 사이의 영역을 의미한다. 여백이 균형이 맞지 않으면 사본을 읽기가 어렵다.

    슬라이드 자료