NAME: Pamela Jessiman
STUDENT NUMBER: #6
Web Design Chapter 5:
Typography and Images
DIRECTIONS:
1. Read and answer questions: Read the chapter in the WEB DESIGN textbook, and then fill in the
answers to the questions below. Change the font color of your answers to RED (or another
color of your choice) so the answers are easily distinguished from the questions for grading.
2. Save as PDF: When you have completed this assignment, save this file as a WORD file, and
then save as a PDF file in your WD folder (press F12 for SAVE AS, then choose PDF from
the SAVE AS TYPE dropdown list).
NOTE: You will upload your PDF file, share with your instructor, and link to your index page when you have
learned to do this.
1. Definitions: Briefly define the following terms:
Typography
1. Typography - is the art and technique of arranging type to make written languagemost appealing to
learning and recognition.
2. Typeface - typography, a typeface (also known as font family) is a set of one or more fonts each
composed of glyphs that share common design features.
3. type style - Variations in the thickness and stroke, such as light, bold, italic, that lend flexibility
and emphasis in the appearance of characters ..
4. font - a font is a particular size, weight and style of a typeface. Eachfont was a matched set of
type, one piece (called a "sort") for each glyph,
5. serif font - A small decorative line added as embellishment to the basic form of a character. Typefaces
are often described as being serif or sans serif (without serifs).
6. sans serif font - sans-serif fonts are often used for headlines rather than for body text. The
conventional wisdom holds that serifs help guide the eye along the lines.
7. embedded font - Embedding a font is the technique of bundling a document and the fonts it contains
into a file for transmission to another computer.
absolute font size - Absolute sizes define the size of the font according to the sizes defined in the ...
Percentages specify an absolute font size relative to the parent element's font ..(Font size does not
fluctuate with screen size.)
9. relative font size -Relative sizes define the size of the font relative to the parent element. Relative
fontsare either the same size as the parent, larger, or smaller.(Change to the size of the computer
screen.)
10. em unit - a unit for measuring the width of printed matter, equal to the height of the type size being used.
8.
Graphics
20
1. megapixel - a unit of graphic resolution equivalent to one million or (strictly) 1,048,576 (2 ) pixels.
2. TIFF - is a computer file format for storing raster graphics images, popular among graphic artists, the
publishing industry, and both amateur and professional photographers in general. The format was
originally created by the company Aldus for use in desktop publishing.
3. raster image - computer graphics, a raster graphics image is a dot matrix data structure representing a
generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display
medium.
4. vector image - a computer image that is stored in memory as lines rather than a series of dots, allowing it
to be rotated or proportionally scaled. Compare bit-mapped image. Examples from the web
for vector graphics Expand. Geographic data can be stored in a vectorgraphics or a raster graphics
format.
5. GIF - The Graphics Interchange Format (better known by its acronym GIF; /ˈdʒɪf/ or /ˈɡɪf/) is a
bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread
Page 1
1.
1.
1.
2.
3.
usage on the World Wide Web due to its wide support and portability.
6. interlaced GIF - interlaced GIF. A GIF image that gradually comes into focus. Instead of displaying a line
at a time from top to bottom, lines at various intervals throughout the frame are displayed until all the lines
are filled in.
7. transparent GIF -A transparent GIF (Graphics Interchange Format) is an image file that has one color
assigned to be "transparent" so that the assigned color will be replaced by the browser's background color,
whatever it may be.
Antialiasing - (in computer graphics) a technique used to add greater realism to a digital image by
smoothing jagged edges on curved lines and diagonals .
7. JPEG - Joint Photographic Experts Group- JPEG format is best for compressing photographicimages. So
if you see a large, colorful image on the Web, it is most likely a JPEG file. While JPEG images can
contain colorful, high-resolution image data, it is a lossy format, which means some quality is lost when
the image is compressed.
PNG - is a file format for image compression that, in time, is expected to replace the Graphics
Interchange Format (GIF) that is widely used on today's Internet.
What is PNG (Portable Network Graphics
8. lossless compression - The definition of Lossless defined and explained in simple language.
... Lossless compression reduces a file's size with no loss of quality
9. lossy compression Lossy compression is generally used for video and sound, where a certain amount of information loss will
not be detected by most users. The JPEG image file, commonly used for photographs and other complex still
images on the Web, is an image that haslossy compression.
2. List the 5 generic font types and briefly describe each type.
a. Serif
b. Sans-serif
c. Cursive
d. Fantasy
e. Monospace
3. In general, what is the most preferred font family type for web page text? Why?
Sans-serif is easier to read on the web.
4. List at least 3 serif fonts and 3 sans serif fonts. (Hint: Look in the font box on the ribbon in Word).
Change each font name into its font type (for example, Bodoni MT Black).
Serif fonts:
2.
3.
1. Baskerville
2. Bodoni
3. Bookman Old Style
Sans serif fonts:
1. Helvetica
2. Arial Black
3. Franklin Gothic
5. Monospaced/Proportional Fonts:
Some fonts, such as Courier New are known as monospace fonts, because each character takes exactly
the same width on the screen or on the page. This is as opposed to proportional fonts, such as Times New
Roman, in which some characters are wider than others (for example, the upper-case W is much wider than
say the lower-case letter, i in Times New Roman) .
Monospaced fonts are often used with numeric columns of figures so that the numbers align correctly.
Notice in the table that follows that the Times New Roman values do not align very well, but the Courier
Page 2
New values align as they should:
Courier New
111.67
808.90
4,234.56
Bernard Condensed
111.67
808.90
4,234.56
Lucida Console
111.67
808.90
4,234.56
Agency FB
111.67
808.90
4,234.56
4. Copy the three numbers in the Courier New column above and paste them into the Lucida Console
column. Change the column font of the values to Lucida Console.
a) Is Lucida Console a monospace or proportional font? A monospace font
b) Is Lucida Console a serif or sans serif font? Family of Sans serif font
5. Copy the numbers into the Agency FB column and change their font to Agency FB.
a) Is Agency FB a monospaced or proportional font? A proportional font
b) Is Agency FB a serif or sans serif font? A serif font
6. Cursive (or “Script”) Fonts: Another type of font are cursive or script fonts, that have a script or handwritten appearance, such as Comic Sans and Bradley Hand ITC. Copy the numbers into the last
column, find a script font in the Word font list, and change the numbers to the script font. Label the
font at the top of the column.
6. morgueFile: Page 137 introduces the morgueFile site. Go to morgueFile.com to answer these questions:
a. Why this site is called morgueFile? Place to keep post production materials.
b. How much does it cost to use images from morgueFile? Depends on the image.
c. What is morgueFile QUEST? It’s a photo challenge. They send you a request to take a picture of a
certain composition.
d. Return to the HOME PAGE and click on the FREE PHOTOS link, then look for the RECENT link and click on
it. Click and download your favorite recent image and insert here:
e. Return to the HOME PAGE and lick on the CLASSROOM link. List at least three free graphical image
lessons offered:
1. Composition and Impact
2. Aperture and Shutter speed
3. The lens
f.
Go to the top of the page and look for the SEARCH box. Search and find images that you like for the following
items and insert the images in the row given:
1. Chicago skyline
Page 3
2. Surfer
3. Grizzly bear
4. Football stadium
5. Image of your choice
Page 4