Reports from our 2016 Meetings
Reports from our 2016 Meetings
Typography is the science and art of letters. Every font has a designer or artist that create it. People like Eric Gill the creator of Gill Sans, the famous font used in those iconic British railway posters. Most fonts have a copyright and require a fee for use however there are lots of free fonts available. To start we had a run thorough two articles: "A 20 minute Intro to Typography Basics" and "A Comprehensive Guide to Typography Basics" We started with the basic terminology of what makes up the structure of a typeface. So we looked at the anatomy of typeface to understand the main elements in a font.
A few terms we leant. Typeface is the font family, font is the single letter face in that family. Most type comes in two categories, Serf and san-serf. Serif's are the little end pieces on the top and bottom of a letter and san-serif has no serifs. Other type faces are monospace and script faces. We discussed structural items such as kerning, the space between letters, rag, the uneven end of a paragraph of text. Measure of the width of a paragraph of text. The length affects the readability. Leading now more commonly called line space and widows and orphans the single word left at the beginning or end of a paragraph. Brian McDonald spoke about his experience's in linotyping at the Herald and gave us some insight into what typography was like in the days of linotype. Typography is also art, so we discuss the design aspects, considering ideas like using pared fonts for emphasis and or contrast. Using hierarchy, such things as font weight, italics and colour.
After the break we ran though three brief videos from a course I had just purchased. They covered the basics of typography using css. First up we looked at the four main font commands, font family, font size, font style and font weight. Next we looked at Web safe fonts and web fonts. Web safe fonts are those font most computers have installed. As an example I tried to use Helvetia only to find it's not a windows font. Web fonts however are those you can deliver from paid font servers or free ones such as Google fonts. The video showed us a site called cssfontstack a very useful tool to find out if your chosen font is available and to help you create, font families. Creating a font family is easy, simply click on the icon on the right of the chosen font and the css for the family is pasted to your clipboard, e.g. "font-family: "Goudy Old Style",Garamond,"Big Caslon","Times New Roman",serif" The "font-family" is the range of typefaces the browser can fall back on.
Last we looked at units of measure comparing PX to EM to REM as used for font sizing. This was also enlightening. PX of course is a fixed size while EM takes its size from the default font size set but the css or the browser, and inherits the parent setting. For example a paragraph with an EM size set to 1.5 would be 1.5 the size of the default but a nested paragraph would increased in size by 3 as it took the 1.5 size of the paragraph and increased it by 1.5. REM on the other hand takes it default size from the html element and if not from the browser, however the REM will only go up by the set size. In the case of the nested paragraph a REM only goes up by 1.5 without any inheritance problem. The video then looked at "unitless numbers". Using the example of a line height of 1.5; using a unitless number gave us a line height 1.5 the font size of each element in the div, while using an EM the value is tired to the font size of the whole div. Using unitless gives you more flexibility. The final setting was VW or viewport width. Using this measure we get a size based on the actual size of the device being used.
I have found the introduction tutotial on YouTube.
Steve South
Sig Leader