How to increase text/font size on my web pages?

RayWilk · February 15, 2012, 11:38pm

Hello,

I would like to increase the text size on my site pages, so they load with a slightly larger size font,

I know it is done in the CSS file, yet what am I looking for?

Black_Max · February 16, 2012, 12:27am

There are several ways to do it, so your question depends on what you have in your stylesheet. You could go as basic as

body {
  font-size: 1.5em;
}

or something far more nuanced and targeted. Maybe you should post the relevant snippets from your stylesheet, or a link to your site.

dresden_phoenix · February 16, 2012, 12:35am

Before I answer you question I should say that you should NOT attempt to impose fixed font sizes ( as in pixels) and that you must understand that font sizes on web pages are ultimately set by the viewers themselves.

Ok, That public service announcement out of the way.

body {
  [B]font-size[/B]: 1.5em;
}

or

body {
 [B] font-size:[/B] 150%;
}

In this case em and % do exactly the same thing. font-size: sets the size of the font based on the parent element, so you don’t HAVE to start with the body tag, just from the element where you want the font size to be bigger. This attribute cascades so all descendant tags will BASE size font them selves on that size font.

Hope that helped and wasn’t too overwhelming

RayWilk · February 16, 2012, 1:06am

Hello,

thank you for your quick informative answers

maybe best to look at my site, then tell me if it is possible,

http://trade.comeze.com/index.php

I am wanting to slightly increase word text/font size, and maybe line spacing, in the Left hand side panels,

Categories seems more spaced and easier to read,

is it possible ? is it easy to do ? or leave it alone!

ralphm · February 16, 2012, 1:47am

You can either change the font size and line height for the whole site in one hit (by applying it to the body element) or individually, element by element. Perhaps just make it clear exactly which elements you want to change and we’ll show you how.

dresden_phoenix · February 16, 2012, 2:00am

Try this:
td.categories{ padding-bottom:.5em;}/do this to increase spacing between items/
td.categories a{ font-size:150%;}/do this to increase font-size/

RayWilk · February 16, 2012, 2:56am

Hello all

wow you are all great! fast informative helpful replies, many thank yous,

ok dresden_phoenix I will look at those setting in the CSS file,

yet at the moment I am focusing on a page problem, explained here:

I have solved half of it…lol

I will be back to font sizes once this is fixed,

RayWilk · February 17, 2012, 12:47am

Ok all is well, back to font size adjustments

I will try, and see how it looks/fits

td.categories{ padding-bottom:.5em;}/do this to increase spacing between items/
td.categories a{ font-size:150%;}/do this to increase font-size/

I posted this in another forum area, yet no joy with an answer, does any one here know?

if I have the line: <?=GMSG_SELECT;?></a>]</td> then only the word “Select” is displayed on the web page.

but if I have the line: <?=GMSG_SELECT_MAIN_CATEGORY;?></a>]</td> then all the words “GMSG_SELECT_MAIN_CATEGORY” are displayed on the web
page.

how to stop the GMSG from displaying?

ralphm · February 17, 2012, 1:02am

That’s not actually HTML. What code do you see if you view the source code in your browser?

Belsnickle · February 17, 2012, 1:02am

There you go. Answered in the php forum since I know you were sent there for that answer earlier.

RayWilk · February 17, 2012, 1:41am

Hi ralph.m & Belsnickle, appreciate your help, to post here or there? lol

browser source code:

[
<a onclick=“openPopup(‘http://trade.comeze.com/category_selector.php?cat=category_id&category_id=&auction_id=100047&form_name=ad_create_form’)” href=“javascript:;”> GMSG_SELECT_MAIN_CATEGORY</a>
]

more details:

ok here is more script, the original has SELECT, and this word shows on the web page, triggering a pop up window,

but I added the MAIN_CATEGORY to make it SELECT_MAIN_CATEGORY to give the webpage viewer more details.

now with just one word SELECT only one word shows on the page, GMSG is not visible, yet when I make it 3 words long SELECT_MAIN_CATEGORY the GMSG decides to join in and become visible.

how to exclude GMSG ?

<tr class=“c1”>
<td width=“150” align=“right”></td>
<td class=“contentfont” colspan=“2”><span id=“main_category_display”><?=$main_category_display;?></span>
[<a href=“javascript:;” onClick=“openPopup(‘<?=SITE_PATH;?>category_selector.php?cat=category_id&category_id=<?=$item_details[‘category_id’];?>&auction_id=<?=$item_details[‘auction_id’];?>&form_name=ad_create_form’)”>
<?=GMSG_SELECT_MAIN_CATEGORY;?></a>]</td>
</tr>

emoviefreak · February 17, 2012, 10:11pm

use <body style=“font-size:10pt”>

ralphm · February 17, 2012, 11:12pm

Bad idea to use inline styles like that. You’d have to do it separately on every page of the site, which defeats the purpose of CSS.

RyanReese · February 18, 2012, 3:07am

ALso it’s just a maintenance nightmare…I used to do it when I first started it out :x.

Stevie_D · February 18, 2012, 5:08pm

Really, really bad advice.

You should not be defining styles inline like that, it creates a whole load of extra work.
You should not be setting absolute font sizes, because this prevents IE users from changing the size of the text.
How do you know that 10pt will be an increase?
NEVER use pt for on-screen measurements. Points have a physically defined dimension (1/72 of an inch), and so while they make perfect sense for print, they make absolutely no sense whatsoever for on-screen measurements.

RayWilk · February 26, 2012, 3:21pm

Hello ralph.m

yes I would like to change the font size for the whole site, by 10% larger, line height not sure yet,

what do I do? and where do I do it? in the CSS ? or ?

your help appreciated

RayWilk · February 26, 2012, 3:23pm

Hello dresden_phoenix,

your reply/help is appreciated,

do I just adjust an already existing line of code?

or do i need to add a line to? to where?

keithirvine · February 26, 2012, 3:24pm

You need to check your css file find out the proper class which then make changes.

RayWilk · February 26, 2012, 3:29pm

Hello keithirvine, appreciated your reply,

do I make the changes to /themes/style.css ?

an example of the css is:

/* v6.02 CSS */

/* GLOBAL classes - skin & pages */
body {font-family: Arial, Helvetica, sans-serif; }
p {font-family: Arial, Helvetica, sans-serif; }
td { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
input { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
textarea { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
select { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
hr {border: 1px solid #c3c3c3;}

.toplink { font-size: 11px; color: #124490; text-decoration: none; }
.toplink a { font-size: 11px; color: #124490; text-decoration: underline; }
.toplink a:hover { font-size: 11px; color: #124490; text-decoration: none; }

keithirvine · February 26, 2012, 3:56pm

p {font-family: Arial, Helvetica, sans-serif; }