Hi everybody,

 

I hope you are doing great. I am really liking the the new Calibri font that comes with Windows Vista and I wanted to know if it is possible to set a different font size depending on the font to be displayed. Calibri looks good and readable in my opinion at 14px, but Arial (my second choice) is just too large at 14px. Calibri at any smaller size than 14px is too small and is not readable. Is there anyway I can set 14px for those who have Calibri installed and a different font size for those who have Arial in my CSS? I don't think it exists but I thought I can ask.

 

Thanks for your help.

Unfortunatly no. Webdesigners doesn't have much control over types.

You'll have to find a different fallback font, such as Tahoma.

Unfortunatly no. Webdesigners doesn't have much control over types.

You'll have to find a different fallback font, such as Tahoma.

 

So it's official now.

 

Thanks for the quick reply Thomas, I really appreciate it. Have a great day!

That is a very interesting issue you've brought up Mody, I'm pretty sure that functionality doesn't exist at the moment in CSS 2.1

I think you should take a look at sIFR. It's not for huge blocks of text, but it can be nice on headings as an example. In that way, you will be able to use your beloved Calibri-font.

I think you should take a look at sIFR. It's not for huge blocks of text, but it can be nice on headings as an example. In that way, you will be able to use your beloved Calibri-font.

 

Sorry about the (very) late reply, I have completely forgotten this thread. I do know of sIFR, but as you said, it is only useful for headings and small blocks of text. I was hoping that it could be done with CSS but there is no way.

 

Thanks for trying to help and sorry again for the very late reply.

Hey Mody..

 

Nice topic Bro... as said by the Rob above that till now there is no options in CSS 2.1, I too appreciate it.

But one thing struck on my mind that if its possible detect the Font ( whether it is installed in the system or not) with the help of some script, then switch between two class. The two classes will have the property of font-family and font-size.

 

I would request all of you to focus on this and reply whether its possible or not.

This might be possible with php or some other language.

 

if font = arial {

print "font-size: 14px;"

}

 

if font = colibri {

print "font-size: 16px;"

}

 

else { font-size: 100%; }

 

Or something.

 

I'm not familiar with php, but I think you understand.

This might be possible with php or some other language.

 

if font = arial {

print "font-size: 14px;"

}

 

if font = colibri {

print "font-size: 16px;"

}

 

else { font-size: 100%; }

 

Or something.

 

I'm not familiar with php, but I think you understand.

 

Thaks for your Quick Reply... Sono

I would request some of the Coders to check this and reply if this can be utilised.

 

Any other suggessions are always appreciated...

Nopes. PHP is a server side script. It won't have access to the clients computer. It's no go I'm afraid.

Basically, typography in CSS is not very controllable. The best you can do is make suggestions to how you prefer it.

 

Your best option would be to pick one or more websafe fonts that have similar characteristics as Calibri as alternative fonts. Remember, some users override the font size any way, making them large, or in some rare cases smaller.

 

Do you use anti-aliasing? I find Calibri perfectly clear and readable down to 10px before it starts to become somewhat harder. Certainly not any less readable than any other common type. I use ClearType for anti-aliasin though. That might affect readability.

Nopes. PHP is a server side script. It won't have access to the clients computer. It's no go I'm afraid.

 

Thanks for your reply Bro Thomas

 

Is it possible with Client Side Scripting, may be javascript ???

Basically, typography in CSS is not very controllable. The best you can do is make suggestions to how you prefer it.

 

Your best option would be to pick one or more websafe fonts that have similar characteristics as Calibri as alternative fonts. Remember, some users override the font size any way, making them large, or in some rare cases smaller.

 

Do you use anti-aliasing? I find Calibri perfectly clear and readable down to 10px before it starts to become somewhat harder. Certainly not any less readable than any other common type. I use ClearType for anti-aliasin though. That might affect readability.

 

Hi Thomas. I just decided not to use it. Calibri is actually readable down to 12px in my opinion (I misused the word readable in my first post), but to my liking it looks good at 14px. However, it is certainly smaller than fonts like Arial at similar sizes. Way smaller actually.

 

This is not an issue for me anymore. I learned to live with it. It would be interesting to know if there is a method to do it though.

It can be done with Javascript but it is a faff. Basically Javascript cant just check if a user has a font installed by itself as that would be a security flaw, so you have to do the following:

 

Create two 'test' DIVS with the same text in each - one with a standard font and one with calibri as the main font, followed by the same standard font as backup if calibri is not installed. Then you use javascript to return the width of each of the test DIVS (using offsetwidth). If the widths are not the same then the test is true and the client has the font installed. If the widths are the same, then the test is false and you can use javascript to dynamically change the font size.

 

So, it can be done... but like I said it's a bit of a faff.

 

