Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

learn about CSS text properties
learn about CSS font properties
learn how to use downloadable fonts

Warning

Fog of details ahead!

Do not 'learn off'.
Look-up when needed.

Text Formatting

We can set the color of text:


p {
    color: blue;
}

There are text properties, e.g.:


p {
    letter-spacing: 1em;
    line-height: 90%;
    text-align: right;
    text-indent: 1em;
    text-transform: uppercase;
    word-spacing: 2em;
}

There are text decoration properties, e.g.:


p {
    text-decoration: underline;
    text-shadow: 2px 1px gray;
}

Multicolumn Text

A large quantity of text might look better if the text is laid out in columns, like in a newspaper.

In CSS, on the container, specify column-width, e.g.:
column-width: 20em;
You get as many 20em columns as will fit.

In fact, you can specify either how many columns you want (column-count) or the column-width, as above.

column-width: 20em: you get as many 20em columns as will fit; any remaining space is shared between the columns, so they end up being at least 20em (unless there was room for only one column, in which case it might be less than 20em).

Note how specifying the column-width instead of the number adapts to the width of the window (see responsive web design).

It is tempting to put a height onto the container. But, if you do, then content may overflow, resulting in a horizontal scrollbar.

The content doesn't have to be just text: there can be images, headings, and other elements.

Multicolumn Text Example


<body>
    <header>
        <h1>Header</h1>
    </header>
    <main>
        <h1>Heading</h1>
        <p>
            Lots of text
        </p>
        <figure>
            <img src="..." alt="..." />
            <figcaption>
                Caption
            </figcaption>
        </figure>
        <p>
            Lots more text.
        </p>
    </main>
    <footer>
        Footer
    </footer>
</body>


main {
    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid gray;
}
    
main h1 {
    column-span: all;
}
    
figure {
    break-inside: avoid;
}
    
img {
    max-width: 100%;
}

Hyphenation

What can we do if a word is too long for its column?

Either:
- CSS: set hyphens: manual on the container;
- HTML: put  inside the word at possible places where it can be hyphenated.
Or:
- CSS: set hyphens: auto on the container;
- HTML: make sure the container has (or inherits) a lang attribute.

Font Properties

There are various font properties, e.g.


p {
    font-family: "Times New Roman";
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
}

There is also a shorthand — but it's unintuitive so avoid it!


p {
    font: italic bold 16px "Times New Roman";
}

It requires that you give things in a certain order and some can be omitted and some cannot. Size and family are obligatory. family must come last. Omitted optional values (including some not on this slide like line-height, which would be specified after the font size, separated by a slash)) wll not inherit values from their parent element, but reset to their initial state.

Font Sizes

In CSS, we can specify the font-size property, e.g.:
```
header {
    font-size: 2em;
}
```
There are two types of values used for font sizes:
- absolute font sizes; and
- relative font sizes.

Absolute Font Sizes

These values do not depend on any others.

Pixels	e.g. `16px`
Points = (1/72th inch)	e.g. `12pt`

On the web, we might use px occasionally;
otherwise, avoid absolute font sizes.

Relative Font Sizes

These values depend on other values,
e.g. in some cases, the parent's value.

em	e.g. `2em`	relative to parent's font size
rem (root em)	e.g. `2rem`	relative to root's font size

You can also use percentages, e.g. 80%, which are relative to the parent's font size, but this isn't common with font sizes.

Relative Sizes Example


…
<section>
    <h2>Did you know?</h2>
    <p>
        Badgers are nocturnal.
    <p>
    …
</section>
…


:root {
    font-size: 16px;
}
    
section {  
    font-size: 2em; 
}
    
h2 {
    font-size: 1.5em; 
}
    
p {
    font-size: 1.5rem;
}

The text in the h2 is 48px and the text in the p is 24px.

Advice for Font Size

For your root font, use pixels;
Then use em or rem for all other rules.


:root {
    font-size: 16px;
}

h1 {
    font-size: 2em;
}
    
section h2 {
    font-size: 1.5em;
}
    
section section h3 {
    font-size: 1.17em;
}
    
section section section h4 {
    font-size: 1em;
}

Fonts

Some fonts are proportional;
others are monospace.

Some fonts have serifs;
others are sans-serif.

Fonts on the Web

You do not know what fonts will be available on your user's machine:
- different platforms come with different fonts installed;
- many software packages install further fonts.

Font Families

Use the font-family property but give it multiple values (a font stack) to cover multiple platforms, e.g.:
```
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
```
First give the ideal font, then some good alternatives, then some common alternatives, then a generic.
The generics are: serif, sans-serif, cursive, fantasy and monospace.

Downloadable Fonts

CSS has downloadable fonts.
Use the @font-face @rule, e.g.


@font-face {
    font-family: MuseoSans;
    src: url('fonts/museosans-500-webfont.woff2') format('woff2');
}
    
