What Does "A" Stand for in Font: 0/0 A;

What does a stand for in font: 0/0 a;

http://nicolasgallagher.com/another-css-image-replacement-technique/

font:0/0 a – a shorthand property that zeros out the font size and
line-height. The a value acts as a very short font-family (an idea
taken from the BEM implementation of this method). The CSS validator
complains that using 0/0 in the shorthand font property is not valid,
but every browser accepts it and this appears to be an error in the
validator. Using font:0px/0 a passes validation but it displayed as
font:0/0 a in the code that the validator flags as valid.

Font value of a?

font: 0/0 a; - Is a shorthand property that zeros out the font size and line-height. The a value acts as a very short font-family (an idea taken from the BEM implementation of this method). The CSS validator complains that using 0/0 in the shorthand font property is not valid, but every browser accepts it and this appears to be an error in the validator. Using font:0px/0 a passes validation but it displayed as font:0/0 a in the code that the validator flags as valid.

bootstrap css file - please explain what does the font code means

0 is a short hand of 0px. 0 is the only one number you can use as short hand.

"font: 0/0 a" means font-size/line-height font name

Size of font in CSS with slash

This actually sets two properties and is equivalent to:

font-size: 100%;
line-height: 120%;

To quote the official documentation:

The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.

As David M said in the comments, it mirrors the typesetting tradition of specifying typeface sizes as “x pt on y pt” to denote the glyph size on line height.

But the example in your question is actually wrong and would be ignored by the browser: you can only combine these two properties in the font shorthand notation, and you must specify at least both the font size and family. Simply writing font: 100%/120%; is therefore not enough; you could add a generic family name to make it valid though, e.g.:

font: 100%/120% serif;

What does Skeleton have in its CSS that makes the sup tag not work properly?

First declaration has vertical-align: baseline;

A couple of CSS questions regarding robot-or-not.com code

You don't need a "base size". The default size for fonts is configured by the user in his/her browser. This is what the browser then uses for 1em (or 100%).

You can define your own "base size" in the body (body { font-size: 12px }) and then go ahead and use ems (or %) for other font-sizes, such as h1 { font-size: 1.5em } instead of h1 { font-size: 18px } (12px * 1.5 = 18px). This has the "advantage" for you as the developer that if you choose to change your "base size", then all other font-sizes (or other em based values) will scale accordingly.

However by setting such a pixel-based base size, you override the users configured (and thus probably preferred) font-size with your (the designers) choice. Many designers do this, because they believe their pixel-perfect design must not be disturbed by the users preferences. Whether you need this or let the user choose is your decision.

100%/1.5 is part of the font shorthand property and is the abbreviation for setting font-size: 100% and line-height: 1.5.

background is also a short hand property and background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px; extends to:

background-color: #E2E2E2;
background-image: url("/-/img/bg.jpg");
background-repeat: repeat;
background-position: -20% -146px;

background-position: -20% -146px means that the top left corner of the background image isn't positioned at the top left corner of its element, but it is pushed 20% of the width of its element to the left and 146 pixels up.

font face troubles.. not sure why it won't work?

Do you have the fonts in the type subfolder?
Try to put a / at the beginning of the path.
The path should be relative to the document (not the css file).

What is the default font height used in the API CreateFont ? How does it choose a font face?

It looks like you need this code. Font height is calculated by this formula nHeight = -MulDiv(PointSize, GetDeviceCaps(hDC, LOGPIXELSY), 72);

PointSize - is a font size, GetDeviceCaps(hDC, LOGPIXELSY) is a call to get DPI via GDI (old stuff).

In my DPI awareness battle I use this code:

fontStruct.lfHeight = 0 - MulDiv( height, GetWindowDpi( window ), 72 );

GetWindowDpi is a wrapper that call GetDpiForWindow for windows 10 or GetDpiForMonitor for Windows 8.1 or use same old stuff GetDeviceCaps(hDC, LOGPIXELSY) for Windows 7.

Font scaling based on width of container

If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.

If the container is the body, what you are looking for is Viewport-percentage lengths:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

The values are:

vw (% of the viewport width)
vh (% of the viewport height)
vi (1% of the viewport size in the direction of the root element's inline axis)
vb (1% of the viewport size in the direction of the root element's block axis)
vmin (the smaller of vw or vh)
vmax (the larger or vw or vh)

1 v* is equal to 1% of the initial containing block.

Using it looks like this:

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so do the font-size, without needing to use media queries.

These values are a sizing unit, just like px or em, so they can be used to size other elements as well, such as width, margin, or padding.

Browser support is pretty good, but you'll likely need a fallback, such as:

p {
    font-size: 16px;
    font-size: 4vw;
}

Check out the support statistics: http://caniuse.com/#feat=viewport-units.

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography

Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography

And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS

What Does "A" Stand for in Font: 0/0 A;