What selectors are included in typography concept?

Hey Stavros!

Regarding: 1)Font Family it was mentioned in example a value "Times New Roman" in double quotes, while Times without any quotes. Has to do that we use double quotes with fonts more than 1 word? https://photos.app.goo.gl/KZaEh7FbfkYb7x5o9

No, this isn't related to font with 1 word. It's unfortunate that the example uses Times New Roman as an example because I can definitely see where it's confusing. I'll use their example to explain:

{
   font-family: "Times New Roman", Times, serif;
}

Between the quotes, it's trying to check either the User's computer for a font file called "Time New Roman", or, if you're using @font-face, it's checking to see if the proper font file has been imported. Times, without quotes, is very commonly on most computers, in some form (though that form is unique to the computer and operating system the User has). Serif and Sans-Serif are default versions of displaying the 2 most common styles of fonts and exist on every computer. If you were to read the css in the example in plain english it would say something along the lines of: Look for a custom font called "Times New Roman" and use the resource available to display it exactly as is in this file. If this resource isn't available, use the computer's default interpretation of the Times font. If it doesn't have that, use the default Serif font so we can at least try to get it close

here is a short explanation of the 3 values you see: https://css-tricks.com/almanac/properties/f/font-family/

2)Font-style if italic and obliqe values are very similar, then when do we prefer to use italic or oblique?

Such a good question. You're right, they do appear similar. But there's a common practice for this. "Italic" refers to a version of a font that has specifically been designed with an Italic version of that font. for example you could have files that would be something like arial.ttf and arial-italic.ttf (arial-italic being a fon't file that was specifically designed in Italics. Oblique is a simulation that warps the font to give it an italic look when and Italic version of the font doesn't exist. In the event that you don't have a specific Italic version of the font you're using, typically you'll always use Oblique. Otherwise you'll reference the italic version of the font :)

It's explained very well in this article: http://www.zubair.info/blog/2010/11/05/css-font-style-oblique-vs-italic.html

3)Font-size in Relative size the texts becomes responsive(bigger in a screen & smaller in smartphone screen) while Absolute size the text doesnt change size?

It is prfeferable more Relative or Absolutes sites for websites?

This one is entirely preference, and you'll gain your own for this as you gain experience. There are units of relative measure that work well for scaling, but what I will personally do most times is use the same media-sizing with min-width that resizes my page to know when to switch between absolute font sizes. For example, if I know at 300px of width that there's a break in my page and it switches to my mobile device view, then i'd make my h1 tag maybe 18px instead of 30px. But there are all kinds of measurements that you'll learn to use that do a very good job at handling sizes. How you choose to do this will come with experience, but always remember that you can't account for absolutely every scenario with screen sizes and resolutions so you have to do your best to put a cap on your sizing, especially with relative sizes, so if the screen is really big for example, you don't end up with your font-sizes being so big that it ruins your page

4)Font-variant In which case do we use small-cap attributes?

Small caps are something you should see for yourself because they're neat in the sense that they make every letter uppercase but keep the letters that weren't typed as capitals smaller so you can still see which letters are capitalized. One thing to remember though is that this still is a design no-no because most fonts that are meant to be in all-caps this way were originally designed to be this way and it may skew your letters in a way you didn't plan on. But still have a look for yourself and test ones you may like :)

5)font-stretch: Have tryed with some values but doesnt change the text, if you can have look bellow to the link

font-stretch is honestly just a way of accessed pre-loaded versions of your font that come in forms like "condensed" or "expanded". If the font you're using doesn't have these options, then you will not see a change when you try this.

6)About mozila example, nice examples :)

just didnt understand in the bellow link https://photos.app.goo.gl/Hv92iBzNSRH1LShK7

1, 2 (with colored numbers) if you could assist what is saying by stateting 1)The font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.

So basically with this, when you use "font" as a single word, you have to specify the size and the family AT LEAST, but you can also add an other attributes. This is usually only used in the examples you specify in your following question.

for example:

{
   font: 20px "Arial", helvetica, sans-serif;
}

Here is a great link that explain what this looks like: https://www.w3schools.com/cssref/pr_font_font.asp

It's also very tricky because there's a very specific order that you have to put these in in order to make it work.

You'll find that common practice is to do them the way you've been doing, where you specify "font-family", "font-size", etc. You have way more control this way. There are more common examples of times when you'll prefer to use single words instead of the specifics (ie. "background" but that is because it's not nearly as strict and does you a lot of favours)

2)If font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar.

little not understand excatly what is want to say,

7)@font-face it is used for importing new fonts as mentioned, Is there any site for free downloading various font styles?

Yesss!! Font Squirrel is an awesome one if you're looking for ttf's anf otf's, but make sure the one you like has proper permissions for use before you use it on a commercial website (for your own fun then you don't have to worry so much). But honestly.. Google Fonts has become extremely good and, unlike @font-face, it formulates a link you simply place in the header of your index file that you can reference. AND it lets you decide which styles and weights you want with your fonts and even suggest good pairings!! HOW COOL IS THAT?!

https://www.fontsquirrel.com/

https://fonts.google.com/

I really hope this helps!

Great questions man!

-Jake