Web fonts and Google fonts

An overview on HTML and the different types of Web fonts

HTML overview/review

HTML Tutorial: https://www.w3schools.com/html/default.asp

  • HTML defines the structure of a webpage and the meaning of the content to the browser.
  • Using semantic HTML for accessibility and SEO.
  • HTML and CSS work closely related together.

HTML+CSS +JavaScript= Front end.

  • HTML describes the content to the browser.
  • CSS Presentation layers; defines styles. (e.g: colors)
  • JavaScript Adds interactivity to the webpage.

HTML terminology and syntax.

Elements are the components that define page objects, such as paragraphs and links.

Tags are used to define these elements, using angled brackets wrapped around the tag name.

They usually come in pairs and wrap the content to give meaning to it.

The opening tag is added at the beginning of the element, and the closing tag, with the addition of a forward slash, marks the end.

There are some exceptions to this rule.
Void elements don’t have closing tags and don’t wrap any content, because they are the content. Such as for building tables.

Some void elements can be used on their own, and others require additional information. Such as <hr> and <omg> stands for each separately.


Document Object Model

The Document Object Model (DOM)represents the tree-like structure that is created when writing HTML.

Each element is an object, which makes up the document, hence the name, document object model.

Nested elements meaning the tags are written inside of other tags.

Web fonts and Google Fonts

Font Options

There are two types of fonts : Web Safe Fonts and Web Fonts.

Web fonts

Internal Font Sources

  1. Downloaded font files.
  2. Included in your project’s directory just like any other file. (CSS files, images, HTML files, etc).
  3. Declare and link to the font files using a method called @font-face.

External Font Source

  1. Third-party online services.
  2. Don’t need to download any files, or include them in your project’s directory.
  3. You can link directly to CSS and the font files which are hosted online.

There is a website named “Typekit” which need to pay the fee but can access to those high-quality fonts.

Google Fonts is a good choice for having all the fonts free.

Web safe fonts and the font family property.

The typeface is commonly referred to as a font or font family, but it’s actually a set of fonts, designed with common characteristics composed of glyphs.

Different Typefaces

  • Serif typefaces have small decorative lines.

e.g: Georgia, Rockwell, Times New Roman.

  • Sans serif typefaces have no decorative lines.

e.g: Verdana, Arial, Helvetica.

  • Cursive typefaces have a hand-lettered look.

e.g: Brush Script MT

  • Fantasy typefaces are distinct and ornamental, which is similar to script typefaces.
  • e.g: Papyrus, Copperplate
  • Monospace typefaces, each character uses the same amount of horizontal space and the same width.

e.g: Courier New.

What is Web Safe Fonts?

Web-Safe Fonts are the fonts (include Arial and Times New Roman)that are commonly preinstalled on computers or other electrical devices.

There is a resource from cssfontstack.com which lists all web-safe fonts and also categorizes them into typefaces.

In conclusion, this post introduces the overview of HTML, CSS and JavaScript’s relationship; the Web fonts and the Google fonts; different types of Typefaces fonts and Web Safe Fonts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s