Typography
Typography is what language looks like.
-Ellen Lupton
Terminology
Headline: primary message, most likely the largest piece of text used
Subhead: additional context to the headline, not the smallest font on the page
Body/Paragraph: where the meat of the content lives. This font will be easy to read and smaller than the headline and subhead.
Subhead: additional context to the headline, not the smallest font on the page
Body/Paragraph: where the meat of the content lives. This font will be easy to read and smaller than the headline and subhead.
Font Classifications
Serif
Serif can be used for headlines and paragraphs.
Sans serif
Sans serif can be used for headlines and paragraphs.
Display
Display fonts are more artistic than sans serif or serif and are only used for headlines as a way to draw the eye to the main sections.
How to Choose A Font
Rule of thumb: Rarely use more than two different fonts, especially if you don’t have a lot of design experience. Additionally, use a limited number of font sizes to maintain consistency and font hierarchy.
It’s very easy to overdo it. Simplicity is key. Use a hierarchy to guide the user through the content and stick to it. In order to determine if you’ve chosen the correct hierarchy, squint eyes tight and look at your text to see if there’s enough differentiation that you can easily identify headings, subheadings, and body text – if not, go back and check sizing.
Think back to the three words you chose...
Does your font match the theme of your event?
Color
I believe that color affects people’s moods.
- Lilly Pulitzer
Color is difficult. Don’t let it fool you. Choosing color is very hard. It isn’t easy to mix and match to create the right mood. Keep it simple. As you choose your colors, stick to choosing just three. You want to have enough color on your website that it’s visually pleasing, but not so much that it’s overwhelming.
Terminology
Primary Color: The most prominent color within a design.
Secondary Color: A contrasting color. It is used to draw attention and drive primary actions on the page, such as click here or read more.
Accent Color: Color that is there to add splash of color as needed.
Secondary Color: A contrasting color. It is used to draw attention and drive primary actions on the page, such as click here or read more.
Accent Color: Color that is there to add splash of color as needed.
Color and Their Meanings
RED
ORANGE
YELLOW
GREEN
BLUE
PURPLE
Imagery
The whole point of taking pictures is so that you don’t have to explain things with words.
- Elliot Erwitt
Without images, your website would be all text. But what kind of imagery is right for your event? There are three main types: photos, illustrations, and icons.
Photos
Photos are the most relatable because when we can see people or situations, we can relate to them. There are multiple ways to use photos. You can use a photo background, which would be in the hero section of the page (the large space at the top of a website that is often a giant picture). You can also use inline photos, which exist on the page, but don’t fill the entire page.
Illustrations
Illustrations can be used to help explain complex scenarios. If your event is a conference about a highly technical product or industry, you might want to use an illustration. They help represent abstract concepts in a way that photos can’t.
Icons
Icons are illustrations in their simplest form. They are often used to represent a single idea and can add a lot to the page, visually. Icons are used to indicate contact us, social media, and more.
Icons represent a single idea.