CSS Font Order

February 26th, 2010

When designing web pages, using the appropriate font for your design does wonder to the overall look, feel and layout of your page. Unfortunately, web designers are quite limited to the fonts they can use. Most web designers stick to the tried and true “web safe” fonts.

If you take all considerations including operating systems: Windows, Mac OS X, Linux, Unix, and browsers: IE, Firefox, Safari, Opera, etc, then you are really stuck with just 3 of the safest fonts on the web. They are: Arial/Helvetica, Times New Roman/Times, and Courier New/Courier.

Other fonts that work across platforms are: Palatino, Garamond, Bookman, and Avant Garde.

Fonts that work in Windows and Mac OS, but not in Unix+X are: Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black, and Impact.

If you like to consider all OS platforms in your design, then the order of your fonts in CSS is important. I recommend this sequence.

Establish a Baseline

At the very least, you need to establish your baseline font. Choose whether you want “Serif or Sans-Serif” font. The CSS would look something similar to this:

html { font-family: Serif}
html { font-family: Sans-Serif }

Choose a Web Safe Font

Next, choose a “web safe” font. Your choice comes down to either taking Arial/Helvetica, Times New Roman/Times, and Courier New/Courier. Most people don’t use the monotype Courier font except when displaying code. So, you are essentially down to four fonts, Arial/Helvetica or Times New Roman/Times. Helvetica is very popular. Arial is not far behind. New Times Roman is better than Times. In our example, will now look like this:

html { font-family: Times New Roman, Serif }
html { font-family: Arial, Sans-Serif }

Choose a Cross-Platform Font

If you must, you can choose a “cross platform font.” Again, our choices are: Palatino Linotype, Garamond, Bookman, and Avant Garde. The first 3 are Serif fonts. Avant Garde is the only Sans-Serif font.

html { font-family: Palatino Linotype, Times New Roman, Serif }
html { font-family: Avant Garde, Arial, Sans-Serif }

Add Other Fonts

If you must, you can choose other fonts, although they do not work in Unix+ systems. They are: Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black and Impact.

html { font-family: Georgia, Palatino, Times New Roman, Serif }
html { font-family: Verdana, Avant Garde, Arial, Sans-Serif }

There you have it. A safe way to implement CSS Fonts across all OS platforms.

Post to Twitter Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to MySpace Post to Ping.fm Post to Reddit Post to StumbleUpon

Tags: , , , , ,
Categories: CSS, General, HTML, Internet, Linux

New Theme Called Theme

February 9th, 2010

I haven’t changed themes in more than two years, which is very hard to believe. Several years ago, I change themes at least once a month. It’s just shows you how happy I was with the old theme to stick with it for more than two years.

I think it’s time for something new. This is just a simple theme that I quickly designed to spice things up a bit. I’m not sure what to call the theme at the moment, although it’s temporarily called “Theme” for lack of a better name.

It’s a one-column theme, with a dark blue background. I’m using a bunch of links to simulate a header. It’s kind of neat the way it turned out. I’m not sure yet how long I will stick with this one, but I love the simplicity and the speed.

Maybe, I will release it as an open-source theme.

Post to Twitter Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to MySpace Post to Ping.fm Post to Reddit Post to StumbleUpon

Tags: , ,
Categories: CSS, General, HTML, Internet, Programming, WordPress

Start Your Own URL Shortener

December 31st, 2009

Are you thinking about running your own URL shortener? If you own a blog or a website, you should consider. There are many valid reasons why you should own your own url shortener.

#1 Branding

Having your own url shortener promotes your website and your blog. Your visitors will see your unique link. When you tweet or share a link with someone, the link you share is yours. It’s unique. It carries your own brand. The short url from bit.ly, tinyurl.com, is.gd, tr.im, cli.gs or from any other 3rd party service works great, but it’s not yours. My personal url shortener is uly.me. Every article on my blog has a short url. Check out the short url at the end of this article. You will see a Tweet This button below.

#2 Independence

