Herb Lubalin으로 영감을 받은 디자인 결정: 타이포그래피는 일러스트레이션과 사진만큼 흥미진진할 수 있습니다.

활자를 잘 사용하면 사람들이 읽는 데 도움이 되지만 훌륭한 타이포그래피는 훨씬 더 많은 일을 할 수 있습니다. 타이포그래피는 어떤 일러스트레이션이나 사진만큼 강력한 방식으로 아이디어를 웅변적으로 표현하고 메시지를 다채롭게 전달할 수 있습니다.

저는 타이포그래피를 존경하는 만큼 영화를 사랑하는 사람입니다. 영화의 분위기를 불러일으키고 스토리텔링을 더해주는 영화 포스터 타이포그래피를 보는 것만큼 영감을 주는 것은 거의 없습니다.

보다 최근에, Quentin Tarantino의 영화 포스터에 있는 타이포그래피는 그의 영화의 분위기와 성격을 완벽하게 반영합니다. 펄프 픽션에서 제목의 Aachen Bold 서체는 영화 자체만큼이나 하드보일드입니다. 원스 어폰 어 타임 인 할리우드, 비록 영화의 다른 부분들 못지않게 아이코닉 사인의 조판은 현실과 동떨어져 있지만, 포스터는 할리우드의 정신을 불러일으킵니다.

Saul Bass는 아마도 그 시대의 가장 유명한 그래픽 디자이너일 것입니다. 1950년대와 60년대 헐리우드에서 그는 간판만큼 알아볼 수 있는 영화 포스터를 만들었습니다. 1958년 Hitchcock의 Vertigo의 포스터 디자인을 위해 Bass는 1920년대 독일 표현주의 영화를 연상시키는 손으로 자른 타이포그래피를 사용했습니다. 1960년에 Bass의 Pyscho(다시 한 번 Alfred Hitchcock의 경우) 제목 타이포그래피는 영리하면서도 분명했습니다. Saul Bass는 West Side Story에서 내가 가장 좋아하는 영화 포스터 중 하나를 디자인한 것으로 종종 잘못 인정되지만 Bass가 타이틀 시퀀스를 디자인했습니다. 이 포스터는 실제로 James Bond의 유명한 007 로고도 만든 Joseph Caroff가 디자인했습니다.

우리는 아직 인쇄물에서와 같이 웹에서 타이포그래피에 대해 동일한 제어 권한을 갖고 있지 않지만, 새로운 파일 형식, 글꼴 전달 서비스 및 웹 글꼴은 10년 전보다 훨씬 더 많은 타이포그래피 유연성을 의미했습니다. CSS의 타이포그래피 컨트롤은 우리가 더 창의적으로 타이핑하는 데에도 도움이 되었습니다. 기본 글꼴 스타일 속성 외에도 이제 OpenType 그림, 하이픈 연결, 합자 및 커닝을 안정적으로 미세 조정할 수 있습니다.

온라인에서 이렇게 창의적인 활자를 사용하는 것은 드뭅니다. 그래픽 디자이너와 재능 있는 타이포그래퍼의 작업을 연구하면 오늘날의 활자 기술을 사용하여 우리가 성취할 수 있는 것에 눈을 뜨게 할 수 있습니다. 개인적으로 가장 좋아하는 디자이너이자 타이포그래퍼 중 한 명이 Herb Lubalin이고, 그에 대해 배우고 그의 작업을 통해 타이포그래피에 대한 접근 방식이 바뀌었습니다.

허브 루발린에서 영감을 받아

Herb Lubalin은 광고, 포스터, 심지어 우표까지 모든 것을 디자인하는 데 경력을 바친 미국 그래픽 디자이너였습니다. 그는 단어의 모양과 타이포그래피 디자인이 어떻게 소리를 낼 수 있는지에 매료되었습니다. Lubalin은 그래픽 디자이너가 예술, 카피, 타이포그래피를 결합하여 메시지를 전달할 때 확신을 더하는 방법을 이해했습니다. 그는 말했다 :

"사람들이 더 잘 의사 소통할수록 더 나은 타이포그래피 표현 타이포그래피에 대한 필요성이 커질 것입니다."

— 허브 루발린

뉴욕의 Cooper Union 미술 학교 입학 시험에 가까스로 합격한 Herbert (Herb) Lubalin은 주당 2달러 인상을 요구했다는 이유로 그래픽 아티스트로서의 첫 직장에서 해고되었습니다. 전쟁 전 미국 광고 대행사에서 레이아웃 아티스트의 역할은 단순히 헤드라인, 카피, 이미지를 사용 가능한 공간에 배치하는 것이었지만, 2차 세계 대전 이후 유럽에서 이민자 디자이너가 유입되면서 상황이 바뀌었습니다. 여기에는 오스트리아의 Herbert Bayer, 러시아인 Mehemed Fehmy Agha, 벨로루시인 Alexey Brodovitch가 포함됩니다.

이 디자이너들은 1960년대와 1970년대에 유명한 광고 크리에이티브 디렉터 Bill Bernbach에 의해 인기를 끌었던 크리에이티브 팀을 구성하기 위해 아트 디렉터, 레이아웃 아티스트 및 작가를 한자리에 모은 새로운 프로세스를 도입했습니다.

1945년 Lubalin은 제약 산업을 전문으로 하는 크리에이티브 스튜디오인 Sudler & Hennessey의 아트 디렉터가 되어 디자이너, 일러스트레이터, 사진가로 구성된 팀을 이끌었습니다. Lubalin이 Sudler & Hennessey에서 그리고 1964년부터 자신의 스튜디오에서 처음 설립한 과정은 매혹적입니다. 그는 "티슈"(요소의 공간적 배열을 설정하는 펜과 잉크 스케치)와 서체 선택, 크기 및 무게를 포함한 타이포그래피 디자인에 대한 자세한 메모를 만들어 디자인 프로세스를 주도했습니다.

