ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Bigger Fonts for Browsing

Updated on November 8, 2013

Presbyopia - Help !

(ack:freedigitalphotos.net - imagerymajestic)

When you age to 40 - 50, most of us will need reading glasses or some equivalent for reading small text at a close distance.

This difficulty increases with age, slight for some but significant for others, and certainly increasing till the age of 60.

"Waitaminute, I'm a slave to my monitor, how serious is this?"

You can google ahead for a precise formula but as a rough estimate,

your limit of good near vision stops in the range;

Best (cm) = 100 / (25 - 0.4 x Your_Age)

Worst (cm) = 100 / (15 - 0.25 x Your_Age)

e.g

Age

40 years , Best = 11cm. Worst = 20cm.

45 years , Best = 14cm. Worst = 27cm.

50 years , Best = 20cm. Worst = 33cm.

This is no biggy as most of us have our computer monitors about 50-90 cm away.

But even though you might be able to focus on tiny text, it can still look bad. It can be a strain to read and you might have to switch to reading glasses some of the time.

The Difference.

Glasses are fine but,

Not all of us are used to wearing spectacles.

Physically, they can be a strain in itself not to mention the inconvenience.

If only ALL fonts were big enough, then some of us wouldn't need reading glasses at all.

Bad Browsers or Bad WebPage Designs ?

Of the top Browsers, there is such a setting as "Minimum Font Size ". In theory this is a great concept. It is a rule that says: 'No font can be smaller than xyz-size', Great!.. Except it doesn't work because today's modern authors use (wether they know it or not) CSS style sheets. For CSS formatted pages, this setting is useless as it only works for pure HTML content (pages without CSS).

Probably more of 'inconsiderate' than 'bad', you might have noticed that some websites have used large fonts for headers but tiny fonts for paragraphs. Also, some authors may not be adequately aware if they are using the right size fonts, they assume the software they are using is already 'set to standard'.

A common default size in graphical web browsers is..

12 pt = 16 px = 100 %. This is for an average PC of 96dpi.

Zoom : a quick solution.

An easy solution is to increase the font size.

Most of the top Browsers allow to easily increase the font size via a shorcut (usually the '+' and '-' buttons).

But this 'zoom' method increases everything, including any already large headers. You will also have to zoom back when you return to a normal page.

Override with CSS

And here we arrive to an elegant solution. Using your own CSS style sheet to override the website's CSS.

Your browser supports CSS (otherwise you would'nt have this problem). CSS is a bunch of style statements to set the presentation (fonts,tables,borders..etc). They can be embedded inside the HTML or you can put them in an external file. Browsers have a priority of using the Author's CSS (website creator), before an optional User's CSS file (your's).

For example,

in Firefox, the user's CSS file is activated if you save it in

profile-directory/chrome/userContent.css

(Firefox has no option to 'switch-off' the User CSS. You have to delete the file to do this.)

in Opera, the user's CSS file must either be saved in;

/styles/user/user.css (sytem-wide)

or

/profile/styles/user/user.css (user-wide)

(Opera also has a menu where you can select another file instead of user.css. And you can switch in-between Author or User mode)

Below is an example CSS file to make fonts Arial and larger.

example of a User CSS file

/* change fonts to arial */

h1 { font-family:Arial,Helvetiva, sans-serif !important; }

p { font-family:Arial,Helvetiva, sans-serif !important; }

/* make fonts bigger */

h1,h2,h3 { font-size: large !important;}

p { font-size: large !important;}

table,td { font-size: large !important;}

div { font-size: large !important;}

font { font-size: large !important;}

/* try to guess other class names that websites might use */

li.g { font-size: medium !important;}

.content { font-size: medium !important;}

.textcontent { font-size: medium !important;}

!important

When in 'user' CSS mode, the Opera browser will read the user.CSS file and obey it. The most important keyword in this file is, " !important ". This tells the browser to override the Author's setting.

Don't touch anything else !

Remember we only want to change the font sizes.

To keep the rest of the page the same as the Author's, default everything else back to the Author's CSS.

Creating an Opera CSS mode toggle

For the Opera browser, after creating a User CSS file, you can switch in-between the Author / User modes either by ;

A) Using the Menus.

Switching : Menu > Page>Style>'User' mode

Setting : Menu >Page>Style>manage Modes > My Style Sheet > user.css

or

B) Creating a Button.

(Right-Click a Toolbar) > Appearance > Buttons > Browser view > Author/User mode.

or

C) Creating a Keyboard Shortcut.

(e.g F1) :

settings > preferences > advanced > shortcuts > keyboard-setup > edit > browser-window > New > "F1" "Select user mode | Select Author mode"

> OK

That's all for now !

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.