default font and font size

[tchoy]

Does anyone know what the default font and font size is?

 

Say like I have a paragraph specified with

 

 

And I don't specified a class or a css style for it, the default font looks like times new roman, but I'm not sure and the font size because when I did specify the style as times new roman and font size 15px, it looks a little smaller than when I did not specify. The only reason I did was because in another

, it had to be a different font and font size.

[jlhaslip]

Default fonts are Browser dependent.

Size, too.

[Wickham]

Default fonts are Browser dependent.

Size, too.

 

In other words, always specify font-family and font-size and color or everyone will see your page in different styling, depending on what settings their browser has.

[LSW]

Safari shows a different font size as IE, Mac will be different from Windoiws as Mac uses a different default font than windows. Of course mine will look different as all my browsers are set to 11pt and Tahoma.

 

PS - always use points and not pixels for font sizes. When you set the sizes, use % or EM, this makes the text flexible to fit the users default choices.

 

Default = 100% or 1em

 

Smaller (maybe the copyright) = 80% or .8em

 

Bigger (Like H Tags) = 120% or 1.2em

 

EM stands for the size of the capital "M" in the users default font and size.

 

Also keep in mind that not every OS will have the same Fonts. I believe Mac does not have Arial.

[jlhaslip]

And Linux uses a different set as well, but many users add the Microsoft Core Fonts package, so they get some (but not all) of the MS ones. There are other Open-Source fonts which duplicate the MS Font appearance.

[falkencreative]

Also keep in mind that not every OS will have the same Fonts. I believe Mac does not have Arial.

 

They do have some different fonts (http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html) but both Windows and Mac come with Arial automatically installed.

[Andrea]

PS - always use points and not pixels for font sizes. When you set the sizes, use % or EM, this makes the text flexible to fit the users default choices.

Did something change? Last I heard was that points are for print, pixels and em are for web.

[catfish]

Safari shows a different font size as IE, Mac will be different from Windoiws as Mac uses a different default font than windows. Of course mine will look different as all my browsers are set to 11pt and Tahoma.

 

PS - always use points and not pixels for font sizes. When you set the sizes, use % or EM, this makes the text flexible to fit the users default choices.

 

Default = 100% or 1em

 

Smaller (maybe the copyright) = 80% or .8em

 

Bigger (Like H Tags) = 120% or 1.2em

 

EM stands for the size of the capital "M" in the users default font and size.

 

Also keep in mind that not every OS will have the same Fonts. I believe Mac does not have Arial.

I know this is an old post and I can't believe I am back asking about fonts but I am. Client wants to use century gothic for the body of the website and Papyrus for h1, h2 headings as well as navigation heading links. I have over the last year regularly used verdana and a font-size of 14px I think but while building a new site and testing in different browsers if the viewer has their monitor settings at text large etc then this pushes the content out of boxes etc. I need a refresher on font-family and font-size. And what would I use in the font stack with Papyrus that is similar in shape and size? and also the Century Gothic. When do I use pt and when to use em? Thanks so much

[grabenair]

Points are for print. Ems are best. But do not sit everything in Ems it can cause problems in IE. You should set a base font at the beginning of your css. Where you sit the margin and padding to 0 on the body. Something like 12px this is just for IE does not balk at all Ems.

 

Well with that out of the way. Try using % so it will change with the browser.

 

If all else fails go old school and use photoshop to make the links.

Edited February 28, 2013 by grabenair

[catfish]

I feel a bit lost with regards to font-sizing in my css. I have a site that I am trying to change to em and % and also trying to use the stupid Papyrus for heading and navigation heading. I'm struggling as I have divs inside divs and not sure where I need to put my em and %. Here is a link to the site before I go too much farther.My link

 

 

My biggest concern is my use of em and % but also my font-family's and using Papyrus font.

Still reworking the codes, so I removed the css for now

Edited March 1, 2013 by catfish

[grabenair]

Personally I do not see a problem with the 12px that you have for font size on your links. I would leave it alone. One thing you could do is add a line height to center the text.

 

