PROJECT 1.2 WEB FOR KIDS FONTS, TEXT TYPES & GIVING ORDERS AND INSTRUCTIONS

What you will learn in part 1 – 4:

1. How to use a dictionary (practice for your exams);2. Language to talk about fonts;3. Word guessing as a reading strategy (learning to read effectively);4. How to write a summary by making a table (working with text types);5. How to write an informative text and to use the present simple to talk about facts

(grammar and text types);6. How to use the imperative for instructions and orders (grammar and text types).

Part 1 Reading and understanding

Link to the article or got to page 3. https://www.noupe.com/essentials/icons-fonts/mixing-multiple-fonts.html

Read the article “7 Rules for Mixing Multiple Fonts in Good Web Design”. Read the 7 tips carefully. Choose 2 tips and translate them into Dutch BUT NOT TIP 7.

Part 2 Language acquisition for fonts

Look at the words in the table. Translate them into Dutch. Sometimes there is no Dutch translation. Write down the English word in the

translation column. Use internet to help you find the words.

English word Translation TIP 1 SCALE AND PROPORTION Scale proportionshapeidenticalsimilaremphasisTIP 2 COLOUR AND STYLEStyleHueSaturation levelmeshTo clashobliqueUnderlining /to underline

marijke lampaert 1

TIP 3 PRIORITY AND EMPHASIS OF DIFFERENT FONTSTo draw attention to somethingmultipleTo increasean increaseTo decreasea decreaseShades (niet schaduw!!!)TIP 4 AVOID ANYTHING TOO SIMILARtrickyStrange & not quite rightVariation End-resultTIP 5 KEEP BODY TEXT READABLEBody textreadabletypographyNavigation part of the sightto navigateHeaders on the siteHeaders TIP 6 DON’T OVERLOOK DIFFERENT FONT STYLESDecoration sizeTo eliminate

IF YOU WANT TO READ THE ARTICLE FROM THE WEBSITE ON PAPER, LOOK AT THE NEXT PAGE!!!

marijke lampaert 2

7 Rules for Mixing Multiple Fonts in Good Web Design

September 7th, 2009 Noupe Editorial Team Essentials, Icons & Fonts 30

Typography can be one of the most creatively rewarding parts of web design, but it can also be one of the most frustrating. Working with just one or two fonts can be challenging enough for most web designers, yet some still insist on using three, four, seven, or even more fonts in their designs. Some people excel at creating sites with complicated typography, while others fail miserably. Read on to find out tricks to creating fantastic website designs with complicated type, as well as some great examples of sites that get it right, and those that get it wrong.

1. Pay attention to scale and proportion.

marijke lampaert 3

Multiple fonts work best together when they have similar proportion and scale. For example, Georgia and Verdana have similar shapes, even though one is serif and one is sans serif. The same could be said for Times New Roman and Arial Narrow. Look at specific characters in each font to see how similar they are, as well as entire words.

Fonts don’t necessarily have to be identical in scale and proportion. What you want to look for are either fonts that are very, very similar, or fonts that are very, very different. Fonts that are “kind of the same” are generally going to look strangest when placed near each other. Fonts that are very similar are going to appear to have the same weight on screen in most cases, while fonts that are very different can more easily be played against one another to give emphasis to specific parts of the site.

2. Unify fonts with color or style.

If you throw up six different fonts on your site, with ten different colors, and four different styles, you’re probably just going to give your visitors a headache (if they stick around that long). While you don’t necessarily have to only use one color or one style, you need to be much more careful in how you use them.

marijke lampaert 4

Advertisement

As far as colors go, try to stick to colors either in the same hue or saturation level. You want the colors to mesh, rather than clash.

You have a bit more leeway with font styles, but make sure that the styles you choose make sense with the existing weight and emphasis of the particular fonts you’ve chosen. You can make a heavier font oblique (italic) to de-emphasize it’s weight a bit, or add a strong tag to a lighter-weight font to bring it more in-line with the heavier fonts on your page. Underlining can emphasize both light and heavy fonts without making either appear heavier than they already are.

3. Pay attention to priority and emphasis of different fonts.