새로운 프로젝트가 시작될 때 Lubalin은 티슈 페이퍼에 헤드라인, 카피 및 이미지의 배열을 스케치하는 것으로 시작했습니다. 그런 다음, 그는 그의 아이디어를 구체화하기 위해 또 다른 조직을 위에 놓고, 그 다음에는 그의 디자인을 빠르게 발전시키기 위해 또 다른 조직을 놓을 것입니다. 그의 조수가 바닥이나 쓰레기에서 버려진 티슈를 회수한 후 수집가의 항목이 되었습니다.

Lubalin은 타이포그래피에 대한 강박적인 완벽주의자였습니다. Sudler & Hennessey의 무역 광고인 "Let's talk type"의 경우 Lubalin은 유일한 단락을 정확하게 배치했습니다. 이 사본은 "let"이라는 단어와 함께 기준선에 완벽하게 자리 잡고 있으며 그 크기와 행간은 위의 문자 "y"에서 디센더를 허용합니다.

Lubalin은 Avant Garde 반전 포스터 경쟁을 발표한 포스터의 텍스트 배치에 대해서도 똑같이 정확했습니다. 그는 자주 메스를 사용하여 타이핑을 하고, 글자 사이의 간격을 조정하고 자신의 디자인에 맞게 어센더와 디센더의 높이를 변경했습니다. "No More War"의 헤드라인에 있는 글자는 정확한 크기와 정렬이 되어 있습니다. 대문자 파란색 standfirst의 추적은 공간에 완벽하게 맞는 사본 블록을 만듭니다.

"7월 4일은 소풍을 의미합니다..."에서 Lubalin은 원근법을 사용하여 앞으로의 길을 나타냅니다. 이는 텍스트의 모든 줄을 추적하는 것을 고려하고 때로는 디자인에 맞게 단어를 변경하는 것을 의미했습니다. Lubalin의 디자인으로 작업하는 것은 쉽지 않았으며 그의 조수 중 한 명이 나중에 설명했듯이:

“모든 것을 일렬로 세우려면 그것을 계속해서 반복해야 하고 클라이언트가 텍스트를 변경하면 전체를 다시 해야 합니다. 그(Lubalin)에게는 그만한 가치가 있었습니다. 시간이나 비용은 다른 디자이너들에게만큼 중요하지 않았습니다.”

그의 끊임없는 신념과 재능 덕분에 Lubalin은 20세기의 가장 유명한 그래픽 디자이너이자 타이포그래퍼 중 한 명이 되었습니다. 그가 작업에 접근한 방식과 디자인이 설득력 있게 소통할 수 있다는 확신에서 배울 수 있는 것이 많습니다.

Herb Lubalin과 그의 작품에 대한 두 권의 책이 있습니다. Gertrude Snyder와 Alan Peckolick의 "Herb Lubalin: Art Director, Graphic Designer and Typographer"(1985)는 절판되었지만 eBay에서 좋은 사본을 구할 수 있습니다. 더 나은 것은 Adrian Shaughnessy가 제작하고 Unit Editions에서 발행한 "Herb Lubalin: American Graphic Designer"(2013)입니다. 2000년 한정판인 Shaughnessy의 책에는 Lubalin의 작업에 대한 수백 가지 예가 있습니다.

헤드라인 사전 서식 지정

헤드라인은 활자에 대한 모험을 시작하기에 완벽한 장소입니다. 표현적인 타이포그래피에는 멋진 글꼴이 필요하지 않습니다. 일상적인 다양한 글꼴 모음에서 볼 수 있는 다양한 스타일과 두께를 사용하여 눈길을 끄는 헤드라인을 만들 수 있습니다. Julieta Ulanovsky가 디자인하고 Google Fonts에서 사용할 수 있는 Montserrat와 같은 대가족을 찾아보세요. 얇고 가벼운 것부터 아주 굵은 것, 심지어 검은색에 이르기까지 다양한 두께가 있습니다.

이 최초의 Herb Lubalin에서 영감을 받은 디자인을 위해 제 헤드라인은 이 산세리프체의 검정색과 가벼운 무게를 사용합니다. 음수 추적(문자 간격)과 촘촘한 행간(줄 높이)이 결합되어 주의를 요하는 유형의 블록을 만듭니다.

과거에 이와 같은 헤드라인을 개발하려면 다음과 같이 개별 단어 사이에 구분선을 추가하여 디자인을 HTML에 하드 코딩해야 했습니다.

 <h1><strong>UK's <br> best-<br> selling <br> car</strong> <br> during <br> the <br> 1970s</h1>

다른 경우에는 인라인 범위 요소로 각 단어를 감싸고 표시 속성을 block으로 변경할 수 있습니다.

 <h1><strong><span>UK's</span> <span>best-</span> <span>selling</span> <span>car</span></strong> <span>during</span> <span>the</span> <span>1970s</span></h1>

이러한 프리젠테이션 요소 대신 HTML에 명시적인 줄 바꿈을 추가합니다.

 <h1><strong>UK's best- selling car</strong> during the 1970s</h1>