(ps - it still works if the test divs are set to visabillity:hidden so the user can't see them)

It can be done with Javascript but it is a faff. Basically Javascript cant just check if a user has a font installed by itself as that would be a security flaw, so you have to do the following:

 

Create two 'test' DIVS with the same text in each - one with a standard font and one with calibri as the main font, followed by the same standard font as backup if calibri is not installed. Then you use javascript to return the width of each of the test DIVS (using offsetwidth). If the widths are not the same then the test is true and the client has the font installed. If the widths are the same, then the test is false and you can use javascript to dynamically change the font size.

 

So, it can be done... but like I said it's a bit of a faff.

 

(ps - it still works if the test divs are set to visabillity:hidden so the user can't see them)

 

Thanks Aaron, that's very interesting. I myself would not use it but it can be useful to others.

 

(PS: Your website is beautiful. Great work!)

It can be done with Javascript but it is a faff. Basically Javascript cant just check if a user has a font installed by itself as that would be a security flaw, so you have to do the following:

 

Create two 'test' DIVS with the same text in each - one with a standard font and one with calibri as the main font, followed by the same standard font as backup if calibri is not installed. Then you use javascript to return the width of each of the test DIVS (using offsetwidth). If the widths are not the same then the test is true and the client has the font installed. If the widths are the same, then the test is false and you can use javascript to dynamically change the font size.

 

So, it can be done... but like I said it's a bit of a faff.

 

(ps - it still works if the test divs are set to visabillity:hidden so the user can't see them)

 

Thanks for your great suggession Bro..

I am really very much interested in doing this, but problem is I don't have so much knowledge in Javascript.

Can you help me out by providing a code if time provides you ?

It would be very much helpful for me..

 

Thanks once again...

Thanks for your great suggession Bro..

I am really very much interested in doing this, but problem is I don't have so much knowledge in Javascript.

Can you help me out by providing a code if time provides you ?

It would be very much helpful for me..

 

Thanks once again...

 

Not tested, just writing down from the top of my head:

 

// Call this function when the document loads. Preferably when the DOM has loaded.
function adjustFontSize()
{
// Create test element
var sandbox = document.createElement('div');
var customFontDiv = document.createElement('div');
var compareDiv = document.createElement('div');

// Set their font
// Ensure they are not visible
// Position the container absolutely so they do not affect the page flow
// Float the test elements to make them shrink wrap to the content
with (sandbox.style)
{
	visibility = 'hidden';
	position = 'absolute';
}

with (customFontDiv.style)
{
	fontFamily = 'Calibri, Arial';
	float = 'left';
}

with (compareDiv.style)
{
	fontFamily = 'Arial';
	float = 'left';
}

// Add some content to the test elements
customFontDiv.appendChild( document.createTextNode('Lorem ipsum dolor sit amet') );
compareDiv.appendChild( document.createTextNode('Lorem ipsum dolor sit amet') );

// Connect the elements together and add them to the document
sandbox.appendChild( customFontDiv );
sandbox.appendChild( compareDiv );
document.body.appendChild( sandbox );

// Get the test element's width and compare them
if (customFontDiv.clientWidth !== compareDiv.clientWidth)
{
	// The two test elements doesn't have the same width so we can assume that
	// Calibri has been used. Now we adjust as we see fit.
	document.body.style.fontSize = '14px';
}
else
{
	// The test elements have identical width, Calibri might not have been used.
	// (!) Note that two fonts might retun identical width to the divs, so you have
	//	 to check first which font to use for comparison. Remember you will
	//	 have to pick a 'web safe' font.
	document.body.style.fontSize = '12px';
}
}

Looks like a good bit of code Thomas - thumbs up from me!

Not tested, just writing down from the top of my head:

 

// Call this function when the document loads. Preferably when the DOM has loaded.
function adjustFontSize()
{
// Create test element
var sandbox = document.createElement('div');
var customFontDiv = document.createElement('div');
var compareDiv = document.createElement('div');

// Set their font
// Ensure they are not visible
// Position the container absolutely so they do not affect the page flow
// Float the test elements to make them shrink wrap to the content
with (sandbox.style)
{
	visibility = 'hidden';
	position = 'absolute';
}

with (customFontDiv.style)
{
	fontFamily = 'Calibri, Arial';
	float = 'left';
}

with (compareDiv.style)
{
	fontFamily = 'Arial';
	float = 'left';
}

// Add some content to the test elements
customFontDiv.appendChild( document.createTextNode('Lorem ipsum dolor sit amet') );
compareDiv.appendChild( document.createTextNode('Lorem ipsum dolor sit amet') );

// Connect the elements together and add them to the document
sandbox.appendChild( customFontDiv );
sandbox.appendChild( compareDiv );
document.body.appendChild( sandbox );

// Get the test element's width and compare them
if (customFontDiv.clientWidth !== compareDiv.clientWidth)
{
	// The two test elements doesn't have the same width so we can assume that
	// Calibri has been used. Now we adjust as we see fit.
	document.body.style.fontSize = '14px';
}
else
{
	// The test elements have identical width, Calibri might not have been used.
	// (!) Note that two fonts might retun identical width to the divs, so you have
	//	 to check first which font to use for comparison. Remember you will
	//	 have to pick a 'web safe' font.
	document.body.style.fontSize = '12px';
}
}

 

Thank you very much... Thomas