Beautiful Typography in Web Design

Typography is a very important part of web design. By using different types of typography like big headlines and bold fonts web designers are improving the look and feel of websites.

Beautiful Typography in Web Design | SpyreStudios

exactly, Typography is part of webdesign
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: …

Great Posspoint,
Very useful informations. thnx

Hi Posspoint,
your tips are wonderful and amazing!!!

Hello,

Thanks for your information.

Regards.

Thanks for your information.

Hi Posspoint

thanx for your help!!

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

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.

Hi Guys,
Today I wanted to share a site I like typo and style being applied there.

hellokarb

It's nice and perfect...,

Hi Passpoint,

'hellokarb.com' nice work, thanks for sharing

@shaheer~ some really nice typography and creative website layout in the link you provided. I especially like visualrepublic, threepennyeditor and rxbalance.

thanks for sharing these useful info

Muito obrigado tenho aprendido muito com vcs!! assim que eu ganhar mais experiencia vou compartilhar o que tenho aprendido!!

Typography looks really good in websites and website designers prefer using it. As it looks much neatly done. Those are really cool collection of typography's, thanks for sharing it.

Thanks for sharing usefull informations..

Hi,

Thank you for sharing the link as well as the detailed information

Hi there, i'm going to make my first webdesign contest... do you have any tips ?

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 ?

Best regards

Very helpful info indeed. Thanks

Love a website with nice, clean typography. Really makes or breaks it.

Thanks for the link.