CSS Fonts
What is default amount in word spacing
0.25em
When setting typefaces on a web page, keep the following points in mind:
1) The font specified in a stylesheet must be installed on a user's computer in order for that font to display when a user visit the web page. 2) The default typeface for all most browsers is Times New Roman. You may be familiar with this typeface if you have ever used a formatted word processor. 3) It's a good practice to limit the number of typefaces used on a web page to 2 or 3. 4) When the name of a typeface consists of more than one word, it must be enclosed in double quotes.
Line heights can take one of several values:
1.) A unitless number, such as 1.2. This number is an absolute value that will compute the line height as a ratio of the font size. 2.) A number specified by unit, such as 12px. This number can be any valid CSS unit, such as pixels, percents, ems, or rems.
Valid values are multiples of
100 within this range such as 200 or 500.
font-weight scale ranging from
100-900
<head> <link href="https://fonts.googleapis.com/css?family=Droid+Serif|Playfair+Display" type="text/css" rel="stylesheet"> </head> What does this example show?
2. Multiple linked fonts, using the Droid Serif and Playfair Display
<head> <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i|Playfair+Display:400,700,900i" rel="stylesheet"> </head> what does this example show?
3. Multiple linked fonts, along with weights and styles. Here Droid Serif has font weights of 400, 700, and 700i, while Playfair Display has font weights of 400, 700, and 900i
What number for font-weight is for normal
300
What number for font-weight is for light
400
What number for font-weight is for bold
700
How can we import fonts without <link> tag in html
@font-face property.
<head> <link href="https://fonts.googleapis.com/css?family=Droid+Serif" type="text/css" rel="stylesheet"> </head> What does this example show?
A single linked font, using Droid Serif
Examples of Sans Serif
Arial or Helvetica
Since text can be directly typed in all uppercase or lowercase within an HTML file, what is the point of a CSS rule that allows you to format letter case?
Depending on the type of content a web page displays, it may make sense to always style a specific element in all uppercase or lowercase letters. For example, a website that reports breaking news may decide to format all <h1> heading elements such that they always appear in all uppercase, as in the example above. It would also avoid uppercase text in the HTML file, which could make code difficult to read.
header { font-weight: 800; } footer { font-weight: 200; } What does the code do?
Here, the header would appear as a deep bold, while the footer would appear rather light.
@font-face { font-family: "Roboto"; src: url(fonts/Roboto.woff2) format('woff2'), url(fonts/Roboto.woff) format('woff'), url(fonts/Roboto.tff) format('truetype'); } What do you notice?
Here, you'll notice: The main difference is the use of a relative filepath instead of a web URL. We add a format for each file to specify which font to use. Different browsers support different font types, so providing multiple font file options will support more browsers.
h1 { font-family: Garamond; } What does this code do?
In the example above, the font family for all main heading elements has been set to Garamond.
h1 { word-spacing: 0.3em; } What does this example do?
In the example above, the word spacing is set to 0.3em, which represents an increase of only .05em in word spacing.
To load fonts with the @font-face property:
Instead of using the font's link in the HTML document, enter the link into the URL bar in the browser. The browser will load the CSS rules. You will need to focus on the rules that are directly labeled as /* latin */. Some of the latin rules are on separate lines. You will need each of these. Copy each of the CSS rules labeled latin, and paste the rules from the browser to the top of style.css.
p { font-weight: bold; } What does this code do?
It bolds our p element
p { font-weight: normal; } What does this code do?
It sets our p element to normal
What happens when a stylesheet requires a font that is not installed on a user's computer?
Most computers have a small set of typefaces pre-installed.
Do all fonts can be assigned a numeric font-weight?
No, some fonts can't
How to put a fallback fonts in CSS
Put your wanted fonts behind the font you want to put. Like this: h1 { font-family: "Garamond", "Times", serif; }
h1 { text-transform: uppercase; } What does this code do?
The code in the example above formats all <h1> elements to appear in uppercase, regardless of the case used for the heading within the HTML code.
Tracking
The technical term for adjusting the spacing between letters
Examples of small set of typefaces pre-installed
Times New Roman and sans-serif fonts like Arial.
Examples of serif fonts
Times New Roman, Georgia
The fonts specified after Garamond are the fallback fonts
Times, serif
h1 { font-family: "Garamond", "Times", serif; } What is the rule of this?
Use the Garamond font for all <h1> elements on the web page. If Garamond is not available, use the Times font. If Garamond and Times are not available, use any serif font pre-installed on the user's computer.
h1 { font-family: "Courier New"; } Why is the value is in double-quotes?
When the name of a typeface consists of more than one word, it must be enclosed in double quotes
How do we link our new google fonts code in html?
When we have the link to the font of our choice, we can add the font to the <head> section of the HTML document, using the <link> tag and the href.
Can font-weight be assigned a number
Yes, font-weight can be assigned a number
if we change the font size, what would happen to line-height?
a unitless line-height would automatically readjust, whereas the pixel value would remain static.
What does google fonts give us?
a way to retrieve the link for a single font, multiple fonts, or multiple fonts with the font-weight and font-style properties.
Styling text to make page content what?
accessible and engaging can significantly improve user experience.
It's not common to increase the spacing between words, but it may help what?
enhance the readability of bolded or enlarged text. Note, again, that the preferred unit is ems.
pre-installed fonts are also called
fallback fonts
What's another free font website instead of google
font squirrel
How can we change the typeface of text on your web page,
font-family property
How can you italicize text
font-style property
How can we bold the text in CSS
font-weight property
Sans-Serif
fonts that do not have extra details on the ends of each letter. Instead, letters have straight, flat edges
Serif
fonts that have extra details on the ends of each letter
How can we get fonts for free
google fonts
As of now .woff2 appears to be the way of the future, due to what?
greatly reduced file sizes and improved performance, but many browsers still don't support it.
example of letter-spacing on back
h1 { letter-spacing: 0.3em; }
Example of text-align property on the back
h1 { text-align: right; }
word space example on the back
h1 { word-spacing: 0.3em; }
font style example on the back
h3 { font-style: italic; }
What is the link for google fonts
https://fonts.google.com/
The italic value causes text to appear in what?
italics
The text-align property can be set to one of the following three values:
left - aligns text to the left hand side of the browser. center - centers text. right - aligns text to the right hand side of the browser.
How can we increase the letters spacing in CSS
letter-spacing property
How can we modifiy the leading of text.
line-height
We can modify our @font-face rule to use
local font files as well
With the number of fonts available with modern typography, it is unrealistic to expect users to have all fonts installed on their computers. New fonts are often centralized in directories made available for public use. What is that called?
non-user fonts.
What is the default for font-weight
normal
The font-style property also has a
normal value which is the default.
example of line-height on the back
p { line-height: 1.4; }
We can use the line-height property to set how what?
tall we want the line containing our text to be, regardless of the height of the text.
How we can move, or align, text in CSS
text-align property.
How can the text can also be styled to appear in either all uppercase or lowercase
text-transform property
How can we put a lowercase in text-transform
text-transform: lowercase;
Typography
the art of arranging text on a page
When text is styled to appear larger what happens
the vertical spacing between lines of text can decrease, creating text that is difficult to read, particularly in paragraphs.
where should @font-face be put and why
to the top of the stylesheet for the font to load correctly in the project.
The phrase "type of font" refers to the technical term
typeface, or font family.
If we want to bold text in a web page,
we can set the font-weight to bold.
If we want to ensure that text is not bold
we can set the font-weight to normal.
We can supply the user (@font-face)
with the desired font family and host it along with our site instead of depending on a different site.
How can we increase the word spacing in CSS
word-spacing property
