{"id":7075,"date":"2017-03-07T09:03:19","date_gmt":"2017-03-07T09:03:19","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=7075"},"modified":"2020-11-12T13:27:11","modified_gmt":"2020-11-12T13:27:11","slug":"dear-developers-im-brink-typography","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/","title":{"rendered":"Dear Developers, I&#8217;m on the Brink of Typography"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I was born in the age where people still wrote on paper for their school homework and back then I was obsessed with handwriting. Honestly, it was kind of a problem and I might have looked fairly psycho to anyone who flicked through a notebook of mine as I\u2019d test a new one out every two weeks. Computers stole this joy from me with font.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Well, kind of. My feelings towards \u2018handwriting\u2019 just sort of transferred to a digital screen and I found myself just as emotional about fonts as I was handwriting. Thankfully, in my exploration of this topic in the design world, I found there are other people who are physically offended by bad fonts.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/mikaelcho\">Mikael Cho<\/a>, Unsplash founder, wrote the awesome article <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/who-what-why\/fonts-have-feelings-too-1523564d966c#.qi8v66f9l\">Fonts Have Feelings Too<\/a>, discusses how font (and layout) can actually affect our emotions. He found a scientific <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/affect.media.mit.edu\/pdfs\/05.larson-picard.pdf\">study<\/a> by Kevin Larson which actually backed it up as well! His results found that people who were exposed to well designed layouts had higher cognitive focus, more efficient mental processes and a stronger sense of clarity.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"People exposed to well designed layouts have higher cognitive focus and a stronger sense of clarity.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As you might've guessed, today's '<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/dear-developers-the-universe-is-telling-me-to-code\/\">Dear Developers<\/a>' article is an introduction to fonts. It's part of a series of posts about my journey in learning to code using the available tools on the wonderful world wide web. So far I'm still in the early beginner stage, but it's essential to lay down the basics right but the end goal is to have my own prestige website.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I picture font as the visual embodiment of language. It\u2019s responsible for representing personality, drawing the reader\u2019s attention to the right parts of your screen, and if done badly - you\u2019re more than likely going to be driving people away.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So how do we define a font exactly? We\u2019re seeing words like \u2018typeface\u2019 and \u2018typography\u2019 being tossed around alongside it constantly, but what do they all mean.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"Looking at some discussions between designers, font is not necessarily the end result of the typeface's appearance but is the item or package that can be bought, downloaded or stored in a box. That font is usually a package for a typeface.\"<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">However, most of the time the two are used interchangeably but there is a common understanding that a typeface is particular design of type, whilst a font is a type in a particular size and weight.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You use font to generate letters in a given typeface.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I\u2019m a words person and have strong belief in the impact they can have on the reader - the visual presentation of text can completely change its meaning. Something to seriously consider when it comes to designing websites, you need to think about the message you want to bring across and choose wisely. Read between the lines people.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The basics<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Starting with the basics, the property for changing the font to one a little more fancy is <code class=\"fontSize-s language-css centered\">font-family<\/code>. Codecademy outlines that it\u2019s maybe best to limit your number of typefaces to three, you know, for design\u2019s sake.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Two of the first things to know about font in CSS; the default will always be Times New Roman and fonts you select will only be used if the reader's browser supports it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Typography (big word for the practice of typefaces) has been studied for quite a long time, which as a result has led to the classification of two types of fonts that you should know about.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Serif Fonts<\/strong>: These babies have fancy additions added to the ends of the letters. They look great in print and are also ideal for reading long copy. Examples include the likes of Georgia and Times New Roman.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sans-Serif Fonts<\/strong>: These fonts have no stylistic additions to the ends of the letters - those that are commonly used might be Arial or Helvetica.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If we were to choose Georgia as a font for the paragraphs in our CSS code it would read as the following.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">p {\r\n    font-family: Georgia; \r\n} \r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>*Note, if the font\u2019s name is made up of two words you should enclose it in speech marks.<\/em><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"One thing to remember when you\u2019re thinking about typography, or any design really, is considering accessibility.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One thing to remember when you\u2019re thinking about fonts, or any design really, is considering accessibility. Technology is constantly changing and being updated, believe it or not there are people out there who might not have the same number of fonts saved on their device as you. So if you were to select a font in your CSS codewhich isn\u2019t supported on their computer - your font will resort back to plain Times New Roman. No offence Times.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To get around this, you\u2019ll need to select a <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">fallback font<\/strong>. Like this:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">h1 {\r\n    font-family: Georgia, Times, Serif; \r\n}\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The CSS rule above explains that for each main heading the font should be Georgia, but if that font is not available, it should select Times. By adding \u2018Serif\u2019 as the last option, you are instructing the computer to use whichever Serif font might be available that has been pre-installed on the reader\u2019s computer.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There is another way to increase the variety of fonts available to your reader without having to hack into their computer. Thankfully <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a> exists, a huge directory of thousands of fonts which you can link to in your HTML document. It\u2019s quite a similar format to linking your html document to the CSS document.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Using the <code class=\"fontSize-s language-css centered\">&lt;link&gt;<\/code> element again:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">&lt;head&gt;\r\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto\" type=\"text\/css\" rel=\"stylesheet\"&gt;\r\n&lt;\/head&gt;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Then when you switch over to your CSS document to adjust fonts, you write the value in the same way you would before.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">font-family: Roboto;<\/code><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Great, so we can now switch up the fonts we\u2019re using - but there are several other elements that you can manipulate to get things the way you want them.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Size<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The first biggie, you can customise font by altering the size which can be manipulated by using the font-size property and then adding a figure followed by px. Like so:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">font-size: 35px <\/code><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whilst for some beginners, px might seem like a fairly new term, it\u2019s simply a measurement unit, similar to lbs and miles etc. It was derived from the term \u2018picture element\u2019 and basically refers to the tiny dots that make up a computer screen. You might think there is a limit to the number of pixels you can attribute to font size, but you can enter any number, however you might want your text to fit within the display screen. Think about that.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">By tech.target definitions it is a unit of programmable color on a computer display or in a computer image.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You\u2019re not limited to pixels though, these measurements also apply!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">em<\/code>: Don\u2019t worry it\u2019s pronounced just as it looks. This measurement is equal to the width of the letter \"m\" (I like to think of it as equals m). It\u2019s a relative unit of measurement and changes the size of text relative to the parent element's size of text.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">p {\r\n    font-size: 1.3em;\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">%<\/code>: Also a relative unit of measurement. As a base point, remember that the default size of text in web browsers is 16 pixels. When you use a percentage, it sets the size of text relative to this default. For example, setting the font size to 200% would be equivalent to setting it to 32px.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">p {\r\n    font-size: 200%;\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Line-height<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s important to remember when you\u2019re making these adjustments the importance of design, and how the adjustments will affect the reader. When changing the size of text, the space between sentences can reduce significantly and lead to undesirable design for reading. You want it to be legible, remember.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This can all be saved by adjusting line spacing with the property line-height. Modifying this means you are manipulating the leading of the font. Imagine each line of text has a ruled line underneath. Line-height measures from the under ruling of the first text line to the bottom of the text on the second line.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Em is usually preferred as it offers spacing relative to the size of the text on the page - but you can use pixels too!<\/em><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Word spacing and letter spacing<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You\u2019ll find that these two are less common to manipulate, but it\u2019s another method of increasing readability.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To increase\/decrease word spacing use the property word-spacing and the value is written in em measurements. Bear in mind that the default word-spacing is 0.25em, so to increase the spacing by 0.05, you\u2019d write:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">word-spacing: 0.3em;<\/code><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Letter spacing can be influenced using the letter-spacing property and using the same format.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">letter-spacing: 0.3em;<\/code><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Be bold<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To adjust the weight of the text, you can do so by using the font-weight property and the value to bold or normal.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">font-weight: bold;<\/code><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you\u2019ve linked to a google font, there\u2019ll be a font weight number within the link which can be changed. Font weights can be set to 100 (thin), 200, 300, 400 (normal weight), 500, 600, 700, 800, or 900 (bold).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To italicize use the <code class=\"fontSize-s language-css centered\">font-style<\/code> property, which holds either the <code class=\"fontSize-s language-css centered\">italic<\/code> or <code class=\"fontSize-s language-css centered\">normal<\/code> value.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Changing the case<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Regardless of how the text is written out in the html doc you can change the way text appears in css to uppercase or lowercase.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">text-transform: uppercase;<\/code><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Useful if you have a news website where every heading might be in caps<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Text-align<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Text will always align on the left, unless you tell it otherwise. The <code class=\"fontSize-s language-css centered\">text-align<\/code> property can be set to one of the following three values:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><code class=\"fontSize-s language-css centered\">left<\/code> - aligns text to the left hand side of the browser.<\/li>\n<li><code class=\"fontSize-s language-css centered\">center<\/code> - centers text.<\/li>\n<li><code class=\"fontSize-s language-css centered\">right<\/code> - aligns text to the right hand side of the browser.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There you have it, the basics of fonts. Up till now I've felt that things have been fairly straightforward, however there is this hovering hindrance that there is going to be an awful lot to remember. Which I guess is nothing repetition can't solve.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Codecademy has served me well so far, but as I move on to looking at the CSS Box Model I'm keen to explore another education tool and compare the two. That way I can throw you some analysis of several online learning systems as we go. Help you figure out the best one for you.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Follow me on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/naomfranci\">Twitter<\/a> for updates on new posts - I'm on holiday the next few weeks so excuse me whilst I reside by a beach in Cuba. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was born in the age where people still wrote on paper for their school homework and back then I was obsessed with handwriting. Honestly, it was kind of a problem and I might have looked fairly psycho to anyone who flicked through a notebook of mine as I\u2019d test a new one out every two weeks. Computers stole this&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":12,"featured_media":7096,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[504],"tags":[],"class_list":["post-7075","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dear Developers, I&#039;m on the Brink of Typography | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"I was born in the age where people still wrote on paper for their school homework and back then I was obsessed with handwriting. Honestly, it was kind of a problem and I might have looked fairly psycho to anyone who flicked through a notebook of mine as I\u2019d test a new one out every two weeks. Computers stole this... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-07T09:03:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T13:27:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/03\/babypink.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"7 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/03\/babypink.jpg\",\"width\":2000,\"height\":1500},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/\",\"name\":\"Dear Developers, I'm on the Brink of Typography | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/#primaryimage\"},\"datePublished\":\"2017-03-07T09:03:19+00:00\",\"dateModified\":\"2020-11-12T13:27:11+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\"},\"headline\":\"Dear Developers, I&#8217;m on the Brink of Typography\",\"datePublished\":\"2017-03-07T09:03:19+00:00\",\"dateModified\":\"2020-11-12T13:27:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/#primaryimage\"},\"articleSection\":\"Web Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-im-brink-typography\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\",\"name\":\"Naomi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c520343b1feb2f69cca53916bf57f5c457b3a2640d405e0f9f20a8f8e8bb7ca7?s=96&d=mm&r=g\",\"caption\":\"Naomi\"},\"description\":\"Writing for Marvel. Writing for fun. Eating everywhere, all the time.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/7075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=7075"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/7075\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/7096"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=7075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=7075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=7075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}