Dogs with butterflies ehe he he
Dogs with butterflies oho ho ho
Dogs with butterflies aha ha ha
I made a slideshow about how to create a fictional character… I got most of the information from the ‘start writing fiction’ (free) course on the OpenUniversity website and found it incredibly useful so here’s a visual version for you :)
SO YEAH the internet and scanners weren’t working yesterday so I’m updating a day late, HELLO EVERYONE
Red Bunny Tattoo
"Make all visual distinctions as subtle as possible, but still clear and effective."
Tips, tricks, and resources for the basics of good online typography. Does not apply to print. There always exceptions to the advice below.GENERAL TIPS
Align your text left.
text-align: left;The ragged right hand side tends help you keep your place while reading.
Make your leading 140%.
line-height: 140%;This makes it more legible.
User proper punctuation. Em dashes instead of hyphens. Curly quotes instead of dumb quotes. You can find the codes here.SERIFS VS. SANS SERIFS
Serifs. a.k.a Times New Roman, Georgia. Typically used for headers. Easy to read. Can stand out too much. Work better over 12pt. Most have poorly spaced lettering (which means letters may run together) and serifs tend to make letters blur together.
Sans Serifs. a.k.a Arial, Helvetica. Typically used for body text. Take up less space. Overused. Visually appealing. Tend to read better small (but blur at a larger size). Most people can read sans serif fonts faster online.CONTRAST AND FLOW
Most people skim to find the information that most interests them. So, blocks of text should be split up and differentiated. This also prevents the text from merging together and becoming overwhelming. You can do this by making consistent contrasts between sections of text like the page title, header, sub-headers, body text, etc.
You can mix and match any of the following methods for emphasizing text. However, using too many effects can clutter the document and make it confusing.
- Space. Add space before headings to separate them from body text. Use indentation (such as blockquotes) to distinguish body text, bulleted lists, quotations, or example text. Make sure padding around images and text is consistent.
- Size. Large text is used for headers. Medium for body text. Small for captions or annotations.
- Fonts. Stick to using only two fonts if possible (using more than three fonts tends to make things look cluttered). Use a serif with a sans serif for an easy visual difference. Pick something simple and pair it with something that stands out. Similarly, using too many font sizes, colors, or otherwise on a page will make them fight for the reader’s attention instead of adding emphasis. Alsomake sure you mix the right fonts together — or simply look for some pre-madecombinations.
- Colors. Faded colors indicate something is disabled, not available, has limited access, or is less important. Bright colors, meanwhile, are great for grabbing readers attention and often work better than bolding. Smaller, lighter shades of color work well together to de-emphasize text. As a rule of thumb, avoid putting colored text aside from red (which functions as an indication to stop and read something) within body text because readers will assume the colored text is a link and click it. Color is best used in section headers.
- Capitalization. Use for headers/titles but not long stretches of text (people stop reading because it strains the eyes and looks like you’re shouting). If you need to use words set in caps in the body, use small caps LIKE SO.
- Style. Text should not be underlined in body text except for links. Instead, use bolding and italics. Do not bold/italicize an entire line of text or more.
- Boxes. Boxes (such as pull quotes) can be used to frame different sections.COLOR
Contrast text with your background. A trick to see if you have enough contrast is to take a screen shot of your page and desaturate it (make it grayscale). Alternatively you can use this website.
Black/White. Computer screens have a greater black/white contrast than print so it strains the eyes to read #ffffff (white) on #000000 (black) and #000000 on #ffffff. If you have to use a black background, use a lighter black (e.g. #333333). Very light greys (e.g. #f7f7f7) are recommended as a background color while lighter blacks (e.g. #333333) make good text colors.SPACING
When floating images tweak the space. That way the text is spaced evenly around the picture like so. Padding has four values (ex. 0px). They specify whether you want to add padding to the top, right, bottom and left (in that order). So, if you only needed to add 10px worth of padding to the left of your image, you might use the code:
float: right; padding: 0px 0px 0px 10px;".RESOURCES/REFERENCES
Typographic Contrast and Flow.Methods for creating typographic contrast.
Design Principles Cheatsheet. Cheatsheet for creating a well designed website.
Colr. Load an image and get a color scheme from it.
Paletton. Color scheme designer.
Color Hexa. Gives you information, schemes, alternatives, previews, shades and tints, tones, and blindness simulators for hex colors.
Wordmark.it. Helps you pick a font by displaying a word with all the fonts installed on your computer.