Also this is just a little piece of advice. You should pick a word separator meaning the underscore or camel casing and stick to it. I see both and none in your code. It will make it easier for you in the long run when you write your css, call an id or class with PHP or Javascript, you will not have to go back and see what you did because it will always be the same. And if you ever work on a team your team members will like you better.

[catfish]

Personally I do not see a problem with the 12px that you have for font size on your links. I would leave it alone. One thing you could do is add a line height to center the text.

 

Also this is just a little piece of advice. You should pick a word separator meaning the underscore or camel casing and stick to it. I see both and none in your code. It will make it easier for you in the long run when you write your css, call an id or class with PHP or Javascript, you will not have to go back and see what you did because it will always be the same. And if you ever work on a team your team members will like you better.

 

Ok, thankyou for the advise. I will try to remember that. So I'll post my new code and link using the % and em. I just want to be sure that if I go with this font sizing that I am doing it correctly. My link..My link and a portion of my code..

html {
height:100%;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}

body {
margin: 0px;
padding: 0;
background-image: none;
background-repeat:repeat;
background-color: #000;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
color:#000;
font-size: 62.5%;
}

#container{
width:872px;
margin:0 auto;
background-color: #fff;
border-right:3px solid #3160ac;
border-left:3px solid #3160ac;
font-size:1.4em;
}

.passion{
font-family: "Papyrus";
color:#3060ad;
font-size: 1.5em;
width:100%;
text-align:center;
}

#navcontainer ul
{
font-family: "Papyrus";
height:21px;
padding:6px 0 2px 0;
margin: 0;
list-style-type: none;
background-color: #000;
color: #fff;
width: 100%;
font-size:.85em;
font-weight:bold;
text-align: center;
border-bottom:2px solid #3160ac;
border-top:2px solid #3160ac;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: #000;
color: #fff;
padding: 0 30px;
}

li a:hover
{
background-color: #000;
color: #3160ac;
}

#contact_line{
clear: both;
background-color:#000;
color:#fff;
height:24px;
padding:3px 32px;
border-bottom:2px solid #3160ac;
border-top:2px solid #3160ac;
font-size:1em;
}
#footer {
clear: both;
background-color:#000;
padding: 0 32px;
height:30px;
text-align: center;
border:0;
color:#3160ac;
width:812px;
margin:10px auto;
font-size:1.3em;
}

[kralcx]

You can remove this because its redundant with the body

html {

height:100%;

font-family: "Century Gothic", Arial, Helvetica, sans-serif;

}

[grabenair]

He is right you do not need the html but if you want it you can put this * body {body code} The * is shorthand for html.

 

The code looks good to me. But remember IE 7 and 8 can balk at all % and ems for font size so put the body font size to px. Believe it or not there are still people out there with IE7 and 8. I had a meeting with a client on Thur. he still had IE7 in his office and at our local college they still have IE8.

 

In your nav when I hover over the links they all but disappear.

 

You really do not need a back to top link the page is not long enough. But here is a better way of doing it using jQuery. In your head put this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 

And put this in a folder something like _jQuery with a file in it named something like javascript.js

 

//scroll to top link
$(document).ready(function() {
$('.top').click(function(){
	$('html, body').animate({scrollTop: 0}, 3000);
});
});
//the html
<p id="backtop" ><a class="top" href="#">AUTO SCROLL BACK TO TOP</a></p>

 

The Top: 0 is the top of the page, The 3000 is how many seconds it takes to scroll to top.

 

 

Then put a link to the file just before your closing body tag to the _jQuery folder like this

<script type="text/javascript" src="_jQuery/javascript.js"></script>

 

You can see this in action on my site on the portfolio page. Link at the bottom. (Still working on site.)

 

If you want the year of the copy right, although not required, it is generally with the year the site is built to the current year and you can do this with one line of PHP.

 

<p id="copyRight">© 2008 - <?php echo date("Y") ?> - name of site here</p>

Thank Andrea for the php she is where I got it from.

 