브라우저는 단어 사이의 단일 공백 ​​이상을 무시하므로 작은 뷰포트에서 이 헤드라인은 문장처럼 읽습니다. 색상, 크기 및 무게를 지정하는 기초 스타일뿐 아니라 이 헤드라인을 독특하게 만드는 네거티브 추적 및 빡빡한 행간만 필요합니다.

 h1 { font-size: 6vmax; font-weight: 300; line-height: .75; letter-spacing: -.05em; text-transform: uppercase; color: #fff; } h1 strong { font-weight: 600; color: #bd1f3a; }

HTML의 pre 요소는 미리 형식이 지정된 텍스트를 존중하고 문서에 작성된 그대로 정확하게 표시하는 반면 CSS 공백 속성은 의미를 희생하지 않고도 유사한 결과를 가능하게 합니다. 사용 가능한 6개의 공백 값 중 내가 가장 자주 사용하는 4개의 값은 다음과 같습니다.

1. white-space: normal;
   텍스트는 필요에 따라 줄 상자와 나누기를 채웁니다.
2. white-space: nowrap;
   텍스트가 줄 바꿈되지 않고 컨테이너가 넘칠 수 있습니다.
3. white-space: pre;
   명시적 줄 바꿈이 존중되고 새 줄 및 br 요소가 있는 텍스트 나누기가 적용됩니다.
4. white-space: pre-wrap;
   공백은 존중되지만 텍스트는 줄 바꿈 상자를 채우기 위해 줄 바꿈됩니다.

더 큰 뷰포트에 대한 white-space 속성의 효과만 필요하므로 미디어 쿼리로 분리합니다.

 @media (min-width: 64em) { h1 { white-space: pre; } }

하나의 글꼴 모음에서 여러 스타일을 사용하면 시각적인 흥미를 더할 수 있습니다. 내 Lubalin에서 영감을 받은 디자인은 가볍고 대담하고 검은색 웨이트와 이 산세리프체의 압축되고 규칙적인 스타일을 통합하여 다양한 텍스트 처리를 생성합니다.

첫째, 내 디자인을 달성하기 위해 두 가지 구조적 요소가 필요합니다. 메인과 사이드:

 <main>…</main> <aside>…</aside>

주요 요소에는 내 헤드라인과 실행 중인 텍스트가 포함되지만 옆에는 한 부문의 4개 이미지와 클래식 Cortina 버전에 대한 5개의 기사가 포함됩니다.

 <aside> <div> <img src="img-1.svg" alt="Ford Cortina Mark 1 front profile"> <img src="img-2.svg" alt="Ford Cortina Mark 3 rear"> <img src="img-3.svg" alt="Ford Cortina Mark 4 front"> <img src="img-4.svg" alt="Ford Cortina Mark 5 rear profile"> </div> <article>…</article> <article>…</article> <article>…</article> <article>…</article> <article>…</article> </aside>

먼저 의사 클래스 선택기를 사용하여 각 기사의 단락 스타일을 지정합니다. 각 단락은 대소문자가 혼합된 글꼴 스타일과 두께의 서로 다른 조합을 사용합니다.

 article:nth-of-type(1) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(2) p { font-family: 'bold-condensed'; font-weight: 600; text-transform: uppercase; } article:nth-of-type(3) p { font-family: 'bold-condensed'; font-weight: 600; } article:nth-of-type(4) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(5) p { font-family: 'bold-condensed'; font-weight: 600; }

모든 화면 크기에 해당하는 기본 스타일을 사용하여 중간 크기 화면에서 볼 수 있는 옆 요소에 레이아웃을 도입합니다. 요소가 겹치지 않는 이와 같은 레이아웃의 경우 단순성을 위해 종종 grid-template-area를 사용합니다. 이 디자인에는 9개의 그리드 영역이 있습니다. 이 영역에 배치할 내용을 설명하는 이름을 지정할 수 있지만(예: "mark-1") 대신 그리드에서 항목을 조금 더 쉽게 이동할 수 있는 문자를 사용합니다.

 @media (min-width: 48em) { aside { display: grid; grid-template-areas: "abc" "def" "ghi"; grid-gap: 1.5rem; } }

4개의 이미지를 템플릿 영역에 배치해야 하며 이미지를 포함하는 부분은 배치하지 않습니다. 해당 요소의 display 속성을 내용으로 변경하여 스타일 지정을 위해 DOM에서 효과적으로 제거합니다.

 aside div { display: contents; }

나는 지역 이름을 사용하여 그 이미지를 배치합니다. 그것들을 다른 영역으로 옮기는 것은 다른 영역 이름을 참조하는 것뿐이며 내 HTML에서 순서는 변경되지 않습니다.

 aside img:nth-of-type(1) { grid-area: a; } aside img:nth-of-type(2) { grid-area: e; } aside img:nth-of-type(3) { grid-area: g; } aside img:nth-of-type(4) { grid-area: i; }

그런 다음 나머지 5개 영역에 기사를 배치하여 레이아웃을 완성합니다.

 aside article:nth-of-type(1) { grid-area: b; } aside article:nth-of-type(2) { grid-area: c; } aside article:nth-of-type(3) { grid-area: d; } aside article:nth-of-type(4) { grid-area: f; } aside article:nth-of-type(5) { grid-area: h; }

중소 규모 화면에서 기본 요소와 옆 요소는 HTML에 나타나는 순서대로 세로로 쌓입니다. 더 큰 뷰포트에서 사용할 수 있는 추가 공간을 통해 나란히 배치할 수 있으므로 시각적 무게가 화면 양쪽에서 균형을 이룹니다. 먼저 body 요소에 5열 대칭 그리드를 적용합니다.

 @media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(5, 1fr); } }

그런 다음 줄 번호를 사용하여 기본 요소와 옆 요소를 모두 배치합니다. 이렇게 하면 내 주요 콘텐츠와 이를 지원하는 기사 사이에 공백 열이 있는 비대칭 디자인이 생성됩니다.

 main { grid-column: 1; } aside { grid-column: 3 / -1; } }

재정렬 및 ​​회전

CSS Grid는 이제 영감을 받은 레이아웃을 구현하는 데 사용할 수 있는 최고의 도구이며 강력한 속성은 복잡한 인쇄 디자인을 개발하는 데에도 유용합니다.

내 헤더에는 두 개의 단락이 뒤따르는 헤드라인이 포함되어 있으며 HTML의 순서는 스타일을 적용하지 않고 읽을 때 의미가 있음을 의미합니다.

 <header> <h1>Cortina</h1> <p>UK's best-selling car</p> <p>From <span>1962–1983</span></p> </header>