body {
    font-family: MuseoSans, Verdana, Geneva, Tahoma, sans-serif;
}

The browser requests the museosans-500-webfont.woff2 file from the URL.

This assumes your server has a folder called fonts and, in that folder, there is a file called museosans-500-webfont.woff2, otherwise the GET request results in a 404 and the browser wil move on to the next font in the font-stack.

But where do you get fonts from?

You can't necessarily just find them on the web and put them on your server. Just like images and video, there may be issues of copyright.

You could buy a font from someone. But, even then, you must be careful. Even buying a copy may not entitle you to put it on your server — since then you're effectively giving it away. So, when you buy it, you'd need to make sure your contract with the person you buy it off allows you to put it on the web.

The @font-face command must come before using the font. But, it is not like @import, which *must* come at the start of the stylesheet. The @font-face command has lots of additional components, not shown on the slide.

You can have multiple url(...)/format(...)s to fetch different formats. E.g.

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
}

WOFF / WOFF2 (Web Open Font Format). Created for the web; often load faster than others because compressed; and WOFF2 has even better compression; these are where all browsers are headed.

SVG / SVGZ (Scalable Vector Graphics). A vector re-creation of a font; hence smaller file, ideal for mobile; with SVGZ being a zipped version.

EOT (Embedded Open Type). A proprietary standard supported only by IE.

OTF / TTF (OpenType Font and TrueType Font). Early formats that were not specifically for the web; in fact in both they come with print and screen versions in same file; TTF came first (Apple, Microsoft); then OTF (Microsoft, Adobe); and OTF has more features for ligatures (ff) and stuff.

Choosing Fonts

Think about copyright!

Think about readability!

Free Fonts!

You can download font files from
https://fontlibrary.org/
https://fonts.google.com/
https://www.freefaces.gallery/

FOUT and FOIT

These fonts must be fetched by clients before they can be used.
Browsers have adopted two approaches:

Flash Of Unstyled Text (FOUT)	Flash Of Invisible Text (FOIT)
the user first sees one of the fallback fonts then, after a delay, the font changes to the downloaded one	the user first sees no text then, after a delay, the text appears using the downloaded font

Delays cause judder, sometimes called jank.

Be aware, if using downloadable fonts, there is a performance hit. You've introduced another GET request, and what you're fetching can be very large.

With the Google fonts, there is an even bigger performance hit. The import fetches the appropriate font-face definitons(s), and then the font is downloaded. But the advantage is that Google will host lots of versions and will fetch the best for your platform, which increases cross-browser compatibility.

A new CSS property, font-display, will allow you to choose between them. https://css-tricks.com/font-display-masses/

Fonts, like images but unlike CSS and JavaScript, are render non-blocking resources.

In the case of FOIT, if the font takes too long, then the browser might think the load has failed and so use a font from later in the stack. If the font eventually does download, you may even end up with a FOIT followed by a FOUT before seeing the correct font. (This seems more likely these days since Chrome has reduced the time it will wait, meaning the FOIT lasts less but the FOUT becomes more likely.) Firefox and Opera have gone for FOUT. Chrome and Safari have gone for FOIT. Browsers seem to prefer FOIT these days. But with FOUT, the user at least can start consuming your content immediately. Both approaches may have juddering due to differences in weights and heights. Some gurus prefer FOUT. If you want FOUT, then for browsers thata are giving you FOIT you write a JavaScript font loader that simulates the FOUT behaviour. (Not too hard if you use the loadCC JavaScript function, it seems.) Or you use the new CSS property, if supported.

All of this is perhaps less important when you consider that, if cached, then all this affects a client only the first time it fetches a page from the site.

font-display is a new CSS property that is available as an experimental feature that first shipped in Chrome 49 and is now also in Opera and Opera for Android. Using it, we can control how fonts display in much the same way that we can with JavaScript-based solutions, only now through a convenient CSS one-liner!

font-display is used inside of a @font-face declaration for your custom fonts. This property accepts a number of values:

auto: The default value. The typical browser font loading behavior will take place, which is to hide typefaces that use custom fonts, and then display the affected text when fonts finish loading. (This beg typical in Chrome. What will it mean in Firefox and Opera?)
swap: The fallback text is shown immediately until the custom font loads. In most cases, this is what we're after. # JavaScript-driven font loading solutions almost always aim to emulate this setting.
fallback: This is sort of a compromise between auto and swap. There will be a short period of time (100ms according to Google) that text styled with custom fonts will be invisible. The unstyled text will then appear (if the custom font hasn't already loaded by this point.) Once the font loads, the text is styled appropriately.
optional: Operates exactly like fallback in that the affected text will initially be invisible for a short period of time, and then transition to a fallback font. But the optional setting gives the browser freedom to decide whether or not a font should even be used, and this behavior hinges on the user's connection speed. On slow connections, you can expect that custom fonts may not load at all if this setting is used.