This has been touched on a bit already, but the priority and emphasis that different fonts convey naturally has to be taken into account. Some fonts are going to draw more attention than others. It’s one reason using multiple fonts is both incredibly fun and very hard to get right.

You can compensate for heavier or lighter fonts in a few ways. Increasing or decreasing the size is the most obvious. Adding styles and font decorations

marijke lampaert 5

(oblique, strong, underline, etc.) can also emphasize and even help de-emphasize most fonts.

Changing the color of a font can help, too. If your typography is mostly black, adding in shades of gray to de-emphasize certain parts can work really well. In fact, putting certain type in gray can work even if your design is more colorful (to really unify things, make sure the gray has just a hint of one of the main colors in your other typography).

4. Avoid anything too similar.

Similar fonts are tricky. Using something like Georgia and Garamond right near each other, for example, doesn’t really do much and can end up making one or both fonts look a little off. A lot of non-designer folks might not really see the differences between the fonts and think they just look strange—not quite right. The same can be said for fonts like Verdana and Tahoma or Arial and Helvetica. Try for a bit more variation for the best end-result.

5. Keep body text readable.

While playing around with funky typography can work really well in navigation, headers, and other parts of your site, large chunks of body copy just don’t work well with multiple typefaces. Stick to one, preferably site-wide. Pick a font that’s easy to read and web safe while also being similar in proportion and weight to the other fonts on your site.

marijke lampaert 6

6. Don’t overlook different font styles.

We’ve talked about how using different styles and font decorations can change the priority and importance of different typographic elements. But one thing many designers overlook is using multiple styles, sizes, and decorations to achieve the look of mixed typography while still working entirely with web-safe fonts. This technique is also great for designers who are just starting to experiment with web typography, as it eliminates many of the common issues with proportion and scale between different typefaces. Mix italic, bold, small caps, all caps and other styles within the same fonts to get the look of mixed typefaces without the headaches.

marijke lampaert 7

marijke lampaert 8

7. Trust your instincts.

This is probably the most important thing on this list. Whenever you’re designing anything, you should be sure to take a step back from it often and look at the big picture. If something doesn’t look right or feel right to you, cut it.

It’s no different with typography. If a certain font just doesn’t seem to be working, you’ll have to cut something. In these cases, you have two options: you can cut that font and find another one that works better, or you can scrap all your other fonts and find ones that work better with the one you’re having trouble with. What you do depends on which fonts you’re more attached to.

THE END

______________________________________

marijke lampaert 9

Part 3: categories DO & DON’T and writing a summary

For every tip: make a do and a don’t. Because you are giving instructions, you must use the imperative. Read about the imperative. Put the dos and don’ts in the table below. Making a table is a good way of making a

summary (samenvatting).

The imperative

When to use it: for giving orders and instructions

EXAMPLE: Use a nice font use = imperativeDon’t use an ugly font don’t use = imperative

For examples of dos and don’ts watch the clip: https://www.youtube.com/watch?v=hqezbib5qpQ

Now fill in the table with your dos and don’ts for all the tips in the article “7 Rules for Mixing Multiple Fonts in Good Web Design”

TIP DO DON’T1234567

marijke lampaert 10

Part 4 writing an informative text

Write a text in which you give information about web safety for kids and teenagers. Find your information about web safety for kids in the YouTube clip.Find out how to write an informative text.

Go to the document “Bossy, nice or helpful, Different ways to give information” to find out how to write an informative text.

Look at the present simple to talk about facts: the information for parents. Watch the YouTube clip to find out more about web safety for kids and teenagers: https://www.youtube.com/watch?v=mmf5OJ6KM9Q https://www.youtube.com/watch?v=yrln8nyVBLU https://www.youtube.com/watch?v=hqezbib5qpQ Write down important information in a short article about web safety for kids so that

parents learn more about how to keep their children safe online. Remember: you have already written instructions using the imperative and do and

don’t. You now have to write a short piece with information. Use proper sentences, paragraphs and punctuation.

The present simple for facts

Some ideas to present your facts

marijke lampaert 11

Now you are ready to write your informative text about web safety for kids and teenagers.

marijke lampaert 12