Beautiful Typography in Web Design
Posted 27 July 2012 - 05:18 AM
Beautiful Typography in Web Design | SpyreStudios
Posted 28 July 2012 - 12:42 AM
I have a quote about the past typografi from BrianCray (a front-end engineer in San Francisco). and it's always I use in web designing.
One of the most underâ€“rated elements of beautiful Web design is the subtle art of typography. Part of this, I know, is a lack of a solid font support for Web sites. But never fear! Today I'll show you some quick things you can do to appear to be a type master.
1. Stop using straight quotation marks
Straight (AKA ambidextrous) quotes look like this: "Oh happy day this looks as clean as cubicles!" Now compare that with this: â€œLook how these quotation marks are not just stylish but guide your eyes into and out of the quotation.â€
Straight quotation marks were made to reduce the number of keys on keyboards by being ambidextrous (they could go on either side of a quotation). In short, the engineers took over and style was lost. A typical scenario.
But alas, you can rid yourself of MS-DOS dullsville.
Here's what you do: On the left side of a quotation, type “, and on the right side type ”. Once it renders in a webpage, it looks like this: â€œMy socks typically have holes.â€
2. Stop using straight apostrophes
This is similar to the above tip. I've told you. You know. It's ugly and unwarranted from a person of your stature. Instead of taking the easy way out and using the apostrophe on your keyboard, use ’ to create a styled apostophe that looks like: â€™
3. Use a dash instead of two hyphens
Two consecutive hyphens (--) are sloppy and actually interrupt the natural flow of your message. The readerâ€”if only for a secondâ€”gets stuck in between those two hyphens trying to make sense of them being backâ€“toâ€“back.
To combat this assault on your reader's cognition, try using an En Dash or an Em Dashâ€”like nature intended.
An En Dash (a dash the length of a capital N: â€“) is used for:
Ranges of values (Pick a number 1â€“10)
Relationships and connections (OSU beat Michigan, 27â€“3)
Compound adjectives (Styled quotations are postâ€“MS-DOS)
Make an En Dash with this in your HTML: –
An Em Dash (a dash the length of a capital M: â€”) is used to indicate a temporary shift in thought, whether in the middle or end of a sentence. Make an Em Dash with this in your HTML: —
4. Tweak letter, word, and line spacing in your headlines
As a Web developer, you have the option to tweak the letter-spacing, word-spacing, and line-height in your CSS. But you probably don't.
By default there's too much white space between characters, words, and lines if your font-size is greater than 16 for a short headline. As font-sizes get bigger the letters and words seem separate, fragmented. They are lonesome. Unify your text with thinner letter and word spacing and shorter line heights. The general rule-of-thumb I follow is to provide just enough space to allow the reader to read the headline. Doing this also adds weight to your headline for nice contrast over body copy.
Try tweaking your letter-spacing, word-spacing, and line-height. You'll be amazed at the impact.
5. Use the EM unit to size your text
When sizing your text in CSS with the font-size property, do you use 16px, 12pt, 1em? or %? Did your head just spin? Sizing text on the Web is not a simple thing. On the Web you have the opportunity to adjust to eyesight and reading preferences.
First off, if you use points (PT), you are probably coming from a print background. Stop using them right on the Web right now. If you use pixels (PX) you're using a relevant measurement, but pixels are a static measurement and thus your readers can't adjust the text size to their preferences.
EMs on the other hand are a relative measurement, and a Web site set with EMs adjusts as the user "zooms" in and out. To learn more about sizing text with EMs, visit PXtoEM.com. Make the switch today!
6. Add extra space between lines
You're driving your users bonkers with your short line heights. More space between your lines will make your body copy less overwhelming and more digestible. As a rule of thumb, I set line heights to 150% the size of my text. Use the line-height property in CSS. Example: line-height: 1.5em
7. On the Web: serif font for headlines and sansâ€“serif for body copy
Now I realize I don't follow this one, but all rules are meant to be broken if you have the knowledge to break them. That's what art is about. For everyone else, this provides a good framework.
Serifs are the little accents on letters seen in a font face like Times New Roman. Serifs are there primarily to guide your eye across the letter and through the words (to grandma's house we go). Secondarily, serifs look sophisticated, elegant, or stylish. Sansâ€“serif fonts like Helveticaâ€”or its pour Arial knock-offâ€”don't have these accents. Sanâ€“serif fonts appear more modern or clean.
So why use serifs in the headlines and sans-serifs in the body copy?
Due to the low resolution of computer monitors relative to printed paper, serifs don't appear in enough detail in lower font sizesâ€”below 16 pixels. But the fonts in headlines sized over 16 pixels are big enough to show off their serifs in a little detailâ€”and in more detail as the font size increases. In smaller body copy, setting text in sansâ€“serif will be easier to read without low&ndashdetail serifs. By the way, take your serif headline a step further: bold it and the serifs will appear even more distinguished.
8. Use a proper ellipsis instead of three periods
Do you ever end a sentence with three periods (...) to indicate an interruption of some kind? Due to the width of the full period character, three periods (...) are too far apart to immediately appear to be an interruption. The correct symbol to use is an ellipsis. To add an ellipsis to your HTML copy use …, which appears like this: â€¦
Posted 30 July 2012 - 10:37 AM
Very useful informations. thnx
Posted 06 August 2012 - 10:12 AM
your tips are wonderful and amazing!!!
Posted 09 August 2012 - 07:09 AM
Thanks for your information.
Posted 17 August 2012 - 01:42 AM
Posted 17 August 2012 - 12:00 PM
thanx for your help!!
Posted 18 August 2012 - 09:54 AM
Flow webdesign voor al uw betaalbare linkbuilding
Posted 18 August 2012 - 08:39 PM
Typography is an essential part of the modern web designing company. the flavour of the Typography can make the site exceptional.
Flow webdesign voor al uw betaalbare linkbuilding
exactly which you convey,
I refer to the link there, what is your website?
It seems like not enough good art typografi applied there.
Sorry, but as a service provider you have to appear better.
Posted 18 August 2012 - 08:46 PM
Today I wanted to share a site I like typo and style being applied there.
It's nice and perfect...,
Posted 23 August 2012 - 01:18 AM
'hellokarb.com' nice work, thanks for sharing
Posted 23 August 2012 - 01:56 AM
Posted 25 September 2012 - 12:47 AM
Posted 25 September 2012 - 01:44 PM
Posted 05 November 2012 - 11:15 AM
Posted 04 December 2012 - 07:05 AM
Posted 25 December 2012 - 01:30 AM
Thank you for sharing the link as well as the detailed information
Posted 02 January 2013 - 11:04 AM
About resolution ? I have reading the guidelines, and it says to me to save the end project in PSD .. its all ok with it ? have i understant it right ?
So to make it clear:
- I'm going to start now, whats the dimension of the project ?
- Any hint/trick that helps ?
- The end of the project ?
Posted 23 January 2013 - 11:36 PM
Posted 04 February 2013 - 04:38 AM
Thanks for the link.
Also tagged with one or more of these keywords: fireworks cs5, vs illustrator cs5
Adobe Fireworks →
Fireworks CS5 Vs Illustrator CS5
Started by DesGuru, 10 Jun 2013 fireworks cs5, vs illustrator cs5
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users