현대 웹 사이트를위한보다 나은 타이포그래피

디지털 텍스트는 다양한 형식으로 서식을 지정할 수 있습니다. 웹 글꼴과 브라우저 스크립트의 발전으로 개발자들이 활용할 수있는 새로운 프로젝트 코드를 보았습니다. 웹 디자이너는 자신의 웹 사이트를 코딩하고 모든 페이지간에 획일적 인 타이포그래피 스타일을 만들 수있는 최상의 전략을 찾고 있습니다..

많은 전문 웹 디자이너가 업데이트 된 기능 및 서비스를 포함하여 주제에 관해 작성했습니다. 각 웹 페이지를 루트 레이아웃 디자인을 해독하는 단일 문서로 간주해야합니다. 이 견해로는 인쇄술이 페이지에서 페이지로 어떻게 흐를 수 있는지를 쉽게 볼 수 있으며 독창적 인 독창성을 제공합니다. 그리고 이것은 특히 당신의 단락과 제목을위한 독특한 수업을 만드는 명백한됩니다.

아래에서는 웹 구축에 관심있는 타이포그래피 디자이너들에게 환상적인 아이디어를 보여 드리겠습니다. 블로그, 소셜 네트워크 및 비즈니스는 항상 현재 웹 사이트를 업데이트하려고합니다. 웹 타이포그래피 용 CSS 스타일은 페이지 새로 고침을 시작할 수있는 훌륭한 소스를 제공합니다..

오늘날 인터넷의 차이점

현대 웹은 2000 년 초반 이후 극적으로 발전했습니다. 웹 디자이너가 그래픽 디자인, 로고, 배너 및 기타 거의 모든 작품을 제작할 수있는 많은 새로운 기능이 있습니다. HTML5 및 CSS3 사양의 출시로 인해 웹 글꼴을 작성하는 기존 방식에 많은 어려움이 따랐습니다..

CSS로 자신 만의 글꼴을 포함시킬 수 있습니다. @ font-face 재산. 당신은 무엇이든 사용할 수 있습니다. 트루 타입(.ttf) 또는 OpenType(.otf) 파일에 저장하고 사본을 서버에 로컬로 저장하십시오. 그런 다음 CSS3 마법을 사용하면 웹 페이지의 어느 곳에서나 가족을 포함시킬 수 있습니다.!

이 기술만으로 현대 인터넷이 어떻게 발전했는지 확인할 수 있습니다..

그리고 jQuery가 매일 인기를 얻으면서 우리는 커스텀 폰트와 결합 된 놀라 울만한 애니메이션 효과를 만들 수 있습니다. 위의 방법 대신 jQuery 용 TTFGen 플러그인을 사용하면 트루 타입 글꼴을 웹 페이지에 포함시킬 수 있습니다..

이 방법은 CSS3 표준을 지원하는 최신 브라우저가 필요 없기 때문에 조금 더 안정적입니다. 물론 인터넷 익스플로러 6과 같은 레거시 브라우저는 제대로 렌더링하기 위해 노력할 것입니다..

그러나 대부분의 사용자가 이러한 표준을 지원하는 최신 브라우징 소프트웨어로 전환 한 것을 고맙게 생각합니다! 그리고 웹용으로 개발할 때는 시장이 누구인지 정확하게 고려해야합니다. 항상 모든 사람을 기쁘게 할 수는 없지만, 충분히 가까워 지도록 노력할 수는 있습니다..

디지털 타이포그래피의 목적

일종의 이상한 아이디어를 고려해야하지만 디지털 텍스트의 진정한 목적은 무엇인가?? 정보를 전달하고, 소스를 공유하고, 인터넷 사용자의 세계에 의견을 제공합니다.. 텍스트는 생각과 아이디어를 공유하는 가장 단순한 형태의 미디어입니다.. 그러나 또한 매우 복잡하고 사진 / 비디오가 사용할 수없는 주요 세부 정보가 포함되어 있습니다..

귀하의 방문자는 귀하의 텍스트 또는 제목의 키워드를 기반으로 귀하의 웹 사이트를 찾을 가능성이 높습니다 - 귀하의 웹 사본에주의를 기울여야하는 또 다른 이유. 일단 웹 사이트에 관심을 갖게되면 집중력을 유지해야합니다. 굵은 머리글과 짝수 간격의 페이지 텍스트를 사용하면 가장 쉽게 수행 할 수 있습니다..

