Selecting font size based on available font

[dave richards]

Hi,

I'm currently trying to learn css/html and am having difficulties with font
sizes. The site loads a background with an image of a circle. All of the
content needs to fit inside this circle and I have used a div to contain the
content.

in my css I listed a number of fonts (the site needs a font that looks like
handwriting).

body {
font-family: "Monotype Corsiva","Comic Sans MS", "Cursive";
font-size:16px;
color: #505050;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}

The problem I have is that although 16px font size looks fine for "Monotype
Corsiva", if this font is not available and another is selected the text
either looks very compact or spills off the end of the div. I have tried
px/pt/em for the font size. Is there anyway to either specifically set the
font height to a set number of pixels or use a different font size depending
on which font is selected.

Thanks for your help
Dave

 

[kchayka]

I'm currently trying to learn css/html and am having difficulties with font
sizes. The site loads a background with an image of a circle. All of the
content needs to fit inside this circle

It _needs_ to fit? I have seen many attempts to fit textual content
within the confines of a fixed size background image, but don't recall
any that were really successful. You cannot reliably acheive this using
just HTML and CSS because you have no control over the visitor's fonts
or text size.

That's the nature of web media, and it is A Good Thing(TM). Start
accepting it now and you will save yourself oodles of frustration later.
It will also make you a better web designer.

in my css I listed a number of fonts (the site needs a font that looks like
handwriting).

body {
font-family: "Monotype Corsiva","Comic Sans MS", "Cursive";

It _needs_ to look like handwriting? Cursive fonts are generally hard
to read on screen. They can be OK for headings (if they are a
sufficiently large font size), but not for body text.

font-size:16px;

Per accessibility guidelines, do not use px for font sizes, but
something relative to the user's preferred default text size. I highly
recommend % units.

BTW, my default text size is larger than 16px, so you just made a font
that was already hard to read on screen even more difficult, perhaps
even unreadable. I would likely have to zoom text to read it at all,
which would probably mess up your layout. That's the nature of the web.

Ask yourself who is the site for, you or your visitors? Based on your
answer, you may want to reconsider what you really _need_.

 

[Paul Furman]

Hi,

I'm currently trying to learn css/html and am having difficulties with font
sizes. The site loads a background with an image of a circle. All of the
content needs to fit inside this circle and I have used a div to contain the
content.

Is it possible to set the image and div size in ems to they match the
text? Probably not perfectly predictable but with some slack it might
work in most cases. I don't know how weird the picture would look
stretched... better than things spilling over.