text and links
Web Typography, Part I
All text in an html file should be hierarchically tagged for optimal SEO.
Text on the web is comprised of structural tags that function as block-level elements by default (p, h1–h6 tags). And, it's comprised of semantic tags that offer different forms of emphasis within the structural tags (strong, em, underline, etc.).
ways that type happens on the web
- web-safe fonts
- embedding services
- @font-face embedding
- text in images
spacing Remember: typing html is not the same as typesetting. White space often collapses. This can be controlled with line breaks and other types of spacing; for example by using values for padding and margins, in particular.
sizing Type, images and spaces can be precisely designated with these options: pixels (16px); percentages (200%); or ems (1.5em)
Links
the link tag Links are hypertext anchors; therefore, their tag is defined with <a> </a> . Links are an example of html elements where the attribute of the tag needs a value identified in quotation marks, such as: <a href=“http://www.htmldog.com”> html Dog </a> , where href defines the destination of the link (href stands for hypertext reference). Images can be linked as well as text.
targeting links Links can point to many different things, as indicated in the list of common secnarios below:
- A link to another web site or specific page within a web site (a url)
- A link to another page within the current site (a page)
- A link to a specific part of a page (a page anchor)
- A link to an email address
- A link to a file on the web (such as a downloadable pdf)
linking from within dreamweaver The way you type the link in the “link” field of the property inspector partially determines the kind of link you want. For example:
- 1) If the link field in the property inspector has an html file name in it, such as file_name.htm, it will cause the link to go to another page within that site.
- 2) If the link field in the property inspector has a name with a "#" in front of it, such as #typeFoundries, it will cause the link to jump to a spot with an anchor named “typeFoundries” within the same page.
- 3) If the link field in the property inspector has a full URL in it, such as http://www.htmldog.com, it will cause the link to go to the html dog web site in the same browser window.
- 4) If the link field in the property inspector has a full URL in it (again, such as http://www.htmldog.com), AND the “target” field in the property inspector pulled down to _blank, it will cause the link to go to the html dog web site in a separate browser window.
- the link itself: a:link
- when it has been visited: a:visited
- when you hover over it: a:hover
- and when it is actively being clicked upon: a:active
links and css styling There are four basic states for links that you can define with css rules — the appearance of:
Link states can be styled on a per-element basis. That is, you can specify links styles differently depending on the parent element within which they occur, as in: h2 a:link, h2 a:visited, h2 a:hover and h2 a:active.
Link Demo
Click here to view a sample page with a variety of link types to examine.
Web Typography, Part II
web-safe fonts These are fonts that are available to viewers’ browsers because the fonts are on their systems/devices by default. A short list of fonts meet the criteria of being available on numerous devices. Easy to specify in css.
non web-safe fonts These would be fonts available through various css3 techniques that enable the specification and display of a much wider range of typefaces on web-based devices. These are relatively easy to specify in css, and along with sister html techniques, depend on the source/rules of use of the fonts. So, the techniques vary here.
option 1: web font embedding services (free) Google Web Fonts — Enables the simple specification and use of fonts using a head tag element and css rule(s). Does not use the @font-face rule.
option 2: @font-face embedding services (free & paid) Emigré ($), H&FJ ($), Typotheque ($), Typekit ($), etc.; Font Squirrel (free) — Depending on the source of the font files, you either reach to a font host’s server through a head tag element and css @font-face rule(s); or, you push fonts to your web server (include font files in a ‘fonts’ folder in you root folder), and call them up to display on the site with css @font-face rule(s). Often have to pay for a license; sometimes do not have to.
CSS3 @font-face Sample Code
The example below illustrates the principles of what takes place using the CSS3 @font-face rule. Actual code varies based on the source of the font files or font license(s) that you use. This is a simple example:
@font-face {
font-family: bttf_font;
src: local(bttf_font), url(‘fonts/bttf.ttf’) format(‘opentype’);
}
h1 {
font-family:bttf_font;
font-size:32px;
}
Web Typography Demo
Click here to view a sample page with a variety of methods shown for how to display web typography. A web typ starter exercise can be downloaded from the bottom of the demo page.