기사 또는 자습서를 작성하는 경우 명확한 언어를 사용해야합니다. 그 페이지 텍스트가 어떻게 보이고 콘텐츠의 품질이 중요한지 똑같이 중요합니다.. 텍스트가 커질수록 쉽게 키워드를 읽고 스캔 할 수 있습니다. 단락에는 콘텐츠의 대부분이 포함될 것이므로 올바른 맞춤을 위해 프로토 타입 작성에 많은 시간을 투자해야합니다. 단락은 메시지를 비트 크기의 청크로 문장으로 나누어 전달하는 데 사용됩니다. 피팅 페이지 레이아웃을 얻기 위해 미리 작성하고 계획하는 방법을 이해하십시오..

또한 페이지 텍스트에는 미디어 및 보조 컨텐츠가 제공됩니다. 단락에 기본 정보가 포함되어있는 경우 페이지를 멋지게 꾸밀 수있는 그래프 나 이미지가있을 수 있습니다. 이러한 액센트는 사용자가 사이트를 계속 움직이는 데 필요한 올바른 촉각 일뿐입니다..

동영상과 이미지를 통해 콘텐츠가 깨져서 독자가 기사를 빨리 읽는 것처럼 보입니다. 그러나이 항목을 사용하지 말고 핵심 메시지를 압도하지 마십시오. 사용자는 (대부분) 정보를 얻기 위해 귀하의 사이트를 방문하고 너무 많은주의 산만을 원하지 않습니다..

다른 모든 서식 지정 옵션은 기능 또는 용도를 지정하는 데 사용됩니다. 예를 들어 하이퍼 링크 텍스트는 다른 텍스트와는 다른 색으로 표시되는 경우가 많습니다. “클릭 할 수있는”. 문장에 중점을 둔 대담하거나 기울임 꼴 단어로 작업 할 수 있습니다. 그리고 따옴표 또는 미리 서식이 지정된 텍스트를 사용하면 기본 문이나 웹 코드를 각각 구분할 수 있습니다..

웹 페이지 헤더

웹 인쇄술에서 가장 중요한 자산 중 하나는 표제 태그입니다. HTML 제목에 익숙하지 않은 경우

에

전자는 가장 중요하고 후자는 가장 적다. 이 마크 업은 Google이 콘텐츠 구조에 따라 도메인과 웹 페이지의 순위를 매기므로 이해하는 것이 좋습니다. 따라서 궁극적으로 어떤 키워드를 사용하고 필요한 제목의 계층을 제어 할 수 있습니까?.

표준 HTML5 사양에는 최대 6 개의 제목 스타일이 포함되어 있지만 3 ~ 4 개를 사용하는 것이 좋습니다. 페이지에 모두 포함 할 필요는 없습니다. 또한 6 가지 제목의 사용을 발견 할 가능성은 거의 없습니다. 처음 앉아서 스타일을 만들 때 제목에 대한 몇 가지 예를 작성하여 원하는 것을보십시오..

Photoshop은이 시나리오에 적합합니다. HTML에서 다른 제목을 코딩하여 브라우저에서 어떻게 보이는지 확인할 수도 있습니다. 중요한 것은 페이지 흐름 및 순위에 따라 작업하는 것입니다..

예를 들어,

태그는 모든 페이지 제목 중에서 가장 두드러 져야합니다..

과

가장 인기있는 태그이며 Google에서 페이지 콘텐츠 크롤링을 권장합니다. 굵은 글꼴, 밑줄, 대시 테두리 또는 다른 색상과 같은 디자인 효과를 사용하면 제목이 페이지에서 뛰어 내리는 데 도움이됩니다..

간격도 중요합니다. 그 주제에 관해서는 제목이나 내용물에 관해서. 제목과 주요 콘텐츠 영역 사이에 여백을 추가해야합니다. 글꼴을 충분히 크게 만든 경우 각 제목은 자신의 핵심 블록처럼 두드러 져야합니다. 이 모양은 명확한 메시지로 독자의주의를 끌고 싶을 때 이상적입니다..

독특한 하이퍼 링크 만들기

페이지 링크에 대한 주제는 많이 있습니다. 한 가지 방법이나 다른 방법으로 코드에서 하이퍼 링크를 사용해야합니다. 사이트의 다른 페이지 간 주요 탐색 인터페이스로 매우 중요합니다. 나중에 참조 할 수 있도록 다른 블로그 나 보관 된 블로그 게시물까지 링크 할 수도 있습니다..