There are over 100 url shortener services on the internet. Most of these 3rd party url shortener services are free. There is, however, no guarantee that they will keep their services up and running for eternity. You, however, have control of your own website and your own links. You can control how url shortener behaves. You’ll have the option to determine which hashing methods to use, from base36 to base64, from sequential to random. You call your own shots.

#3 Statistics

Another reason for having your own url shortener is you want to keep track of your statistics. Not every url shortener service has statistics. Every time you’ve send an email with a link, you want to know if your recipient has clicked on your link. If you sent a tweet, you would like to know how many people have clicked on your links. Statistics informs you of the effectiveness of your tweets.

#4 Security

Some people don’t trust short urls since they are essentially cloaked links. There is no telling where a cloaked link will take you. Cloaked links can lead someone to an untrusted or a phishing site. You could easily acquire a virus, malware, adware or spam when you land on an untrusted site. If you run your own website or blog and you use your own short urls, you establish trust with your own readers. On top of that, you are promoting your own brand.

How do I make one?

Ok. convinced. How do I get started? How do I make one? The good news is you can get it here. My url shortener script is available for $99. It’s loaded with features. See below:

Try the Demohttp://uly.me

Features

  • Requires PHP, MySQL, .htaccess
  • Works with any domain
  • 1 configuration file.
  • 1 second install
  • Base36 encoding
  • Can be modified to use Base64
  • Sequential links from 10000 to zzzzz
  • Hashing can be set to random.
  • Supports up to 2 billion links
  • Statistics: display number of clicks
  • Statistics: display last 10 links
  • Search for partial keywords
  • API: simple integration with 3rd party software
  • API format: create.php?url=http://longurl…..
  • URL format of http://short.url/1z35sf
  • Seamless integration with WordPress and Twitter
  • WordPress: works great with Tweet This plugin
  • Creates short url link when publishing a WordPress article
  • Price includes installation, support and updates

Try the Demohttp://uly.me

Purchase for $99

Post to Twitter Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to MySpace Post to Ping.fm Post to Reddit Post to StumbleUpon

Tags: , , , , , ,
Categories: CSS, General, HTML, Internet, PHP, Programming

WordPress Plugin: Drop Caps

December 20th, 2009

Here’s another WordPress Plugin called Drop Caps. A Dropcap is when the first letter of a paragraph is enlarged to “drop” down two or more lines. It’s a very common typeset used in magazines and now a few blogs. I’m releasing this plugin similar in look to the Dropcaps article I wrote two years ago. Check out the first letter of this very paragraph. Download the plugin and place it the plugins folder of your WordPress install. Activate and that’s it. Enjoy.

Download - downloaded 34 times. Version 0.1. Filesize 982 bytes.

Post to Twitter Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to MySpace Post to Ping.fm Post to Reddit Post to StumbleUpon

Tags: , , ,
Categories: CSS, General, HTML, WordPress

Display None In CSS

November 11th, 2008

One of the coolest tricks in CSS is to suppress the display of certain elements in your web page using the “display:none” property. This trick is extremely helpful for two reasons. One, there are times you don’t want to remove code essential for Search Engine Optimization such as the H1 header for example, but you don’t want it showing up on your browser.

Deleting the HTML code will completely eliminate it from a seach engine perhaps losing valuable points. Suppressing the display may be your best option since search engines are still able to read your H1 header. It’s just not displayed on the screen. To suppress the display of H1 in this example, we need to add this CSS code to our stylesheet.

h1 {display:none;}

The second use for “display:none” in CSS is for printing purposes. Often times, many web designers will make a separate stylesheet just for printing. Items such as graphics, menus, certain divs that are not necessary can be suppressed making for a very simplified print output. You can do something similar to your web page using the code below.

img, #menu, #widget {display:none;}

Display:none. Give it a try.

Post to Twitter Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to MySpace Post to Ping.fm Post to Reddit Post to StumbleUpon

Tags: , , ,
Categories: CSS, HTML, Programming