The php block will change the year automatically, you do not need it in <p> tag it is just the way I center it. Also if you add this all of your files will now have to be .php not .html or .htm do not forget to change your links also.

 

I know this is way more then you asked for but what the heck.

Edited March 3, 2013 by grabenair

[Andrea]

The * is shorthand for html.

 

That's not correct - the asterisk is a universal placeholder or wild card and stands for anything. Hence, when we say: * {margin: 0; padding: 0;}, we declare the margin and padding of every single element that appears on the site as ZERO - not just the html element's.

[grabenair]

Cool thank you for correcting me. Not trying to be a smart butt. I was taught to zero out like this * body {code here} I also see this in a lot of sites that I like and go look at their code to try to figger out how they did it for I can learn more. Is this something that used to be done or are we being taught wrong. The reason I am asking is I like to do things right. Also it makes me fell bad when I try to help someone and I do not do it right.

[Andrea]

Who knows - I don't have all the answers, either. But I do know what you mean about feeling bad for giving wrong answers - I've done that before, and also feel bad when it happens.

 

In this case - I do know for a fact that the asterisk is a random placeholder. It stands for anything, be that body, p, div, whatever. It's like the Joker in your card game. You can use if anywhere.

 

I just now edited the CSS on a couple of my sites where I changed my * {margin"0'} and added the 'body' - on 1, it screwed things up, in 2 I saw now difference.(I didn't actually change the site, only added the body via FXs webdeveloper 'Edit Css' feature, and also didn't explore the entire site, only looked at the index.

 

However, when writing CSS and we refer to a ul within a div of a certain ID - div id="certain" for example, we'd write: #certain ul {whatever....;} That would affect any ul that's inside the #certain div.

 

So writing '* body' ---- and this is my theory, somebody please confirm or deny (and explain why I'm wrong) would only affect body. The * is redundant, as there usually isn't anything, and browser-specific margins and padding assigned to the p tag, for example, would not be affected as the p tag itself is not addressed.

[grabenair]

Ya I am like Curious George, had to go and do some research on the * thing. Not a lot out there but check out this site http://www.marcofolio.net/css/css_trick_debug_your_html_and_css.html (check out the demo)

it will help or make things worse. lol

ya I know lol but could not help myself I am felling goofy tonight.

[catfish]

He is right you do not need the html but if you want it you can put this * body {body code} The * is shorthand for html.

 

The code looks good to me. But remember IE 7 and 8 can balk at all % and ems for font size so put the body font size to px. Believe it or not there are still people out there with IE7 and 8. I had a meeting with a client on Thur. he still had IE7 in his office and at our local college they still have IE8.

 

In your nav when I hover over the links they all but disappear.

 

You really do not need a back to top link the page is not long enough. But here is a better way of doing it using jQuery. In your head put this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 

And put this in a folder something like _jQuery with a file in it named something like javascript.js

 

//scroll to top link
$(document).ready(function() {
$('.top').click(function(){
	$('html, body').animate({scrollTop: 0}, 3000);
});
});
//the html
<p id="backtop" ><a class="top" href="#">AUTO SCROLL BACK TO TOP</a></p>

 

The Top: 0 is the top of the page, The 3000 is how many seconds it takes to scroll to top.

 

 

Then put a link to the file just before your closing body tag to the _jQuery folder like this

<script type="text/javascript" src="_jQuery/javascript.js"></script>

 

You can see this in action on my site on the portfolio page. Link at the bottom. (Still working on site.)

 

If you want the year of the copy right, although not required, it is generally with the year the site is built to the current year and you can do this with one line of PHP.

 

<p id="copyRight">© 2008 - <?php echo date("Y") ?> - name of site here</p>

Thank Andrea for the php she is where I got it from.

 

The php block will change the year automatically, you do not need it in <p> tag it is just the way I center it. Also if you add this all of your files will now have to be .php not .html or .htm do not forget to change your links also.

 

I know this is way more then you asked for but what the heck.

Yes, this was way more than I asked for it but LOVE those little bits of code I never knew! I've added them to a couple sites now. Thankyou all for that.