tips and tricks for movable type

font switcher
November 01, 2003

I've implemented a rather rudimentary (to me, anyway) font switcher for those who find my teeny font hard on the eyes. It's based on this article from A List Apart, and you can find the options down on the bottom of the sidebar at left.

I split my current stylesheet down into four new ones:

  • styles-all.css - those that apply everywhere (i.e., are not font-size specific)
  • styles-pref.css - the default font sizes
  • styles-medium.css - 2px greater than the default font sizes
  • styles-large.css - 4px greater than the default font sizes

I haven't the patience for full-scale skinning of my site, so this is as close to fancy as it's going to get around here.

Comments

I was wondering why you have a font switcher when you can leave it to the user and their browser to change the font size. On most websites using IE you can hold the CTRL key and use the mouse wheel to change the font size, or go up to View-->Text Size. However I tried it now on your site and all it does is change the size of the bullets.

I've been debating about adding a skinning type system to my site so users can change the color schemes, font size, and turn off the ad banners. With the font though do you think it wouldn't be better just to let them change it themselves?

by Blaine Hilton | 11.01.03 11:58 AM

I assume that the reason changing the text size from the browser doesn't work is because I don't used relative sizes in my stylesheet - I specify absolutes like "10px".

I suppose I could have just changed them all to relative values, but then, I wouldn't have learned how to do something new. ;-)

by girlie | 11.01.03 12:07 PM

Thank you, thank you, thank you! I was really having a hard time seeing everything. It was way to teeny for my eyes. -- jumping up and down doing the jiggy dance. :)

by Rayne | 11.01.03 04:39 PM

I'd like to make a suggestion - put the font switcher near the top of the page. If I visit a page I can't read, I'll never be scrolling to the bottom of that page.

by Jennifer | 11.02.03 09:34 AM

I agree, I just haven't figured out where I want to put it. I am thinking about trimming down some of the sidebar content anyway, so that will go into the re-arrangement. I'm also thinking of using icon instead of text links, but haven't found any which I like yet.

by girlie | 11.02.03 09:48 AM

Works for me! Thanks!

by Dianne | 11.02.03 04:48 PM

Hi, I saw somewhere, maybe not on your site, but there was some MT code that would allow me to do something to my small calendar that is on the right hand side, which when you hover your mouse over a date that has entries, it will show the titles of the entries below the calendar so that you can click on the one you want and not have to go to all of them. How can i do this, or where can i find the information for that? Thanks
Josh

by Josh | 11.06.03 01:53 PM

Great! I always found the text a bit too small here.

In reply to Blaine Hilton (1st comment), text zoom in Mozilla Firebird works fine since it's effect lasts only for that 1 tab, but I guess it's pretty nice to IE users since text zoom stays in the next browser instance, meaning you get overly big fonts in the next site you visit sometimes. That is a nuisance.

by Cheah Chu Yeow | 11.09.03 06:33 AM

I used the ALA font switcher for a while, but I had a problem. Any time it called up an alternate style sheet it would lose the top area of the page, it just *poof* disappeared, and not everytime mind you. I am not a genius when it comes to CSS, scripts, or whatnot by any means but I did notice after a long time of hairpulling that it was related to only the alternate stylesheets - I basically made a sheet where only the background changed - and it still lost the top. I did ask the CSS-List people if they knew anything about it, to no result.
Good Luck!

by Erik Mallinson | 01.17.04 01:56 AM

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

TrackBack: 2
(URL: http://www.thegirliematters.com/sf/mt-track.cgi/158)

» MT Tweaks
Excerpt: Running list of modifications used at http://www.patchworkprogression.com over the default MT installation. Includes corresponding links to snippets, tweaks, tips, hacks and plugins.
Weblog: patchwork progression
Tracked: 02.02.04 06:06 PM

» CSS Font Switcher
Excerpt: You will notice, just below the calendar and search box, a new addition to the main index page on this blog. It had long been my intent to implement the ability to change font size in browsers that do not allow for CTRL+Scroll Wheel font size manipulat...
Weblog: patchwork progression
Tracked: 02.02.04 09:36 PM