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.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)