SIFR 3.0 - Font Size

Question

I have been working with SIFR 3.0 for some time now and the font-size never seems to work correctly. I understand the most basic concepts behind SIFR. SIFR runs when you load the page. It does some calculations one the size of the HTML rendered font and then replaces it with a flash movie that is roughly equal to that size. Because of this, you want to style your HTML font to match the size of your SIFR font as close as possible.

My problem always comes up when trying to style these two font sizes to match. Let's say I want to use a SIFR font of Helvetica Neue Lt at about 32px. The HTML equivalent is something like Arial Narrow at about 36px with some negative letter spacing. So here is what I do.

In sifr.css I'll write:

@media screen {
  .sIFR-active h1 {
      visibility: hidden;
      z-index: 0 !important;
      font-size: 36px;
  }
}

Great, that gets the default HTML font the size I need. Now I need to update the flash SIFR font size. So I go into sifr-config.js and write something like this:

sIFR.replace(HelveticaNeueThinCond, {
  selector: 'h1',
  css: '.sIFR-root { color: #762123; font-size: 32px; line-height: 1em; }',
  transparent: true
});

So right now everything is working great. That is until my h1 text wraps more than one line. For some reason, when the text wraps it only shows the first line. It seems calculates the height wrong. This is very weird because I ran some tests. I took "visibility: hidden" off of "sIFR-active h1" to make sure that the HTML rendered text was the right size. It is, it takes up two lines. However, when the Flash replaces this text it gives it a min-height of one line of text. Odd.

The only way I could find to fix this wrapping problem was to remove "font-size: 32px;" from "sIFR.replace(HelveticaNeueThinCond" in sifr-config. The problem I run into then is that it inherits the font-size set in sifr.css. Now the problem is that my HTML text is bigger then the SIFR text. So occasional my HTML text will wrap to a new line before my SIFR text leaving a big white space.

So, how do I set two different font-size (one for my HTML text and one for my SIFR) without losing the wrapping.

The only time I have been able to use the successfully is when I have a SIFR font that is so similar to a web safe font that they can share the same font-size attribute.

Thanks

Answer 1

You seem to be doing all the right things with the .sIFR-active class and negative letter spacing. Remove the font size and line height from the sIFR.replace and you should be fine…

Answer 2

Thanks Mark. As explained, if I remove the font-size from sIFR.replace it will default to use the font-size declared in .sIFR-active. I am declaring two different font sizes for a reason, I want sIFR.replace to have a font-size of 32px and sIFR-active to have a font-size of 26px. This way they match as closely as possible. Is there no way to have you flash font (sifr.replace) be a different size then the HTML font (sifr-active)?

Is it mandatory to have them be the same font size? Doesn't make much sense if that is true. How else would you be able to fine tune the two fonts to get them to take up the same letter spacing/lines?

Answer 3

Actually, I never thought of using two different font sizes, sIFR is simply designed to use the font size from the CSS.

You can use http://wiki.novemberborn.net/sifr3/Ratio+Calculation though to help sIFR sort out the height of the Flash movie, and of course tweak the letter-spacing to sort out the width of the text.