링크에 대한 보관 텍스트를 매우 신중하게 선택해야합니다. 이것은 링크 스타일에 의해 강조되는 특정 내용입니다. 예를 들어 "여기를 클릭하십시오"는 인기가 높으며 대부분의 경우 직접 다운로드에 사용됩니다. 이 체계적인 접근 방식을 피하고 대신 하이퍼 링크 텍스트로 조금 창의적으로 만드십시오. 컨텍스트를 인식하고 새로운 페이지에 포함될 내용을 파악할 수 있다면 방문자가 링크를 클릭 할 확률이 훨씬 높습니다..

당신의 연결을 유행에 따라 디자인 할 경우 당신은 뒤에 오는 것 고려해야한다 - 페이지 설정에서 변경 사항이 어떻게 보이는지, 어떤 유형의 배경색을 사용하고 있습니까?, 과 대비를위한 텍스트의 색은 무엇입니까??

링크는 클릭 할 수있는 항목으로 페이지에서 뻔뻔스럽게 나타납니다. 결국 그 기능입니다. 이것이 오래된 파란색 효과에 밑줄을 긋는 효과가 좋은 이유입니다. 그러나 대체 색상이 효과가 있다고 판단되면 시도해보십시오. 링크 설계를위한 완벽한 솔루션은 없습니다. 웹 주위를 조금만 둘러 보시면 분명히 뛰어난 걸 만들어 낼 것입니다..

관심의 한 가지 포인트는 시도해야 할 몇 가지 기능입니다. 피하는. 텍스트 폰트 패밀리 또는 폰트 크기를 변경하는 것과 같은 일은 매우 짜증나게 할 수 있습니다. 이렇게하면 텍스트가 왜곡되어 이동하게되어 링크 영역 밖으로 마우스 커서가 이동하게됩니다. 비슷한 방법으로 여분의 여백 / 패딩을 링크 나 호버 효과에 추가하는 것을 피해야합니다. 이것들은 당신이 단순하게있을 때 훨씬 잘 작동합니다. 색상 변경 또는 밑줄 추가로 인해 사용자 환경이 크게 달라졌습니다..

스타일 목록 작성

어떤 시점에서 목록을 가지고 작업해야 할 가능성도 있습니다. HTML에 정렬 된 목록과 정렬되지 않은 목록이 모두 포함됩니다. 이러한 기능은 소량의 공간에서 아이디어, 제품, 사람 또는 온라인 링크를 제공하는 데 적합합니다. 스타일은 단락이나 표제와 완전히 다른 것은 아닙니다..

방문자는 항목 목록을보고 있음을 즉각적으로 이해해야합니다. 각 목록 항목을 별도로 유지하고 페이지의 새 줄에 위치하십시오. 가능하면 그들 사이에 여분의 공간을 추가하십시오. 이것은 약간의 호흡 여지를 줄 것이고 기사 텍스트를위한 좋은 해체로 나타날 것입니다. 글꼴이나 들여 쓰기를 굵게 표시하여 표준 레이아웃 여백에서 조금 벗어날 수도 있습니다..

귀하의 목록이 눈에 띄는 데 도움이되는 추가 기능을 추가하는 것은 필수 사항이 아닙니다. 그러나 블록 레이아웃 스타일을 즐기는 경우 목록에 중점을 둡니다. 밝은 배경이나 아이콘을 추가 할 수 있습니다. A List Apart는 길잡이 목록에 훌륭한 글을 올려 놓았습니다. 여기에는 매우 강력한 지식의 가재 도구가 포함되어 있다고 생각합니다. 그러나 페이지 내용을 선형으로 유지하고 필요할 때만 목록 블록을 사용한다면 어떤 디자인상의 문제도 없어야합니다.

인 페이지 인용을 만드는 방법

최근에는 견적과 인용문이 매우 제한적입니다. 초기 웹에서는이 요소들을별로 사용하지 않을 것입니다. 아마도 사설, 에세이 또는 교육 논문에있을 수 있습니다. 그러나 HTML5는 규칙을 조금 업데이트하여 인용구 인용이 훨씬 쉬워졌습니다..

HTML5 Doctor 웹 사이트에는이 정확한 주제에 대해 토론 할 수있는 흥미로운 자료가 포함되어 있습니다. 그들은 문서 구조의 내부에 나타나는 것으로서 인용 부호 안에있는 내용의 사용에 관해 논의합니다. 따라서 제목, 단락, 심지어는 목록과 바닥 글을 포함 할 수 있습니다. 의 주요 사용