Posts Tagged ‘Font’
sIFR is a javascript alternative specially for Designers & Developers. It gives them the freedom to choose the font they like for their audience. It accomplishes this by using a combination of javascript, CSS, and Flash.
Features:
- Fully accessible to screenreaders and other assistive technology
- Works on Mac, Windows, and Linux
- Works with all major browsers
- sIFR is less than 10k and only loads once
Website & Demo: http://www.mikeindustries.com/blog/files/sifr/2.0/
Andrew Paglinawan is a self-employed graphic designer, working in the fields of logo design, print design, web design and branding. He has released a free sans serif typeface called Quicksand with 7 weights including a dashed version. The font looks really nice and professional.
Let’s be honest. Typography and the web do not go hand-in-hand. You’re limited to a choice of about 5 fonts, most of which are cheap knockoffs of ‘proper’ typefaces. You’ve got practically no fine control over kerning or line spacing, and – worst of all – there’s a very good chance that no matter what you do, no matter how hard you try – your type is going to look different on every single browser and operating system. So what is an avid graphic designer-cum-web designer to do when faced with the seemingly insurmountable task of making web type look good?
Tip 1: Don’t limit your size options
Once upon a time, we were limited to a mere 7 sizes via use of the <font> tag – thankfully current incarnations of CSS grant us much better control, so quite a fine level of control over the size can be had.
Figure 1: Newer methods of specifying sizes in CSS allow for more flexibility when choosing type size. Don’t stick to standard sizes – experiment!
Relative sizes work best- don’t forget your visitors may have a different font size setting to the default, so specifying fixed point or pixel values may make things look awfully strange. ‘Em’ units – so called as 1em is equal to the width of the lowercase ‘m’ character, are one of a few ways to scale your text proportionally. All things being equal, at default settings 1em is the same size as 12 points.
You’re not limited to while numbers, either – 0.8em is a good body font size, typically being rendered at 10pt. You can specify any number you like, and as large as you like – don’t limit yourself to sub-24pt sizes if the design warrants a larger size.
Read the rest of this entryProviding users as many preferences as possible always puts a smile on the user’s face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That’s why this MooTools-driven font-size slider has been developed. It saves the user’s preference into a cookie.
There’s actually very little javascript to this create this functionality, Thanks to MooTools. Once the DOM is ready, we read in the saved font size (if one exists) and set it accordingly. Next we create our update message slider javascript. The last part is the fun part: the font size slider. The options are fairly self explanatory until the change event.
On slider change, we:
- update the font size label
- write a cookie to save the font size value
- change the document’s font size
- slide in the update text and slide it out two seconds later
Good font to let you have maps of all countries. Stop searching for maps. Instead, install this font and get a key to every country and state on the world for free.
sIFR is one of the most popular solutions for using any font on websites.
There is now another similar solution named sIFR Lite which has some new features but specially much lighter (3.7kb rather than 22kb).
Here are the other differences:
- It auto-detects the text color of the elements (they are entered manually in sIFR).
- It is completely object-oriented.
- It no longer uses CSS selectors. Elements are targeted by tag name and class (a slight loss in ease of use, but faster, lighter, and more maintainable).
The original sIFR is well-tested & widely used but sIFR-Lite is not. So, it would be great to hear your experiences about sIFR-Lite.
Compatibility: All Major Browsers
Website: http://www.allcrunchy.com/Web_Stuff/sIFR_lite/
