Ads Top

Four Simple Tips To Improve Your Site�s Typography

I�m a writer, so naturally I think that all web design ought to start with my text; the rest of the page should be be built to complement what I have written. That way of thinking puts typography front and center. I�m not the only one who thinks so, but it�s an opinion that doesn�t hold much sway among web designers; it has even less traction with businesses and bloggers. And so typography doesn�t get the attention it deserves.
Typography matters because it is what makes a site pleasant to read. You might think you have written the most informative, moving, or hilarious article that ever saw the light of day, but if the typography is so bad that people go cross-eyed when they look at it, your brilliance is going to be wasted.

Typography is a complex art-science, but a few simple tweaks to a web page�s typography can make a huge difference to readability. I�m going to give you four tips and then point you in the direction of the web�s best typographic resource.

Stick To A Couple Of Typefaces

If you�re an experienced designer, you can do crazy things with font combinations and it�ll look great (probably). If you�re not a designer, don�t risk it. Stick with a couple of typefaces: preferably one for headings and one for body text. Using a serif for one and a sans serif for the other is a common choice � it�s not important if you use the serif for headings and the sans for body text or vice versa, both can work. Don�t try to be too smart with font combinations � two well suited fonts look great together; three poorly chosen fonts will ruin a page.

4 Desktop Blogging Applications For Writers 

Consider Appropriate Sizes

Font sizes appropriate for print are too small for the screen. If you want people to read your content, for the love of Garamond, don�t make the text so tiny they have to zoom in or put their noses against the screen to see it.
Take a look at the text sizes on Medium for a approximation of how large your text should be, although be aware that the ideal size differs depending on the typeface, screen size, and screen resolution.

Line Spacing And Line Length

It�s not just the size of the text that matters, it�s the distance between the lines of text. Cramming the lines close together makes them difficult to read. Line spacing is controlled by the line-height CSS property, which should be set to a minimum of 1.2 times the height of the typeface and probably somewhat higher, but not much higher than 1.5 or the lines will look disassociated. Line length � the distance between the first and last characters of a line of text on the screen � should be somewhere between 50 and 90 characters. It should not stretch too far across the page and certainly not from one edge of the screen to another. Shorter lines are easier to read.

Only Underline Links

This one isn�t such a big deal, but it�s a personal irritation of mine so I�m going to include it. Underlining is not a useful habit except for links. Links should be the only text that is underlined. Underlining should not be used for emphasis � that�s what bold and italics are for. It shouldn�t be used for headings, where bolding, centering, altering type size, and altering typeface are all better options.
These four tips will do wonders for your site�s readability: use conservative font combinations, increase the type size, optimize line height and length, and remove underlining. But, there�s a lot more to typography than that, most of which you�ll find in Matthew Butterick�s excellent Butterick�s Practical Typography.

How To Change Blog Links color and font style

About Graeme Caldwell -- Graeme works as an inbound marketer for Nexcess, a leading provider of Magento and WordPress hosting. Follow Nexcess on Twitter at @nexcess, Like them on Facebook and check out their tech/hosting blog,


adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.