Understanding Typography: Writing For the Web
In Web Design the subject of typography is important when considering all areas of user experience. Every website has a need for text, and there are guidelines you can follow to build exceptionally stunning layouts. Gridlines, lettering, font height, text spacing, color schemes, and other similar properties should all be taken into consideration.
In this article I’d like to delve into the realm of web typography. We’ll look into popular ideas behind the designing of credible webpage texts. Along the way I’ll introduce a few helpful CSS3 properties which designers often forget.
I have tried to put more focus on theory and ideologies for the Web. This gives a broader focus on digital text in general, and you, the web designer can then choose which styles to apply for which purpose. Context is always key and you have to determine this appropriately for each project you work on. Consider this guide a reference packet chock-full of modern web trends from typographic innovators all across the planet.
Measure your Paragraphs
You won’t need to bust out the yard stick for this kind of measurement. Actually the measure in relation to typography refers to the width (horizontally) of any given paragraph on your page. It’s not a topic always discussed, but it does influence the readability of your content. As a general rule of thumb you want to limit any single line around 75-85 characters in length (not necessarily including spaces).
Now, this may seem like a bit of a stretch for some wider layouts. Especially if your design is fluid and meant to adapt as the user re-sizes their browser window. You can always set a CSS max-width property on your main content div. Coding margins and font sizes in scalable units (percentages, ems) rather than pixels will allow for such flexibility within any layout.
There is no maximum unit of measure to be wary about. How you write content and form words into sentences is much more important than the width of each line. But keep in mind that longer sentences are much more difficult to read compared with shorter, concise statements.
Leading Explained
In designing, along with your paragraph measure, you should also consider the idea of leading. The word is pronounced “ledd-ing”, such as the lead used in pencils. This name originates from the older days of mechanical typesetting where strips of lead were placed in between lines of text.
Leading is still a very important concept in web design and goes hand-in-hand with paragraph measures. As your paragraph width increases you should apply an equal increase to the amount of leading, or space between lines of text. This extra space makes the reading a whole lot easier on your eyes.
If you were to skim through very tightly wound text you may find it difficult to focus on one single line. If this is the case, try increasing the amount of leading with the CSS line-height property. You always want more space in between lines of text than between words. Otherwise your text blocks may appear as newspaper print and won’t be very user-friendly to skim through.
A solid technique is to apply more space than originally needed and to reduce it if necessary. Not all text is created equal and you’ll surely need paragraphs with different internal formatting such as bold words, anchor links, underlines, etc. With some extra leading these changes won’t feel so out of balance compared with the other text.
Use Natural Font Sizes
There are still a handful of websites choosing to stick with smaller-than-average font sizes. 11px-12px can appear to be much more of the “standard professional” for business layouts. But these sizes don’t help the majority of visitors who are looking for specific information.
Generally web browsers default to 16px if you don’t apply any CSS rules. Even this may be considered a bit small if you have the extra room in your layout to accommodate for larger text. Bigger font sizes just look nicer and are much easier to skim for relative keywords. Serif fonts aren’t often chosen as paragraph material, but you can still get away with them. I suggest using much larger text sizes for serif-based fonts to improve readability and draw in attention.
Respond to the User’s Environment
As you try out different font families and sizes, your content area will have to adapt accordingly. The standard unit I stick with is ems as they can easily re-size based on the available space and screen resolution. This optimizes performance on the user’s end which is most important.
But when you have content so flexible it makes your layout prone to a buggy outcome. Content in your footer or sidebar area may end up skewed or off-balance in some browsers. Or you may have difficulty lining up images or other forms of media within your main text. There are some other alternatives to using ems if you need a fixed-style layout – but try both solutions to see which one you like best.
Remember that fixed widths and paragraph sizes will lock in a lot of the settings in your design. It’s great for content which include a lot of stationary aesthetic effects – think background images or lots of fitted sidebar widgets. It’s also a simple process to build a fluid content area in the left column with fixed sidebars to the right.
Style Based on Context
Some other really neat CSS tricks have been hidden from mainstream design. Specifically there are trends copied over from print work which can be applied in the proper context.
Many web designers have never even used the text-indent CSS property. You supply a value to indent the first line of any paragraph targeted by this rule. Units follow the standard text options such as pixels, points, ems, percentages… It’s certainly not a trend you’ll find in most blogs. But it provides a nice page rhythm while reading through large blocks of text.
There is another type of CSS selector known as a pseudo element. This can target a specific part of any content selector. The CSS3 :first-letter pseudo selector is perfect for creating fancy styles on important paragraphs. You can jazz up each paragraph’s opening letter – similar to a fairly tale storybook – using bold, italics, or even changing the typeface. Check out this beautiful example of drop caps which includes some extra CSS code you can utilize.
Playing with Letter Spacing
I’m sure many of us have heard the term tracking before yet never realized it’s the same idea as the CSS letter-spacing property. These two concepts are one in the same, related between print and digital typography. The unit relates to the space between letters within any single line of text. This is a really neat effect to apply on headers and even some smaller content blocks within your site.
It’s important not to confuse the terms letter-spacing with kerning. Both are related to typography and the distance between letters. However kerning specifically refers to the distance between 2 individual letters in a word. The letter spacing property will apply to an entire element of text, be it a word or paragraph or header or anchor link. Keep this in mind when you’re playing around with new ideas for styles.
I often use a few pixels/points of letter spacing in headers with all capitals. This breaks up the individual characters with some extra space and also appears as a very defined “heading” look. Negative letter spacing also works great in the right context. I generally stick to smaller units, maybe -0.03em or -0.1em at most.
Combining and Matching Typefaces
The design concepts behind web typography are certainly a form of art, not so much of science. There are guidelines you can follow, but there are no steadfast rules to which you are limited with. This means you have an enormous amount of freedom to experiment mixing and matching the different fonts you have access to.
By far the most popular combination of typefaces includes a serif/sans-serif split for the header and paragraph content. I like to switch up both, but more often I’ll use serif fonts in the header sections. The extra markings and strokes on each letter make them appear more flattering as the dominant page text.
Additionally sans-serif fonts are cleaner and easier to scrunch together in sentences. That isn’t to say serif fonts won’t work in paragraphs. In fact there are plenty of great examples! But a little-known concept named x-height is crucially important for distinguishing the complexity of a typeface. From looking at the baseline of a couple words you will pick up on how such fonts will “fit in” with each other.
It’s also worth noting the importance of space between these different elements. You will likely be using 2 or 3 different header styles, so each of these will come off with a difference appearance. I tend to keep my h2/h3 elements a bit closer to the following paragraph block, as this implies there is a correlation between the content.
This correlation is especially useful when you’re using two completely different typefaces right next to each other. I recommend no more than 3 different font families per set of content. After too many customizations your words appear jumbled together and the whole page comes out looking like a hodgepodge of misconstrued fonts.
Conclusion
It is my hope these concepts will shed some light on the complicated subject of digital typography. It can be difficult really getting into the work as a designer, especially if the whole topic is foreign to you. But do continue studying and be sure to practice a whole bunch!
Next week: Stay tuned as we’ll look into some helpful tools and resources for better web typography.
More..
Here’s more typography related posts:
0 nhận xét:
Đăng nhận xét