[Front-end] 15)웹페이지 텍스트 디자인 꿀팁

Codecademy front-end engineer course

DAY15

• Learn Text Design

---

- Differentiating Text : HTML Headers  [헤더를 적절히 이용하자.]

<h1> — Used for titles.	You should only have one header this style per page.
<h2> — Used for headings.	This should be to identify major sections you want the user to immediately be drawn towards.
<h3> — Used for subheadings.	This should be used for smaller focal points, such as articles, that you want the user to notice when scanning the page.

->These tags will create a visual hierarchy that is very clear and familiar to your user

(p태그만 주구장창 쓰는 일이 없어질 것.)

 

 

 

-Differentiating Text: Fonts [폰트를 바꿔보자.]

A good rule is that if you find yourself using more than three different fonts on one page, maybe it’s time to try fewer fonts but other sources of visual contrast with text.

[최대 3개의 폰트만 활용할 것]

 

 

 

- Whitespace [공백을 적절히 활용하자.]

: Without proper spacing and balance, your text can be rendered virtually illegible.

A website is like a room, the user needs to be able to move through it easily.

And just like a room, it is important to keep it tidy and free of clutter. This is the power of whitespace.

 

 

 

-Text Readability [글 가독성을 위해서는]

• Make sure that your text is big enough (over 16px).
• Have a strong contrast between the foreground and the background.
• Make sure there is enough space between lines and letters (remember, whitespace is king!)

Line Spacing [줄간격]	as Leading, refers to the distance between two lines of text.
Tracking [단어 간격]	Tracking is the space between the letters and the words. If you have too little tracking, the words will appear cramped, so by increasing tracking slightly, you make your text significantly more legible.
Kerning [글자 간격]	the space between two letters in the text.

 

 

- Text Navigability  [글을 어떻게 담아야할까?]

• Stick to conventions about showing what is clickable (generally, links should be blue and underlined). Underlining links is less common now than a few years ago. It’s optional, but a nice courtesy to colorblind users.
• Never use blue as a general accent color for text, because your users will probably try to click on it no matter what.
• Having text on navigation buttons is important. It removes all uncertainty about what each button does.

-> Also, it is important to think about the ways the user’s eyes will travel across your text. This will impact the way they navigate the page.

[예시, 페이지가 2개의 column의 형태를 띈다면 사용자는 전체적으로 훑기보다 따로따로 자세히 훑는다.]

 

 

 

-Text Length, Columns, and Line Length  [글 길이, 문단, 줄길이]

*Hitting a happy medium is key to having engaging text content. The best bet is to aim to have columns that contain roughly 50-75 characters per line.

*You can break up the site into columns, which can be effective for something like a news site, or you can reduce the lengths of your lines and then align the shorter text properly so it doesn’t impair the design of the site.

 

 

-What Content will the Users Notice and Remember? [사용자가 기억하는 콘텐츠는]

->Where do you want the user’s eyes to immediately focus when they open the page?

Primacy and Recency [서열 위치 효과]	People will notice and remember the first and last elements of a list or a page better than anything in the middle of the list/page.
Image Pairing	Users eyes are easily drawn to images quicker than they are to text. This pairing can be accomplished by grouping with card designs (putting them in a div together with a shared background color). This is a great way of adding visual appeal to your text.

* It is important to create a balance between the image and the text.

 

 

 

-F-Shaped Skimming ['F자 형태의 훑어보기' 를 고려하며 디자인하자.]

When people are figuring out where to go on your site, they are just skimming to find what they want (even if what they want is a news article or a short story).

You need to write and format your text with this skimmer in mind.

Users will scan content on the left of the screen before the right of the screen, and the top of the screen before the bottom of the screen. [사용자는 왼->오 위->아래 순으로 읽는다!]

This creates an F pattern that the users eye follows, and is thus known as _f-shaped skimming _.

[정렬은 되도록이면 왼쪽 정렬.]

 

 

 

구글 폰트 tip 사이트.

www.reliablepsd.com/ultimate-google-font-pairings/