Portfolio - Fonts&Colors

Choosing fonts

Introduction

Choosing the right font is hugely important. A font supports the message you want to deliver to the reader in 2 ways. On the one hand, a smoothly readable font is necessary to let the content of your site affect the surfer properly. On the other hand, the chosen font accentuates who your site's target audience is.

For a broad target audience, always choose sans serif fonts. These can be common sans serif fonts such as Arial or Verdana, but thanks to Google Fonts there is a much larger selection of sans serif webfonts with which you can make the difference.

On a site you use no more than 2 different fonts. For the majority of texts you choose a sans serif font that is easy to read. Only for the titles you can consider choosing a slightly more artistic font, possibly even a font with serifs or a font that looks handwritten. This is often done on sites where luxury goods are offered.

Wide audience

Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reiciendis, odit explicabo sunt ex hic autem consequuntur, quidem tempore excepturi perferendis, illo sequi aperiam fuga fugit. Aliquid ex tempore repellendus obcaecati unde voluptas laborum, perferendis vitae odio a, quia laboriosam quo nesciunt! Cupiditate earum voluptas adipisci neque eum eveniet commodi!

Title font : Readex Pro 700 bold

Text font : Readex Pro 300 light

Elegance

Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reiciendis, odit explicabo sunt ex hic autem consequuntur, quidem tempore excepturi perferendis, illo sequi aperiam fuga fugit. Aliquid ex tempore repellendus obcaecati unde voluptas laborum, perferendis vitae odio a, quia laboriosam quo nesciunt! Cupiditate earum voluptas adipisci neque eum eveniet commodi!

Title font : Shalimar

Text font : Dancing script

Hip

Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reiciendis, odit explicabo sunt ex hic autem consequuntur, quidem tempore excepturi perferendis, illo sequi aperiam fuga fugit. Aliquid ex tempore repellendus obcaecati unde voluptas laborum, perferendis vitae odio a, quia laboriosam quo nesciunt! Cupiditate earum voluptas adipisci neque eum eveniet commodi!

Title font : Bebas Neue

Text font : Oswald

Choosing colors

Introduction

Choosing the right color scheme is necessary to support the "call to action" of the website. A website for the general public should have neutral colors, rather dull, but acceptable to everyone worldwide - regardless of origin, language or culture.

Those who want to emphasize that everything on the site is cheap opt for accents in bright red, bright yellow and/or bright blue. These colors stimulate our brain and motivate impulse purchases.

If you want to emphasize timeless elegance and convince (older, richer) customers to opt for luxury products with a higher price tag, it's best to use subtle shades of gray.

If you want to appeal to a young audience in particular, you have to find a connection with the world of that audience. For children it can be very colorful, for teenagers (and hipsters) a negative design with a black background.

Choosing colors is an art in itself, you have to learn which colors go together. 1 golden tip: colors that occur together in nature, always match. That's why color schemes are often made based on a photo. Thanks to the photo, the client immediately sees what atmosphere the colors evoke. You do not need special software or a camera for this. Adobe will help you for free at color.adobe.com.

Neurtal

Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reiciendis, odit explicabo sunt ex hic autem consequuntur, quidem tempore excepturi perferendis, illo sequi aperiam fuga fugit. Aliquid ex tempore repellendus obcaecati unde voluptas laborum, perferendis vitae odio a, quia laboriosam quo nesciunt! Cupiditate earum voluptas adipisci neque eum eveniet commodi!

Color 1 : border : #988792

Color 2 : title bg : #b2bbc5

Color 3 : text bg : #eadbab

Cheap

Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reiciendis, odit explicabo sunt ex hic autem consequuntur, quidem tempore excepturi perferendis, illo sequi aperiam fuga fugit. Aliquid ex tempore repellendus obcaecati unde voluptas laborum, perferendis vitae odio a, quia laboriosam quo nesciunt! Cupiditate earum voluptas adipisci neque eum eveniet commodi!

Color 1 : border : #FF2700

Color 2 : title bg : #3ECCFF

Color 3 : text bg : #3ECCFF

Luxurious

Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reiciendis, odit explicabo sunt ex hic autem consequuntur, quidem tempore excepturi perferendis, illo sequi aperiam fuga fugit. Aliquid ex tempore repellendus obcaecati unde voluptas laborum, perferendis vitae odio a, quia laboriosam quo nesciunt! Cupiditate earum voluptas adipisci neque eum eveniet commodi!

Color 1 : title bg : #2C3E50

Color 2 : title : white

Color 3 : text : #2C3E50

Young

Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reiciendis, odit explicabo sunt ex hic autem consequuntur, quidem tempore excepturi perferendis, illo sequi aperiam fuga fugit. Aliquid ex tempore repellendus obcaecati unde voluptas laborum, perferendis vitae odio a, quia laboriosam quo nesciunt! Cupiditate earum voluptas adipisci neque eum eveniet commodi!

Color 1 :

Color 2 :

Color 3 :

based on photo

Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel reiciendis, odit explicabo sunt ex hic autem consequuntur, quidem tempore excepturi perferendis, illo sequi aperiam fuga fugit. Aliquid ex tempore repellendus obcaecati unde voluptas laborum, perferendis vitae odio a, quia laboriosam quo nesciunt! Cupiditate earum voluptas adipisci neque eum eveniet commodi!

Color 1 : border : #125907

Color 2 : title bg : #1BBF15;

Color 3 : text bg : white

Color 4 : title and text : #0D2D8C

the base photo
This is the photo on what the colors are based on

Back to top