main.append(addSubHeader("Typography for the Web"));
main.append(addParagraph("I think that for many people starting out with Web Development, Typography is something that tends to be ignored with most people sp you will often find that they stick to the default fonts. However, Typography is a very big subject. For example, I ran a search today (5 August 2021) on LinkedIn Learning using Typography as my search term and I found 129 courses, 3,639 videos, 11 audio recordings and 6 learning paths and these are mainly relating to web design, CSS and grahpic design."));
main.append(addParagraph("It is important to remember, as these results would seem to corroborate, that Typography is a bit more than choosing a font, changing it's style, size, colour and so on which all might fall under CSS as a topic. Equally important is the design aspect. Changing your font, changing the style, changing the size, these are all important for making your site look better, but when people visit your site, you want to illicit some kind of response from them and this is where good design is important and why Typography is an important part of web design (as well as graphic design)."));
main.append(addParagraph("When starting a web project, it's usually a good idea to make some design decisions up-front and one of these decisions will be the typeface (or font). Different typefaces are more suitable for different situations."));
main.append(addImageWithCaption("./images/font-sample1.png","Times New Roman"));
main.append(addParagraph("Often used in legal documents, it is often thought of as being traditional and formal."));
main.append(addParagraph("Much more frivolous, generally considered to be fun, casual, childlike."));
main.append(addParagraph("Typefaces are arranged in fives caregories."));
main.append(addInsetBulletList(["Script - handwritten appearance, these can be difficult to read if the font-size or small or in a large block of text.","Decorative - not usually used other than for headlines or little bits of text intended to decoare the page.","Monospace - non-proportional, each character occupies the same amount of space so they are used when vertical alignment is important so they are often used for code samples.","Serif - tends to be viewed as traditional and more formal, but they have become more popular.","Sans Serif - tend to be viewd as quite contemporary and modern, they are usually a little easier to read than serif fonts, particularly with certain background/font colour combinations."]));
main.append(addParagraph("The last two, serif and sans-serif are the general-pupose fonts and these are the types you will use most of the time, particularly for large pieces of text. Regardless of what the current trends are, the deciding factor in respect to whether you have selected the right font will always be how it looks in the page."));
main.append(addSubHeader("Changing the Font-Family"));
main.append(addParagraph("The font-family property is used to set a typeface and it looks like this"));
main.append(addInsetCodeListing([".times {","£font-family: \"Times New Roman\", \"Gotham\", \"Courier New\";","}"]));
main.append(addParagraph("It is important to remember that a user browsing the web may not have all of the fonts that you use installed on their machines and their are a couple of ways to resolve an issue like this. The first and most common is demonstrated in the example shown above. Rather than specifying a single font, we are providing a comma-separated list and the browser on a user's machine will use the first font in that list that is available to it. Remember that browsers are usually pretty good at fixing mistakes in your HTML and if none of the fonts in the list are available to it, it will use a default font."));
main.append(addParagraph("This is reassuring in the sense that we can be fairly sure that a user is going to be able to read the text, but it is not very good from a design standpoint. This is particularly true if you are using decorative or script fonts, because a default may spoil the carefully designed look of your page and may just not look nice."));
main.append(addParagraph("Something that can help you here is the notion of Web Safe Fonts abnd you can get a list of these on the <a href=\"https://www.w3schools.com/cssref/css_websafe_fonts.asp\">W3 Schools site</a>. These are fonts that are installed on the majority of computers but bear in mind that some users may not have them or may not have them installed. This was a really critical issue in the early days of web design but, it's not so much of an issue now unless you are using an unusual or more decorative font that may not be installed by default."));
main.append(addParagraph("There are a couple of points you need to be aware of when specifying a font in this way. If the font-name contain any characters other than letters or a hyphen, those character (and that includes numbers) will have to be escaped. If the name contains a space, it doesn't have to be wrapped in single or double quotes but this is recommended. If you do wrap your font-name up in quotes, you don't have to escape any characters so this is possibly an easier option if you have characters in there that would otherwise need to be escaped."));
main.append(addParagraph("Note, however, that if you are using a generic font name such as serif or sans-serif, this must always be declared without quotes."));
main.append(addSubHeader("font-weight and font-style"));
main.append(addParagraph("For font-weight, the value ranges from 100 which is the lightest to 900 which is the darkest."));
main.append(addImageWithCaption("./images/table1.png","The font weight values."));
main.append(addParagraph("The key word values for font-weight are"));
main.append(addImageWithCaption("./images/table2.png","The font weight keywords"));
main.append(addParagraph("As you can see from this, only two of the keyword values have exact matches with the numeric values (normal equates to 400 and bold equates to 700). You can also see that it is easier to get the precise weighting you want using the numeric values, but you should also remember that not every font will include all nine weights and if you specify a weight that does not exist, the browser will use the closest match. Typically, a browser will use a default value of 400 or normal for body text and a default of 700 or bold for headings."));
main.append(addParagraph("Lighter and bolder don't have fixed values but are usually lighter or bolder than the inherited font-weight. For example, if a font-weight of between 100 and 500 is inherited, lighter will normally be equivalent to specifying a weight og 100. A full list of the values that either takes is shown below."));
main.append(addImageWithCaption("./images/table3.png","The font weights when lighter and bolder are applied, based on the inherited weight."));
main.append(addParagraph("There are also three possible font-styles as follows:"));
main.append(addSubHeader("Web Fonts with @font-face"));
main.append(addParagraph("A web font is a font that is hosted on your web site and sent to the user just like other resources such as images or media files. To see how this works, I have downloaded a font called fjord1 from <a href=\"https://www.creativebloq.com/typography/free-web-fonts-1131610\">creativebloq.com</a> which was created by Viktoriya Grabowska (check out her cool website <a href=\"https://viktoriyagrabowska.com/\">here)</a> and is distributed under the <a href=\"../resources/OFL.txt\" target=\"_blank\">Open Font Licence</a>."));
main.append(addParagraph("The first step in using it is to declare it in CSS like this."));
main.append(addParagraph("By convention, the specified font-family name here is the same as the name of the font but you can give it any name you like. It has to be declared in the CSS before you can use it. Note, also that enclosing the url in quotes (single or double) is optional but if it includes using certain characters such as spaces, commas, quotes etc, in which case you must either escape these characters or wrap them in quotes. You can provide as many src values as you need, separated by commas and this may mean alternative sources in case one is unavailable or other fonts to use as a backup in case the specified font is completely unavailable."));
main.append(addParagraph("You may also need to specify different file formats. The one used in the demonstration here is a tff font, most modern browsers offer good support for woff and woff2 and there are others are well. Support for a particular format may vary between browsers and older browsers in paricular may require specific formats."));
main.append(addParagraph("Here are a couple of examples of the font in use - the text is the course description for this course, <a href=\"https://www.linkedin.com/learning/css-essential-training-3\"></a> by Christina Truong on LinkedIn Learning."));
main.append(addImageWithCaption("./images/font-sample3.png","Normal weight - no styling"));
main.append(addImageWithCaption("./images/font-sample4.png","Bold - no styling"));
main.append(addParagraph("There is some useful information on fonts in general at <a href=\"https://www.fontsquirrel.com/\">font-squirrel.com</a> which is a source for free fonts, but it also provides a <a href=\"\">font-generator</a>."));
main.append(addParagraph("More information on support for older browers can be found at <a href=\"https://css-tricks.com/snippets/css/using-font-face/\">css-tricks.com</a>. The article is by Chris Coyler and was published in 2009, but it is regularly updated. At time of writing, the last update was 27 July 2021 which is 10 days ago."));
main.append(addParagraph("Also, bear in mind the fact that web fonts, even if they are free, nay be subject to some sort of licence or requirement to give credit to the creator, so you should check out any licence information or readme file that comes with the font."));
main.append(addSubHeader("Web Fonts with Google Fonts"));
main.append(addParagraph("Another option which doesn't involve downloading a font and including it with your web resources is to use an online service. An example of this <a href=\"https://fonts.adobe.com/\">Adobe Fonts</a> which is \"free\" for subscribers, although I'm not sure if this includes all subscribers. That means that you need to log in to the fonts page in order to start using it and I have to say that my first impression is that it is not particularly straightforward to use. Another concern I would have is that I might create a website with these fonts and find that my site can no longer use them if I stop my subscription, so I would recommend having a backup font specified. Actually, it's probably a good idea to do that anyway because that would avoid any problems with the service being down and so on."));
main.append(addParagraph("The first step seems to be to import the fonts into your HTML file with a statement such as"));
main.append(addParagraph("Reference is the name of the CSS file. It seems that you need to start a project and if you then select the project, you should then see the link which you can copy and paste into your HTML page somewhere in the head. You can subsequently login to Adobe Fonts, click the 'My Adobe Fonts' button and then click on the Web Projects tab which shows you a list of your projects with the project id and the link."));
main.append(addParagraph("I have added a rule in the style sheet as follows:"));
main.append(addImageWithCaption("./images/font-sample7.png","The Omnium font from Adobe."));
main.append(addParagraph("There are other paid services and also some free services. A good example of the latter is <a href=\"https://fonts.google.com/\">Google Fonts</a>. We are going to use Google Fonts to enhance our resume and we know (or at least Christina does) what fonts we will be using so we will start with the first, which is a decorative font called caveat and we will do a quick search for that. In the course video, Christina was able to select \"Add to Collections\" but I don't see that option. I do see am option to download selected fonts and you can download as many variants (such as different font-weights as are required). THere is a lost a copy of the links you want to add to use the fonts as web fonts and there is an option to get an import statement which you would need if you are using the fonts in web email (Adobe has this option too)."));
main.append(addParagraph("The links for caveat are:"));
main.append(addParagraph("I've added these to the next version of the resume file so they should be ready to use when needed. In the video, Christina clicked on 'My Collection' and was able to see the links there."));
main.append(addParagraph("Another useful feature of Google Fonts is a list of popular pairings so we can see a list of fonts that are commonly used with caveat and we will select one of these for use in the resume and that is montserrat. Adding this second font, because I have them both selected has just added the original link so the last line becomes"));
main.append(addSubHeader("Poject: Google Fonts"));
main.append(addParagraph("The emthod for adding these fonts to your project is pretty much as described above, but there are a couple of other points I'd like to make here. First of all, there is a customization option in Google Fonrs so you can select different weights and so on. Secondly, bear in mind that if you select every possible varianr of a font, when a user loads the page, they will download all the versions and this can have an impact on perfromance. You will usually only need one or two versions, probably something like normal and bold. Having said that, we have already seen at the end of the previous section that the embedded code includes a list of the weights. So if you find that you need an additional variant, or a different variant, it should be easy enough to just edit that line so you don't need to go back to Google Fonts to do that. However, if you have any problems, changing the selected variants in Google Fonts will regenerate the embedded code."));
main.append(addParagraph("In the course videos, Christina used a Customize link to see the different variants for each font and I didn't see that option. Also, when selecting different variants, there was a Load Time indicator that showed Fast, Moderate or Slow, depending on the number of fonts that had been selected."));
main.append(addParagraph("If you are using Google Fonts for a site, you will probably place the embedded link in the head of your index page, before your CSS links. You may also want to set body to the Google font. Thie effectively makes it your base or default font so everything in the site is going to be able to inherit it and you can then change fonts as required if you have elements you want to look different. In this case, I am just using them for the resume so I am putting the link in the head of the resume file and I will add a style rule to the body."));
main.append(addParagraph("If we look at the resume now, we can see that we have the Montserrat font in place and we can also see that the headings, which normally default to a font-weight of bold (which has a value of 700) are using the nearest in terms of the variants we are using which is 600."));
main.append(addParagraph("However, we want to use our other Google font for the headings (<h1> and <h2>) so we will add a rule for that."));
main.append(addParagraph("Again, we can check that in the browser and we can see that this has also now changed. The headings are now displayed with the caveat font, but they also now look a lot smaller and this is because the default sizes can be very different when using different fonts. We can see this in <a href=\"resumes/resume8.html\" target=\"_blank\">resume8.html</a>, but we will fix the sizes later on."));
main.append(addParagraph("It is very common to see font-sizes expressed in pixels and these values must always be whoel nymbers. If you are using a relative unit such as ems, you can use decimal values. As an aside, ems are actually named after the letter m becuase thus gas traditionally been used to measure widths in typography."));
main.append(addParagraph("As an em is a relative unit, it is calculated in relation to the font-size of its nearest ancestor. If there is no font-size specified by an ancestor element, then ems are calculated relative to the browsers default font size. Obviously, if you change the font-size in an element, any font-size that is measured in ems relative to that element will also change size."));
main.append(addParagraph("Similar to ems is rems (or root ems) where the font-size is specified relative to the fint-size of the root element rather than just an ancestor. That's not to say that the root element is not an ancestory, it is an ancestor to all other elements and it is and it certainly can be the element by which a font-size specified in ems is calculated. The difference is that where ems are used, the element looks to the nearest ancestor where a font-size is specified, so that will be the root if no other ancestor has a font-size specified. Where rems are used the element will only be calculated relative to the font-size of the root element, regardless of whether there are any more direct ancestors with a specified font-size."));
main.append(addParagraph("This means that if you are using rems for a child element and you change the font-size on, its parent element, this will not affect the child's font-size, unless the parent element is also the root element. Conversely, if you change a font-size on the root element, this will have a knock-on effect for any child element that specifies the font-size in rems."));
main.append(addParagraph("Relative font-sizes can be tricky, especially for beginners who find that working with pixel measurements is more straightforward. You really need a bit more planning to use relative sizes effectively. There are some situations where using relative size can be a little easier to work with. An example of this is where you are using a responsive design and you want to specify proportioinately smaller font-sizes for smaller screens."));
main.append(addParagraph("Another advantage of using relative measures is that if you want to change all the font-sizes on your site, if you are using rems, you only need to change your font-size in the root element, and all other font-sizes will change in the same propoortion. For example, let's say you have a font-size of 10 pixels for the root element, <p> elements have a font size of 1 rem and <h2> elements have a size of 2 rems. This means your paragraphs will have a font-size of 10 pixels and your headings will have a size of 20 pixels. Let's say you want to increase these sizes by 50%, you just need to change the root's font-size to 15 pixels and this will give you paragraphs with a size of 15 pixels and headings with a size of 20 pixels. This also means that headings will always be double the size (in pixels) of paragraphs."));
main.append(addParagraph("I would assume that if you specify a font-size for the root element, you can then use media queries to set fomt-sizes for, let's say 1 rem and 2 rems for paragraphs and headings on a small screen, and perhaps 1.5 ems and 3 ems for medium sized screens and then 2 rems and 4 rems for large screens. If you then change the font-size for root, the sizes for all of these screen sizes will automatically change."));
main.append(addParagraph("There are other units you can use and you can find more information regarding these and also realting to browser support in the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-size\">MDN Web Docs</a>."));
main.append(addSubHeader("Font Shorthand"));
main.append(addParagraph("The font shorthand property is shorthand (similar to the shorthand for border we saw earlier) and it can cover the following inidividual font properties."));
main.append(addParagraph("It is usually quicker and easier, where possible, to use the shorthand version of a property, but the font shorthand version has some rules which may be confusing for beginners. In general, the individual properties are optional but the font shorthand must include declarations for the font-size and the font-family. In addition, font-style, font-variant and font-weight must all be declared before font-size and the font-variant can only be delared with the normal or small-caps value. To specify the line-height, you append a forward-slash and the value immediately after the font-size."));
main.append(addParagraph("More information on the font shorthand and other aspects of fonts in CSS can be found in the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\">MDN Web Docs</a>."));
main.append(addSubHeader("text-decoration, text-align and line-height"));
main.append(addParagraph("We saw an example of text decoration earlier where we set the property to none on links in order to remove the usual underline from them. Actually, text-decoration is also a shorthand syntax for text-decoration-line, text-decoration-color, text-decoration-thickness and line-style, so we could also set other properties for text-decoration at the same time. Bear in mind that it doesn't make sense to do that when you have set the value for text-decoration to none because this removes any decoration (as we saw with the underlining on links). There are lots of options with this, although you may find that you only use it to remove the underline from links. If you do want to use, it's probably the sort of property you would want to look up whenever you use it, at least as a beginner, so it is worth checking out the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration\">MDN Web Doces</a>."));
main.append(addParagraph("The text-align property is used to align content within a block element and the property can either be added to an element directly, or it can be inherited from a parent or other ancestor element."));
main.append(addParagraph("Line height defines the line spacing in your text and can use a variety of values including length values, unitless numbers and percentages."));
main.append(addParagraph("You can set the text-align property to right, left or center. For example, you might want to centre a heading and you can do that with a rule such as"));
main.append(addParagraph("You cna also add the property to a parent element if you want it to be inherited by other elements as well. You can also use the text-align property to justify text which may give your text more of a look of a newsprint type of layout."));
main.append(addParagraph("The line-height property can be a bit problematic because if it is smaller than the font-size, the lines will overlap. Let's say you have a font-size of 16px, you could add a line height of, say, 20 pixels to give a little bit of space between the lines and make the text more readable. The problem with this is that if you later change the font-size without changing the line-height, you might run into problems such as overlapping text."));
main.append(addParagraph("Line height can also be expressed as a percentage or a unitless value. For most purposes a value of 125 to 150% or between 1.25 and 1.5 will be fine (this page, as I write it, is using a line-height value of 1.25). You can then change the font-size and the line-height will change in the same proportion."));
main.append(addParagraph("We'll now go back to the resume and add a few more styles to our fonts. The default is usually 16 pixels, but you can use whatever size looks best. For the resume, we will set a base font-size of 15 pixels, so we will add that to the body selector with a line height of 1.5."));
main.append(addParagraph("I mentioned the fact that the main heading looked a little small with the font chosen (Montserrat) so we will increase this up to 100 pixels. Looking at the resume with these changes, there seems to be too much space areound the main heading, we will look at that in a moment."));
main.append(addParagraph("With the increased size, we don't really need our headings to be bold, so we will remove this from both the <h1> and <h2> elements."));
main.append(addParagraph("One of the consequences of increasing the font-size is that the margins around the headings are also a little larger. We want to reduce the space between the headings in particular and we will do that by removing the margins. We have already removed these from our <h2> elements so we want to do the same for the <h1>elements and to do that, we will remove the rule and put it in the shared declaration block."));
main.append(addParagraph("Removing the margin like this might not always work, depending on your choice of font. If you find that it doesn't, you can add a little bit of a margin back to achieve the desired result."));
main.append(addParagraph("The font-size will also have an impact on the line height. Rember that we are using a line height of 1.5 so it is going to be 50% larger than the fint-size so with the headings, in particular, this is adding quite a bit of space. The effect is more pronounced for the <element> where we have a font-size of 100 pixels (and therefore a line height of 150 pixels) so we will override the line-height inherited from the <body> with a value of 1."));
main.append(addParagraph("Depending on several factors such as the font-chosen and the way you want the page to look, you might decide that a different line-height should be used. The bottom line is that there is no correct or incorrect value and you may need to experiment with the font-settings (including line-height, font-size and margin to get the effect that works best for you. In my experience, it is often not easy yo tell which settings work the best without seeing the results and ultimately, the decision on which settings to use really just comes down to which give you the best look."));
main.append(addParagraph("The version of the resume with these changes to the typography can be seen in <a href=\"resumes/resume8.html\">resume8.html</a>."));
