Web Design News | Responsive Design Tricks: Fluid Typography With CSS 3

Step 1

Enter your contact information.

Step 2

Enter your project information.

Step 3

Choose the PHP programmers you want to hire.

Compare Free PHP Quotes

Responsive Design Tricks: Fluid Typography With CSS 3

Attention PHP Programmers - Add A Free Listing! Get more clients.

Photo: Ariel Zambelich/Wired.com

Building responsive websites means that your design has to adapt to different screen sizes. That there is no such thing as “pixel perfect” has long been a maxim of good web design, but nowhere is this more true than when you start working with percentage widths, em-based type and other flexible techniques of responsive design. While fluid grids, adaptive images and other tools help, sometimes even basic things like the flow of type can look wrong without a little extra help.

One common problem when designing for multiple devices is handling the changes that happen when the user rotates the screen. It’s frustrating to see your elegant portrait-oriented designs fall apart as the device moves to landscape mode (or vice versa). Frequently the problem is that images, videos and other embedded content in your page is sized in relation to the pixel width of the viewport, but the type is not. That means that the type fails to adapt to layout changes, leaving ugly gaps, whitespace or hard-to-read, overly long lines.

There are a number of ways to solve this problem, but one of the simplest and easiest is to use fluid typography in addition to your fluid grid. BBC developer Mark Hurrell wrote up an excellent tutorial some time ago that shows how, by specifying font sizes in rems, you can “adjust every font-size on the page by using media-queries to change the font-size set on the BODY or HTML element according to viewport width.”

To find the right size type for various screen widths, Hurrell calculates a resolution-independent font scale based on target widths. That is then applied using a series of media queries and the new CSS 3 unit rem. The rem unit means ems relative to the root (the HTML) element. That means your type gets proportionally larger overall, rather than in relation to its parent element as would happen with a simple em. As Hurrell notes, support is pretty much universal on tablets and phones (browsers that don’t support it will fall back to px sizing, so all is not lost).

In the end what you get using rems and media queries is fluid typography that scales just like a fluid grid. That means that when the device rotates the type resizes to fit the new screen dimensions. For more details on how to make it work on your site be sure to check out the Responsive News blog post, which also has a few links to websites already using this trick.

Source http://www.webmonkey.com/?p=54239
Wed, 08 Feb 2012 19:07:04 GMT
Tags: CSS, CSS 3, typography, Visual Design, Web Standards,

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

CSS 3

Microsoft, Mozilla Battle Over What Makes a ‘Modern’ Web Browser

Microsoft and Mozilla are trading barbs over the coming Internet Explorer 9. Microsoft has been touting its HTML5 support in IE9, claiming that it renders HTML5 better than Firefox (and Chrome, Safari and Opera). Mozilla then turned around and released an

typography

Improve Your Website’s Typography With Kern.js

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 fon

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

Members:

Mesa

Hamilton Arts

Let Hamilton Arts assist you with your web design needs. We can assure you that our design will not only impress but also work within your budget.

Mesa, Arizona US

Rancho Cucamonga

IOFX Media

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

Daphne

Wild Goose Art

Web Design, Implementation, and Maintenance. PHP, Javascript, JQuery, MySql

Daphne, Alabama US

Lahore

id4brands

I am Graphics Designer, I have Experience in this Field more than 10 years. i mostly work in print field. Products Catalog, e-catalog, brochures, flyers, brands names. logos. business cards.

Lahore, Punjab PK

Nashville