이 디자인을 시작하기 위해 두 요소에 대한 기본 스타일을 추가하고 정렬, 색상 및 크기를 설정합니다.

 header h1, header p { margin: 0; text-align: center; } header h1 { font-size: 10vmax; color: #ebc76a; line-height: 1; } header p { font-size: 4vmax; line-height: 1.1; text-transform: uppercase; }

시각적 표현이 아닌 의미론적 문장 구조를 위해 HTML을 주문했으므로 시각적으로 요소를 재정렬할 수 있도록 헤더에 Flexbox 속성을 추가하고 column의 flex-direction 값을 추가합니다.

 header { display: flex; flex-direction: column; }

기본적으로 요소는 HTML에서 발생하는 순서대로 표시되지만 제 디자인에서는 이 헤더의 마지막 단락이 헤드라인 위에 먼저 나타납니다.

모든 요소의 기본 순서 값은 0이므로 HTML을 변경하지 않고 이 단락의 위치를 ​​변경하려면 음수 값 -1을 추가하여 맨 위에 배치합니다.

 header p:last-of-type { order: -1; }

중간 크기 화면을 위한 제 디자인에는 CSS 그라디언트를 사용하여 개발된 두 개의 큰 배경색 밴드가 포함되어 있습니다. 다음으로 헤드라인과 단락의 전경색을 변경하여 이 새로운 배경과 대조합니다.

 @media (min-width: 48em) { body { background-image: linear-gradient(to right, #0a0a08 0%, #0a0a08 50%, #fff 50%, #fff 100%); } header h1 { color: #fff; } header p { color: #ebc76a; } }

CSS Grid와 Flexbox를 결합하면 이 헤더의 세 요소를 비정상적으로 정렬할 수 있습니다. 처음에는 명확하지 않을 수 있지만 이 헤더의 헤드라인과 단락을 4열 대칭 그리드에 배치합니다. 첫 번째 행과 마지막 행의 한 열을 비워두면 이 헤더에 흥미를 더하는 동적 대각선이 생성됩니다.

 @media (min-width: 64em) { header { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; padding-top: 0; } }

내 헤드라인은 4개의 열에 모두 퍼져 있습니다.

 header h1 { grid-column: 1 / -1; }

내 머리글 맨 아래에 표시되는 첫 번째 열은 비워 둡니다.

 header p:first-of-type { grid-column: 2 / -1; }

이제 머리글 상단에 배치된 마지막 단락은 처음 세 열에 걸쳐 있으며 왼쪽에 공백이 남습니다.

 header p:last-of-type { grid-column: 1 / 4; }

웹에서 회전된 텍스트 요소를 보는 것은 드문 일이지만 볼 때 종종 기억에 남고 항상 좋은 놀라움을 선사합니다. 헤드라인을 시계 반대 방향으로 회전하고 싶기 때문에 30도 음수 회전하고 세로로 150픽셀 아래로 이동하는 변환을 추가합니다.

 header { transform: rotate(-30deg) translateY(150px); transform-origin: 0 100%; }

transform-origin 은 변환이 일어나는 지점을 지정합니다. top-left (0 0) , top-right (100% 0) , bottom-right (100% 100%) 또는 bottom-left (0 100%) 0) 가운데 또는 요소의 네 모서리 중 하나에서 원점을 선택할 수 있습니다. bottom-left (0 100%) . 픽셀, em 또는 rem 단위로 원점을 지정할 수도 있습니다.

놀라움을 더하기 위해 해당 변환에 미묘한 전환을 추가하고 누군가가 내 헤드라인 위로 커서를 전달할 때 회전량을 줄입니다.

 header { transition: transform .5s ease-in; } header:hover { transform: rotate(-25deg) translateY(150px); }

헤더 요소 결합

다음 Lubalin에서 영감을 받은 디자인에서는 Cortina 모델의 주문 목록을 다양한 색상의 헤드라인과 결합하여 이 헤더로 강력한 성명을 발표합니다.

 <header> <div> <h1>…</h1> <ol>…</ol> </div> </header>

이 헤드라인에는 세 줄의 텍스트가 포함됩니다. 이전에는 추가 요소 사용을 피했지만 이러한 라인의 스타일을 다르게 지정하려면 세 개의 인라인 스팬 요소가 필요합니다.

 <h1> <span>Best</span> <span>Selling</span> <span>Cortina</span> </h1>

내 Cortina 모델 목록과 해당 모델이 제조된 연도를 표시하는 가장 의미 있는 선택은 정렬된 목록입니다. 각 모델 이름을 강력하게 강조하기 위해 기본 브라우저 스타일의 대담한 모양과 의미론적 가치를 제공하는 강력한 요소로 묶습니다.

 <ol> <li><strong>Mark I</strong> 1962–1966</li> <li><strong>Mark II</strong> 1966–1970</li> <li><strong>Mark III</strong> 1970–1976</li> <li><strong>Mark IV</strong> 1976–1979</li> <li><strong>Mark V</strong> 1979–1983</li> </ol>

작은 뷰포트의 경우 몇 가지 기초 스타일만 필요합니다. 큰 글꼴 크기와 최소한의 행간은 단단한 텍스트 블록을 만듭니다. 그런 다음 span 요소의 표시 값을 인라인에서 블록으로 변경하고 의사 클래스 선택기를 사용하여 첫 번째 및 세 번째 줄의 전경색을 변경합니다.

 h1 { font-size: 18vmin; line-height: .9; color: #fff; } h1 span { display: block; } h1 span:nth-of-type(1) { color: #ba0e37; } h1 span:nth-of-type(3) { color: #31609e; }

내 정렬된 목록의 항목이 각 열이 동일한 양의 사용 가능한 공간을 차지하는 2열 대칭 그리드를 형성하기를 원합니다.

 ol { list-style-type: none; display: grid; grid-template-columns: 1fr 1fr; }

그런 다음 항목의 행간을 조이고 마지막 목록 항목을 제외한 모든 항목의 맨 아래에 파란색 실선 테두리를 추가합니다.

 li { display: inline-block; line-height: 1.2; } li:not(:last-of-type) { border-bottom: 1px solid #31609e; }

편리하게도 CSS 그리드는 정상적인 흐름 때문에 자동으로 정렬하기 때문에 각 목록 항목에 대해 열 또는 행 번호를 지정할 필요가 없습니다. 더 강조하기 위해 강력한 요소의 표시 값을 블록으로 변경하고 대문자로 설정합니다.

 li strong { display: block; font-size: 1.266rem; font-weight: 600; text-transform: uppercase; }

요소를 가로 및 세로 모두 가운데에 맞추는 것은 까다로웠지만 고맙게도 Flexbox는 이 정렬을 구현하기 쉽게 만들었습니다. Flexbox에는 기본 축과 교차 축의 두 축이 있으며 행에서 기본 플렉스 방향 값을 변경하면 방향이 변경됩니다.

내 헤더의 플렉스 방향은 행을 유지하므로 항목을 교차 축(세로) 중심으로 정렬한 다음 주축(가로:)을 따라 콘텐츠 중심을 정렬합니다.

 @media (min-width: 48em) { header { display: flex; align-items: center; justify-content: center; } }

이제 헤더에 내용이 입력되어 3개의 열과 2개의 행이 포함된 그리드를 적용합니다. 치수는 내용에 따라 정의되며 자동으로 크기가 조정됩니다.

 header > div { display: grid; grid-template-columns: repeat(3, min-content); grid-template-rows: auto auto; }

헤드라인의 3가지 다양한 색상의 라인은 이 헤더 디자인의 기초입니다. 이 그리드의 특정 열과 행에 배치하고 싶기 때문에 display: contents; 제목:

 h1 { display: contents; }

그런 다음 줄 번호를 사용하여 여러 색상의 텍스트를 열과 행에 배치합니다.

 h1 span:nth-of-type(1) { grid-column: 1; grid-row: 2; } h1 span:nth-of-type(2) { grid-column: 2; grid-row: 1 / 3; } h1 span:nth-of-type(3) { grid-column: 3; grid-row: 1 / 3; }

머리글의 텍스트가 세로로 나타나도록 하려면 각 범위를 시계 방향으로 180도 회전한 다음 쓰기 모드를 세로 왼쪽-오른쪽으로 변경합니다.

 h1 span { transform: rotate(180deg); writing-mode: vertical-lr; }

내 디자인의 헤드라인과 정렬된 목록은 견고한 블록을 형성합니다. 이러한 요소를 함께 단단히 묶기 위해 목록의 표시 속성을 그리드에서 블록으로 변경합니다. 그런 다음 각 목록 항목의 콘텐츠를 오른쪽에 정렬하여 헤드라인의 기준선에 놓이도록 합니다.

 ol { display: block; } li { text-align: right; }

SVG와 텍스트

SVG를 감상하고 SVG에서 최고의 가치를 얻는 방법에 익숙해지는 데 오랜 시간이 걸렸고 여전히 배우고 있습니다. SVG는 기본 모양보다 훨씬 더 많은 것을 생성할 수 있으며 가장 흥미로운 기능 중 하나는 텍스트 요소입니다.

HTML 텍스트와 마찬가지로 SVG 텍스트는 액세스 및 선택 가능합니다. 또한 클리핑 패스, 그라디언트, 필터, 마스크 및 획을 포함한 채우기를 사용하여 무한히 스타일을 지정할 수 있습니다. SVG에 텍스트를 추가하는 것은 text 요소를 사용하여 HTML에 포함하는 것과 같습니다. 이러한 텍스트 요소 내부의 콘텐츠만 브라우저에서 렌더링되며 외부의 모든 내용은 무시됩니다. 필요한 만큼 텍스트 요소를 추가할 수 있지만 다음 헤드라인에는 하나만 필요합니다.

 <svg> <text>'70's best-selling Cortina British car</text> </svg>

SVG에는 텍스트에 적용할 수 있는 속성 및 속성 값 집합이 포함되어 있습니다. 문자 및 단어 간격, 텍스트 장식과 같은 많은 SVG 속성도 CSS에 있습니다. 그러나 SVG 텍스트를 매력적으로 만드는 데 도움이 되는 것은 SVG 고유의 스타일 지정 기능입니다.

예를 들어, textLength 는 선택한 lengthAdjust 값에 따라 공간을 채우기 위해 축소 및 확장되는 렌더링된 텍스트의 너비를 설정합니다.

• textLength
  텍스트가 맞게 조정됩니다. textLength를 백분율로 설정하거나 숫자 값을 사용하십시오. 나는 텍스트 기반 단위, em 또는 rem을 사용하는 것을 선호합니다.
• lengthAdjust
  textLength 속성에 정의된 너비에 맞게 텍스트를 압축하거나 늘리는 방법을 정의합니다.

텍스트 요소에서 직접 사용하는 경우 SVG 속성은 인라인 스타일과 동일하게 작동합니다.

 <svg> <text textLength="400">'70's best-selling Cortina British car</text> </svg>

그러나 인라인 스타일과 마찬가지로 외부 스타일시트에 있든 HTML에 포함되어 있든 CSS를 사용하여 SVG 요소의 스타일을 지정하면 최상의 가치를 얻을 수 있습니다. HTML과 함께 포함된 외부 SVG 파일 또는 SVG 블록의 스타일 요소를 사용할 수도 있습니다.

 <svg> <text class="display">'70's best-selling Cortina British car</text> </svg> <style> .display { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -1px; text-anchor: middle; text-transform: uppercase; } </style>

HTML에는 span 요소가 있고 SVG에는 텍스트를 더 작은 요소로 분리하여 고유한 스타일을 지정할 수 있는 유사한 요소가 있습니다. 이 헤드라인의 경우 텍스트 요소의 내용을 6개의 tspan 요소로 나눕니다.

 <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text>

내 헤드라인을 여러 요소로 분할하여 각 개별 단어의 스타일을 지정할 수 있습니다. 기준선에 따라 또는 서로에 대해 상대적으로 SVG 내에서 정확하게 배치할 수도 있습니다.

• x 는 텍스트 기준선의 수평 시작점입니다.
• y 는 텍스트 기준선의 수직 시작점입니다.
• dx 는 이전 요소에서 텍스트를 수평으로 이동합니다.
• dy 는 이전 요소에서 텍스트를 세로로 이동합니다.

내 헤드라인의 경우 첫 번째 tspan 요소를 상단에서 80px 위치에 배치하면 각 후속 요소가 그 아래 80px에 나타납니다.

 <text> <tspan y="80">'70's</tspan> <tspan dy="80">best-</tspan> <tspan dy="80">selling</tspan> <tspan dy="80">Cortina</tspan> <tspan dy="80">British</tspan> <tspan dy="80">car</tspan> </text>

tspan 요소는 정확한 위치 지정 및 개별 스타일 지정에 유용하지만 접근성 문제가 없는 것은 아닙니다. 보조 기술은 tspan 요소를 개별 단어로 발음하고 tspan 이 단일 문자를 감싸는 경우에도 철자합니다. 예를 들어, 스크린 리더는 다음과 같은 일련의 tspan 요소를 발음합니다.

 <tspan>C</tspan> <tspan>o</tspan> <tspan>r</tspan> <tspan>t</tspan> <tspan>i</tspan> <tspan>n</tspan> <tspan>a</tspan>

같이:

"C", "o", "r", "t", "i", "n", "a"

우리는 스타일 선택으로 인해 보조 기술을 사용하는 사람들을 불편하게 하거나 더 심하게는 콘텐츠에 액세스할 수 없게 만들어서는 안 됩니다. 따라서 불필요한 tspan 사용을 피하고 단일 문자에는 사용하지 마십시오.

CSS 및 SVG로 텍스트 쓰다듬기

획을 추가하면 텍스트가 배경 이미지 앞에 배치될 때 가독성에 도움이 되며 미묘하고 눈에 띄는 결과를 얻을 수도 있습니다. 어떤 CSS 사양에서도 텍스트를 스트로크하는 공식적인 방법을 찾을 수 없습니다. 그러나 Webkit 공급업체 접두사를 사용하고 최신 브라우저에서 널리 지원되는 실험적 속성이 있습니다.

text-stroke 는 text-stroke-color 및 text-stroke-width 속성의 약어입니다. 내 스트로크 헤드라인의 경우 먼저 family , size 및 weight 에 대한 기본 타이포그래피 스타일을 설정한 다음 행간 및 자간을 조정합니다.

 h1 { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -6px; line-height: .8; color: #fff; }

그런 다음 text-stroke 을 적용하고 흰색 전경색을 재정의하는 transparent 값으로 text-fill-color property 을 추가합니다.

 h1 { /* -webkit-text-stroke-color: #fff; */ /* -webkit-text-stroke-width: 5px; */ -webkit-text-stroke: 5px #fff; -webkit-text-fill-color: transparent; }

text-stroke 는 W3C 사양이 아닌 실험적 속성이지만 브라우저에서 구현했으므로 제거될 가능성은 거의 없습니다. 그러나 레거시 브라우저 지원에 대해 여전히 우려하고 있다면 기능 쿼리를 사용하여 text-stroke 지원을 테스트하고 적절한 대체를 제공하는 것을 고려하십시오.

SVG에는 stroke 속성과 CSS에서 사용할 수 없는 몇 가지 옵션도 있습니다. 더 많은 옵션과 가장 광범위한 브라우저 지원이 필요한 경우 SVG가 답입니다. 내 SVG 헤더에는 6개의 tspan 요소가 포함됩니다.

 <svg> <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text> </svg>

기본 타이포그래피 스타일 위에 text-stroke-color 및 text-stroke-width 에 해당하는 SVG 속성을 추가합니다. 또한 CSS에서 사용할 수 없는 옵션인 획의 불투명도를 줄입니다.

 text { stroke: #fff; stroke-width: 1.5px; stroke-opacity=".8"; }

SVG에는 획의 측면을 미세 조정하는 다른 속성이 포함되어 있습니다. CSS와 달리 SVG 스트로크는 stroke-dasharray 속성을 사용하여 대시를 사용할 수 있습니다. 대체 값은 채워진 영역과 빈 영역을 정의하므로 내 헤드라인 텍스트 주위의 대시는 1단위 채워진 다음 10단위 공백입니다.

 text { stroke-dasharray: 1, 10; }

더 복잡한 패턴이 필요하면 패턴에 숫자를 추가하여 1, 10, 1의 stroke-dasharray 값은 1(채워진) 10(공백) 1(채워진) 1( 공백,) 10(채워짐,) 1(공백,) 및 반복.

SVG 접근성 최적화

CSS 타이포그래피 컨트롤은 이제 그 어느 때보다 강력해졌지만 디자인이 스타일이 지정된 HTML 텍스트 이상의 것을 요구하는 경우가 있습니다. 이미지 교체 기술은 유행에서 벗어났지만 SVG(외부 파일이든 HTML 내의 인라인이든)는 확장 가능한 텍스트 효과를 제공할 수 있습니다. SVG는 최적화가 잘 되어 있고 접근이 가능하다면 전반적인 성능에도 유용할 수 있습니다.

이 헤더에는 두 개의 서체가 있습니다. 하나는 인도네시아 활자 디자이너 Arief Setyo Wahyudi의 장식용 복고풍 스크립트인 Magehand입니다. 다른 하나는 런던에 기반을 둔 Dalton Maag의 슬래브 세리프인 Mokoko로 얇은 것부터 검은색까지 7가지 무게로 제공됩니다.

이 두 글꼴을 WOFF(Web Open Font Format) 및 WOFF2 형식 모두에 포함하면 내 페이지에 150kb 이상 추가됩니다. 반면 그래픽 편집기에서 이러한 글꼴을 윤곽선으로 변환하고 헤더를 최적화된 SVG 이미지로 전달하면 17kb만 추가됩니다.

내 헤더의 SVG 이미지에는 세 가지 경로가 있습니다.

 <svg xmlns="https://www.w3.org/2000/svg"> <path>…</path> <path>…</path> <path>…</path> </svg>

HTML에서와 마찬가지로 요소가 작성된 순서대로 쌓이기 때문에 이러한 경로의 순서가 중요합니다. SVG에는 모든 요소에 적용할 수 있는 속성 및 속성 값 집합이 포함되어 있습니다. 채우기 속성을 사용하여 헤더의 각 경로에 색상을 지정합니다.

 <path fill="#bd1f3a">…</path> <path fill="#31609e">…</path> <path fill="#fff">…</path>

더욱 세련된 효과를 위해 두 개의 색상 정지점으로 선형 그라디언트를 정의하고 이를 참조하여 장식 스크립트를 채울 수 있습니다.

 <defs> <linearGradient gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#bd1f3a" /> <stop offset="100%" stop-color="#31609e" /> </linearGradient> </defs> <path fill="#fff">…</path> <path fill="#fff">…</path> <path fill="url('#cortina')">…</path>

SVG 파일은 비트맵 이미지나 여러 글꼴 파일을 합친 크기보다 작은 경우가 많지만 최상의 성능을 얻으려면 세심한 최적화가 필요합니다.

모든 요소, 핸들 및 노드는 SVG 파일의 크기를 증가시키므로 가능한 경우 경로를 원, 타원 또는 직사각형과 같은 기본 모양으로 바꾸십시오. 곡선을 단순화하여 노드 수를 줄이고 더 적은 수의 핸들을 사용합니다. Adobe Illustrator, Affinity Designer 및 Sketch 내보내기 파일과 같은 인기 있는 그래픽 소프트웨어는 최적화되지 않은 요소와 불필요한 메타데이터로 인해 부풀려졌습니다. 그러나 개발자 Jake Archibald의 SVGOMG와 같은 도구는 불필요한 항목을 제거하고 종종 SVG 파일 크기를 상당히 줄일 수 있습니다.

텍스트 윤곽선이 포함된 SVG 이미지는 대체 텍스트 및 ARIA 속성을 사용하여 액세스할 수도 있습니다. 외부 SVG 파일에 연결할 때 장식이 아닌 이미지에 대체 텍스트를 추가해야 합니다.

 <img src="header.svg" alt="Cortina. '70s best-selling British car">

보조 기술을 사용하는 사람들을 돕는 가장 좋은 방법은 SVG를 HTML에 포함하는 것입니다. ARIA 역할과 설명 레이블을 추가하면 화면 판독기가 SVG를 단일 요소로 취급하고 레이블 설명을 소리내어 읽습니다.

 <svg role="img" aria-label="Cortina. '70s best-selling British car"> … </svg>

제목 요소를 추가하면 보조 기술이 SVG의 여러 블록 간의 차이점을 이해하는 데 도움이 되지만 이 제목은 브라우저에 표시되지 않습니다.

 <svg> <title>Cortina. '70s best-selling british car</title> </svg>

문서에 SVG 블록이 여러 개 있는 경우 각 블록에 고유한 ID를 부여하고 이를 제목에 추가합니다.

 <svg> <title>…</title> </svg>

ARIA에는 SVG 접근성을 돕는 여러 속성이 있습니다. SVG가 순전히 장식적이고 의미론적 가치가 없는 경우 aria-hidden 속성을 추가하여 보조 기술에서 SVG를 숨깁니다.

 <svg aria-hidden="true"> … </svg>

내 디자인을 위해 HTML 제목 대신 SVG를 사용합니다. 보조 기술에 대한 누락된 의미를 대체하려면 ARIA 역할 속성과 표제 값을 사용하십시오. 그런 다음 누락된 HTML과 일치하는 수준 속성을 추가합니다.

 <svg role="heading" aria-level="1"> … </svg>

클리핑 유형

CSS background-clip 속성은 CSS 상자 모델에 따라 요소의 배경이 border-box , padding-box 또는 content-box 아래로 확장되는지 여부를 정의합니다.

• border-box
  배경은 테두리의 바깥쪽 가장자리(그리고 테두리 아래)까지 확장됩니다.
• padding-box
  배경은 패딩의 바깥쪽 가장자리까지만 확장됩니다.
• content-box
  배경은 콘텐츠 상자 내에서만 렌더링됩니다.

그러나 영감을 주는 타이포그래피를 위한 더 많은 기회를 제공하는 또 하나의 가치가 있습니다. background-clip의 값으로 텍스트를 사용하면 요소의 배경이 포함된 텍스트가 차지하는 공간에 맞게 자릅니다.

In my next example, the brake disk background image is visible only where there's text in the headline. When my headline includes more content or its text size increases, more of that background image will be visible:

 h1 { background-image: url(pattern.svg); background-clip: text; -webkit-background-clip: text; color: transparent; }

You can apply the text value for background-clip to any element except the :root , HTML. As support for background-clip is limited, I use a feature query which delivers those styles only to supporting browsers:

 h1 { color: #fff; } @supports (background-clip: text) or (-webkit-background-clip: text) { h1 { background-color: #fff; background-image: url(pattern.svg); background-position: 50% 100%; background-repeat: no-repeat; background-size: 50%; background-clip: text; -webkit-background-clip: text; color: transparent; } }

Inspired by Lubalin, I want to place images inside the letters of my next headline, and the SVG image element allows me to do just that.

이 SVG 이미지는 제목을 나타내므로 액세스 가능한 상태를 유지하기 위해 대체 텍스트와 ARIA 역할 및 수준을 추가합니다.

 <img src="header.svg" alt="Cortina" role="heading" aria-level="1">

SVG에서 def 요소는 파일의 다른 곳에서 참조할 수 있는 그래픽 개체를 저장합니다. 여기에는 내 이미지가 포함된 패턴이 포함되며 각 문자에 대해 하나씩 추가합니다.

 <svg> <defs> <pattern>…</pattern> <pattern>…</pattern> <pattern>…</pattern> … </defs> … </svg>

defs 요소의 콘텐츠는 직접 렌더링되지 않으며 이를 표시하기 위해 use 속성이나 url을 사용하여 참조합니다. 내 SVG에는 "Cortina"라는 단어의 7개 문자 각각에 대해 하나의 경로가 포함되어 있으며 고유 ID를 사용하여 각 경로를 패턴으로 채웁니다.

 <svg> <defs>…</defs> <path fill="url(#letter-c)">…</path> <path fill="url(#letter-o)">…</path> <path fill="url(#letter-r)">…</path> … </svg>

이미지 요소를 사용하면 SVG 내에서 비트맵 또는 벡터 이미지를 렌더링할 수 있습니다. 내 디자인은 표준 href 속성을 사용하여 연결하는 세 가지 자동차 부품 청사진 이미지를 통합합니다.

 <defs> <pattern width="100%" height="100%"> <image href="pattern-c.png" height="250" width="250"/> </pattern> … </defs>

이 세 가지 자동차 부품 패턴 이미지가 각 문자를 채우고 그 결과 눈길을 끄는 헤드라인 디자인이 됩니다.

기술 결합

허브 루빈이 타자화하는 데 탁월한 능력을 가졌다는 것은 의심의 여지가 없습니다. 이 마지막 Lubin에서 영감을 받은 예를 위해 저는 이 고전적인 70년대 Ford를 위한 매력적인 디자인을 만들기 위해 시연한 기술을 조합했습니다.

이 디자인을 개발하려면 지금쯤에는 매우 친숙해야 하는 두 가지 구조적 요소가 필요합니다.

 <main>…</main> <aside>…</aside>

내 기본 요소에는 실행 중인 텍스트를 포함하는 구분이 뒤에 오는 SVG 헤드라인이 있는 헤더 요소가 포함됩니다. SVG 텍스트에 액세스할 수 있도록 ARIA 역할과 수준을 헤드라인에 추가합니다.

 <main> <header> <svg role="heading" aria-level="1">…</svg> </header> <div>…</div> </main>

전체 이미지를 작은 화면에 제공하고 절반에서 더 큰 뷰포트까지 제공하기 위해 그림 요소와 최소 너비 미디어 쿼리를 사용합니다.

 <aside> <picture> <source media="(min-width: 74em)"> <img src="full.svg" alt="Ford Cortina"> </picture> </aside>

Lubalin의 디자인은 에너지가 넘치는 경우가 많으므로 주요 요소를 에너지로 채우기 위해 그리드 속성을 적용하고 3개의 열과 5개의 행을 사용하여 비대칭 레이아웃을 개발합니다.

 main { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(5, 1fr); }

이 디자인은 카리스마 넘치는 Cortina의 윤곽과 주요 요소를 덮는 텍스트 기반 배경 이미지가 지배합니다. 이 SVG의 크기를 조정하여 요소의 배경을 채우고 background-origin을 변경하여 테두리나 패딩이 아닌 콘텐츠 뒤에만 표시되도록 합니다.

 main { background-image: url(main.svg); background-origin: content-box; background-position: top right; background-repeat: no-repeat; background-size: 100% 100%; }

내 머리글과 텍스트 구분 주위의 열을 비워두면 다른 사람의 시선을 컴포지션으로 이끄는 데 도움이 되는 음수 공간이 생깁니다. 머리글은 내 세 열 중 처음 두 열을 차지하는 반면 분할은 마지막 두 열을 채웁니다.

 header { grid-column: 1 / 3; grid-row: 2 / 3; } main div { grid-column: 2 / 4; grid-row: 3 / 6; }

SVG 텍스트 요소를 사용할 때의 이점 중 하나는 기준선에 따라 또는 각 요소를 기준으로 텍스트를 배치할 수 있다는 것입니다. 내 헤드라인 SVG에는 이 자동차 이름에 대한 두 개의 텍스트 요소와 제조 기간에 대한 세 번째 요소가 포함되어 있습니다. 이 최종 텍스트 요소를 SVG의 왼쪽에서 정확히 250px, 상단에서 60px에 배치하고 싶습니다.

 <svg> <text x="0" y="60">Ford</text> <text x="0" dy="70">Cortina</text> <text x="250" y="60">1962–1983</text> </svg>

이 눈부신 디자인은 텍스트 기반 SVG 배경 이미지와 Cortina 윤곽선이 서로 나란히 맞을 때 더 큰 뷰포트에서 더 기억에 남습니다. body 요소에 2열 대칭 그리드를 적용합니다.

 @media (min-width: 74em) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; } }

그런 다음 줄 이름을 사용하여 기본 및 옆 요소를 그리드에 배치합니다.

 main { grid-column: main; } aside { grid-column: aside; } }

웹에서 영감을 주는 타이포그래피는 매력적이고 가독성이 높아야 하지만 실행 중인 텍스트의 가독성은 배경 배경에 의해 쉽게 영향을 받을 수 있습니다.

배경 필터는 텍스트 뒤에 있는 요소에 CSS 필터 효과를 적용합니다. 이러한 필터에는 배경 이미지, 그래픽 또는 패턴에 대해 실행 중인 텍스트를 더 읽기 쉽게 만드는 데 도움이 되는 흐림, 밝기 및 대비, 색상 효과가 포함됩니다.

이전 문제에서 설명한 것과 동일한 CSS 필터 구문을 사용하여 하나 이상의 필터를 적용합니다.

 main { backdrop-filter: brightness(25%); } main { backdrop-filter: brightness(25%) contrast(50%); }

backdrop-filter 는 필터 효과 모듈 레벨 2 사양의 일부입니다. 일부는 여전히 Webkit 공급업체 접두어가 필요하지만 최신 브라우저에서 이미 견고한 지원을 제공합니다.

 main div { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

시리즈에서 더 읽어보기

• 영감을 받은 디자인 결정: Avaunt Magazine
• 영감을 받은 디자인 결정: 시급한 사항
• 영감을 받은 디자인 결정: 어니스트 저널
• 영감을 받은 디자인 결정: Alexey Brodovitch
• 영감을 받은 디자인 결정: Bea Feitler
• 영감을 받은 디자인 결정: Neville Brody
• 영감을 받은 디자인 결정: Otto Storch
• 영감을 받은 디자인 결정: Max Huber
• 영감을 받은 디자인 결정: Giovanni Pintori
• 영감을 받은 디자인 결정: Emmett McBain
• 영감을 받은 디자인 결정: Bradbury Thompson

주의: Smashing 회원Smashing 회원은 Andy의 Inspired Design Decisions 잡지의 아름답게 디자인된 PDF와 이 기사의 전체 코드 예제에 액세스할 수 있습니다. Andy의 웹사이트에서 직접 이 호의 PDF와 예제 및 기타 모든 호를 구입할 수 있습니다.