CSS 101

Maybe everyone already knows this. Or maybe nobody cares about this. But apparently Cathy Harris is trying to spin the fake rape story by accusing me of faking the screen shots.

Let me explain something about type fonts and web sites.

When you set type for a newspaper, it’s easy. Pick a style and you’re good to go. Every copy will come out looking exactly the same.

Computers are very different. A browser (Firefox, for example) displays the type font that the code for the web site tells it to display. Let me give you an example:

This is the CSS code for the Romancing web site. I wrote it. It’s telling the browser how to display stuff in the body of the page. The background color is coded (e1cd8a) which is that gold/yellowish color. There is no margin, and no padding (don’t worry about what they are). The color of the type, the color of the letters is 2f2d27, which is the extremely dark brown color that makes the border around that image.

But the important thing for this little lesson is the font. The first thing you see is the size. I’ve set the size to 100% of the normal size that the browser displays type. What is that?  Whatever you have your browser set to display. People set them differently.  The 1.4 is talking about size again and is not important.

The four type fonts in red are what is important.

If I only put one type font there, say, Verdana, and your computer didn’t have Verdana installed, your browser wouldn’t know what to do. It would make a huge guess and display something, but it might be something I don’t like and I’m the designer.  Worst case scenario is that it wouldn’t display anything at all.

So, what I’m telling the browser is: Display the type in Verdana. If that’s not available, use Arial. If that’s not available use Helvetica. And if none of those are on the computer or device, use a generic sans-serif font. In that order.

Look at this:

These are samples, taken from this web site, of those first three type fonts. Notice the extreme difference between the first two – Verdana and Arial. They are set to the exact same size, yet they occupy very different amounts of space. Now notice the second two – Arial and Helvetica. They are not absolutely the same, but very close. Why did I include two fonts so close to being the same?  Because Helvetica is pretty much universally installed on Macs. Arial is almost always available on a PC. By using those two, the web site will look very much the same no matter which sort of computer the user has.

Phones are another matter. The same issues are involved. At that point, the “sans-serif” command often takes over and it’s very generic. It can get very weird indeed.

That’s why you can look at the Romancing site on your home computer and it looks somewhat different from the way it looks on your phone or other mobile device, or your laptop.

And Facebook is not different from this. It’s coded the same way. It’s probably way more complicated, but when it comes to type fonts – this is how it’s done. I don’t know what choices the coding folks at Facebook made when they developed the site – they’re almost certainly not the same as my choices, but it shows up differently on different computers or devices.

Sometimes the difference is slight – like that between Arial and Helvetica above. And sometimes the difference can be quite profound. I am typing this on the screen that WordPress displays for me to compose a new post. The type font is a serif font (like Times New Roman). However, when I “publish” the post, it will be displayed as you’ll see it, with a sans-serif font. Same words, different display.

See what I mean?

In the Fake Rape account, the top screen shot came from one device. The next two came from a different device. There was a reason for that which has to do with my sources. The screen shots are fairly old. Cathy didn’t fabricate that story last week.

The last little shot comes from a phone notification, which is why the coding got garbled. It was the only copy the source had.

I don’t have to fake anything to prove that Cathy lies.


Leave a Reply

Your email address will not be published.