Enter your contact information.
Enter your project information.
Step 3Choose the PHP programmers you want to hire.
Compare Free PHP Quotes
Improve Your Website’s Typography With Kern.js
*Attention PHP Programmers* - Add A Free Listing! Get more clients.
Web typography used to be something of an oxymoron, but recent browser advances and tools like Typekit have helped bring web typography out of the dark ages with custom fonts. Thanks to JavaScript libraries like Lettering.js you can tweak those custom fonts — targeting specific words or letters — and adjust them to your liking.
Lettering.js even makes it possible to do custom kerning on the web. Kerning refers to the space between characters in proportional width fonts. CSS has long offered the letter-spacing property, but because it applies to an entire element — for example an h2 tag — what you’re really doing with letter-spacing is adjusting the tracking.
To actually control kerning you need to target each letter individually. Because Lettering.js can wrap each letter in your text with span tags, you can then target each span separately, adjusting the spacing of individual letters, or, kerning.
But, handy as Lettering.js is, tweaking the letter-spacing, hitting refresh, tweaking some more and so on is still a rather tedious way to improve your kerning. That’s why designer Brendan Stromberger created the Kern.js JavaScript bookmarklet. Used in conjunction with Lettering.js, Kern.js allows you to adjust kerning by simply selecting and dragging letters (or you can use the arrow keys). Kerning adjustments can be made in pixels or ems, so even you if you have a liquid layout there’s no reason you can’t get in on the kerning fun. Once you’ve got your kerning looking the way you’d like, just hit the “finish editing” button and Kern.js will spit out the necessary CSS to apply.
Kerning is admittedly a somewhat nerdy pursuit in a field that’s already pretty nerdy to begin with, but if you’ve developed an obsession with good looking typography, you know that there’s more to it than just dropping in some Typekit fonts. Thanks to Lettering.js and Kern.js, you can finally improve kerning on the web without the tedium of endless page refreshes.
See Also:
- Lettering.js Makes Complex Typography Easy
- Good Web Typography Is Easy With Type-a-File
- FontFonter: Test Web Fonts on Any Website
Tue, 17 May 2011 15:19:00 GMT
Tags: CSS, JavaScript, typography, Visual Design, Web Basics,
*Attention PHP Programmers* - Add A Free Listing! Get more clients.
CSS
The Future of CSS: Finally, Sane Layout Tools
Woolly, the CSS sheep. HTML5 and CSS 3 offer web designers new semantic tags, fancy animations, server-side fonts and much more, but that’s not the end of the story. The next major development in web design will likely revolve around one of the thi
Quickly Create CSS 3 Animations with ‘Ceaser’
CSS 3 has some awesome new animation capabilities for web developers — rotating objects, fading them in and out and more — but writing the code is a bit more complicated than most CSS rules. To make your animating job a bit easier, developer M
Simplify Your Stylesheets With CSSPrefixer
Woolly, the CSS sheep. CSS 3 has some awesome new features, like 3D transforms, smooth transitions, border images and gradients. Since most browsers already support these features there’s no reason you can’t use them today, provided you grac
JavaScript
JavaScript Fade Tutorial – Fading Elements In/Out
One of the most common JavaScript effects is fading elements and text in and out. Fortunately, it isn't very difficult to script and doesn't require a JavaScript framework.
JavaScript Slider – TinySlider 2
This full-featured and standalone JavaScript slider is easily configurable and visually customizable using CSS. It also clocks in at a tiny 3KB.
Simple AJAX Function with Example
TinyAjax is a simple AJAX function that makes it easy to call and process GET and POST transactions. Check out the example.
typography
Thinking with Type: Brush Up Your Typography Skills
The power and potential impact of typography on the web has grown by leaps and bounds with the advent of widespread browser support for @font-face and font hosting services like Adobe’s Typekit. Of course with new tools come new problems. Many web d
Responsive Design Tricks: Fluid Typography With CSS 3
Building a website that looks good on every screen is a tricky prospect. The key is to keep everything fluid -- type like water, Danielsan.
We at I-Soft Solutions provide other web services which include Customized Static Web Design, Dynamic Web Development in PHP Mysql, Web Hosting, Domain Name Registrations, Website Maintains Etc.
Navi Mumbai, Maharashtra IN
Specializes in all aspects of Software Engineering such as Web Design/Developments, Software Developments, Database Administrations, Graphics Designs and so on
Lagos, Lagos NG
Easy Low-Cost Web Site Solutions. ANY web site, quick and fast! Turn your dream into reality today! I''M THE HOUSE M.D. OF WEB DESIGN AND DEVELOPMENT.
Rancho Cucamonga, California US
Professional website development and design, e-commerce solutions, specializing in the LAMP stack.
San Fernando Valley, California US
Firefox 4 Inches Toward Final Release with New Beta 12
It’s been a long time coming, but Firefox 4 has finally reached the end of its beta testing ph
Google’s New Privacy Policy: What Has Changed and What You Can Do About It
Today's the day Google's new privacy policy takes effect. It's too late to pull out your data now, b
Where 2.0: Bing Maps Partners With FourSquare, Fwix Builds Open Places Database
Map nerds unite, this year’s Where 2.0 conference is in full swing and there are already sever
Microsoft Touts Plugin-Free Web, Offers Desktop Fallback for Flash
Microsoft's tablet-friendly Metro environment has banned Flash, but the company is offering a last d
HTML5 Will Be Done in 2014, What Comes Next?
Web developers were given a green light Monday to start using HTML5. Even though many are already us
Article Tags
PHP Programmers Articles
Live Help Chat Software
Web Design Quote
Web Design