background preloader

Font sizing with rem

Font sizing with rem
Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It's just a matter of which less-desirable is most desirable. There are two main techniques that are extolled: Size with pxSize with em Let's review these two approaches before I reveal the magical third. Sizing with px In the early days of the web, we used pixels to size our text. I, personally, have been of the camp that px-based layouts provide the consistency I prefer and users have enough tools available to adjust their view that accessibility is less of a concern. Sizing with em That whole inability to resize text in IE has been a continuing frustration. The technique modifies the base font-size on the body using a percentage. The problem with em-based font sizing is that the font size compounds. Sizing with rem But what pitiful browser support do we have to worry about?

http://snook.ca/archives/html_and_css/font-size-with-rem

Related:  Web DevelopmentmobileWebDev ResourcesCSS

holmes.css - CSS Markup Detective What does it do? The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as: Missing required attributes on tags, such as name attributes on inputs (lots of these) Potentially improvable markup, such as links with href="#" Deprecated and Non-W3C Elements - see W3C.org's article on obselete tags Non-W3C Attributes - as above, just the most important ones since there are MANY

generatedata.com This data type randomly generates human names (mostly Western) according to the format you specify. You can specify multiple formats by separating them with the pipe (|) character. The following strings will be converted to their random name equivalent: This data type randomly generates names. It works in the same way as the Names data type, except that it creates slightly more realistic data sets since the names are mapped to the country; e.g. Italian names appear when the data set row has Italy for the country field.

HTML Standard 4 The elements of HTML 4.1 The root element 4.1.1 The html How to Add Variables to Your CSS Files Let's try something different on nettuts+ today. Any designer who has worked with large CSS files will agree that its major weakness is its inability to use variables. In this article, we will learn how to implement variables by using PHP and Apache's URL rewrite mod. Preface This technique is somewhat simple. We will ask Apache to redirect any stylesheet to a specific PHP script. The internet is our social network. What if social networks were more like email? What if they were all inter-connected, and you could choose which software (and even which provider) to use based purely on what they offered you? Now they are! Friendica is bringing them all together.

Using Grunt to automatically build your PhoneGap/Cordova projects Earlier this week I blogged about the relaunch of Ripple, a great tool for building your mobile applications with Chrome. One of the issues with the new version of Ripple is that when you edit your code, you have to run "cordova prepare" to copy the assets into your platform before you can view it in the browser. You can get around this by just directly editing the code in your platform directory, but by doing so you run the risk of accidentally blowing it away the next time you do a build with Cordova. So the only safe method is to edit in your main www folder and run "cordova prepare" after every single save, which kinda sucks, even if you just use !!

The @Font-Face Rule And Useful Web Font Tricks Advertisement The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to know in this article. This quick introduction to @font-face will lead you towards a guide through the @font-face kit generator. If you want to make Web use of your already licensed desktop fonts, read up on how to embed them from your own server.

47 Amazing CSS3 Animation Demos Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). How to Build a Kick-Butt CSS3 Mega Drop-Down Menu Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we'll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features. Step 1: Building the Navigation Bar Let's begin with a basic menu, built with an unordered list and some basic CSS styling. Creating the Menu Container We'll now apply some basic CSS styling.

CSS Selectors and Pseudo Selectors and browser support This page has not been updated for some time and some of the browser versions are obsolete - I'm working on a better format for the page, so check back every now and then :) The following is a range of CSS tests of the most common browsers' support for selectors and pseudo selectors. The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future (CSS3). If you feel like reading more about the selectors and which attributes they support, the W3C is the place to go! If you spot any errors (it happens to us all...) or have any comments, I'm on Twitter as @overflowhidden. Two-Minute Tutorial 5 Part 1 This advanced Two-Minute Tutorial (TMT5) shows how to use the Twitter REST API in your AppLaud app. Using the PhoneGap ChildBrowser for Android plugin and jsOAuth JavaScript library, non-PIN OAuth 1.0a authentication is demonstrated. After authentication, the app has access to the Twitter REST API.

HTML Templates News or Magazine This template puts a focus on bold images, perfect for a magazine style site with eye catching content. Your stories are easy to find with large feature blocks. See Demo Real Estate or Travel Big thumbnails with a space for captions and descriptions along with an informative header make this the perfect template for real estate or hotel booking. How to Use the Sticky Footer HTML & CSS Code Be sure to read the Known Issues at the bottom of this page. It will help prevent a lot of mistakes that can take hours to debug. Introduction There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases.

Rem - CSS3's alturnative to the em. An overview of this new method of controling front sizes. by hfernety Mar 14

Related: