Tag Archive for: CSS

cssCSS has so many measurement units that it can be difficult to keep everything straight. Each measurement system has its own benefits, and it is easy to find yourself wondering which one is correct. Many designers just decide to use a single unit for everything, but you are limiting yourself by not putting some thought into the units you decide to use in CSS. Thankfully, demosthenes.info put together a great list of guidelines to help you pick the best measurement unit for the task.

Pixels (px)

Pixels are best used for hairline borders and general elements when creating fixed-width designs. It is also a good choice for CSS shadow displacement. But, when using pixels as your unit you need to avoid @media breakpoints, because they break pages when zooming – use rem or em instead.
Don’t use for: typography, except when setting a base font-size in a CSS reset.

Percentage (%)

This is great for making responsive images and containers, as well as setting height on the body in certain situations.
Don’t use for: typography, except in a font-size CSS reset.

em, ex

Use em or ex or typography and elements related to it, such as margins. However, as the guidelines point out, em and ex have subtle “gotchas” when used in complex layout. In this case, rem should be substituted.

Points and picas

These are only good for print stylesheets. Seriously, don’t use them for anything else.


This is a more capable and predictable replacement for em and ex, that is best used for the same purposes, as well as @media query breakpoints.

Viewport units (vh & vw)

These are best for responsive typography and so-called “perfect” responsive containers.

Character (ch)

Use this for sizing and adjusting monospaced fonts, though browsers do have some issues with this unit.

Not too long ago, web designers were restricted to a set of universal type faces that were installed on nearly every computer. If they wished to use more extravagant typographical designs, they pretty much always had to create images with them instead of directly placing the text on the page.

With the @font-face CSS rule, designers can input their own fonts on websites, not relying on the visitor to have the font already installed. In a design community where there are literally hundreds of thousands of free fonts available, having the freedom to use any font you desire is like taking blinders off of a horse.

Keep in mind the rules of design however. More than three fonts on one page is going to look excessively busy, and will likely slow down the loading times of your site. Designmodo helps walk designers through adding the @font-face CSS rule, and they urge everyone to use universal fall back fonts, which is smart advice. Not every browser supports @font-face, and you don’t want to ruin accessability for any group of users.



jQuery is the biggest open-source, CSS3 compliant, cross-browser, JavaScript library available. What makes jQuery stand out is its simplicity and ability create Flash-like animations that are viewable on iOS, which doesn’t work with Flash. The popularity of jQuery is growing quickly, so we think it’s important you know the pros and cons of using it.


The biggest upside to jQuery is its simplicity. It takes only a little bit of programming knowledge to create crowd pleasing animations. It is also incredibly flexible because jQuery allows users to add plug-ins. If you don’t know how to do it in CSS, jQuery can help you.

It is also a very fast solution to your problems. While there may be “better” solutions, jQuery and its development team work to make sure you can implement jQuery quickly and effectively, which saves money. Those in the open Source software community support jQuery because it has great technical support, interacts well with other types of code, supports plug-ins and makes basic animation as easy as can be.

Open source software means quick growth and the freedom of developers to provide the best service possible without corporate red tape.


Open source software does have some problems however. There is no set standard amongst providers, which means if you or the developer do not have the money, time or ability to fix issues, you may never find a solution if you have a problem. Also, frequent updates mean community members are also unlikely to provide solutions.
There are also many versions of jQuery available right now and some are less compatible than others.
Also, jQuery’s lightweight interface may lead to problems in the future. Not being able to actually code can lead to many problems in implementation. Not knowing how to program means not knowing how to fix issues that arrive with jQuery and it doesn’t pick up the slack for you. While jQuery is seemingly easy and impressive, making it actually work can be much more troublesome. To make jQuery work, you have to keep up with community developments and realistically understand your skill level.


jQuery is  slower than CSS in many cases. Its simplicity is its curse, as it is not meant for client-side interactions. If you misuse jQuery, you get code that multiplies and multiplies until it is unmanageable, which means a few simple lines of code can quickly make maintaining your site a nightmare. The community is working to fix this issue but for now it is a very real problem.


While jQuery is easy, know if you can handle it before trying. It is meant to simplify tasks for skilled programmers and not to be used as a crutch for beginners. While the less experienced may be able to make jQuery work for them, they will most likely need a lot of assistance.


For more information on jQuery, look at Richard Larson’s article for webdesignerdepot.com.