Logo, Colors and Fonts: Bringing Brand Identity to Your Website

When adapting a ready-made website to a brand, most clients ask in the first meeting: will it look like us, or like everyone else? The answer depends on how accurately the brand identity is carried onto the site. The good part is that it doesn't take many elements. Get the logo, colours, font and photo style right, and the same base becomes a completely different brand.

What brand identity means on the web

Print identity guidelines are usually made for business cards, letterheads and signage. The web raises other questions: how does the logo look on a dark background? What colour are the buttons? How large are headings on a phone?

If you have brand guidelines, great. If not, that's fine; clarifying the items below is enough to get the site started. At Kodyva we follow the same order when adapting ready-made sites; our article on ready-made websites explains how the branding happens.

Logo file formats

The most common delay we run into is the logo file. The client sends a 300-pixel JPEG over WhatsApp, and it neither looks sharp on retina screens nor sits well on a dark background.

SVG is ideal for the web. It is vector-based, sharp at any size, and small. Ask whoever designed your logo for the AI, EPS, PDF or SVG source file. If one of those exists, producing an SVG is easy.

Variations you will need:

• Horizontal logo (for the site header)
• Icon only (for the favicon and mobile menu)
• Light and dark background versions

The favicon needs a few sizes too: 32 pixels for the browser tab, 180 for phone home screens, 512 for some platforms. These are produced from the source file; all you need to provide is a good source.

Colour palette and contrast

Brand guidelines usually define one main colour and one or two secondary colours. The web also needs text colour, background colour, link colour and colours for error and success messages.

Contrast is the issue we meet most. When a business with a light yellow or light turquoise brand colour wants text or button labels in that colour on white, readability drops. Accessibility standards (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large headings. Free contrast checkers measure it in seconds once you enter both colour codes.

The fix is rarely giving up the brand colour. Using the light colour as a background accent, icon or line while keeping text dark, or using a darker shade on buttons, usually does the job. Our accessible website article covers other criteria beyond contrast.

Send colour codes in HEX format (for example #1E3A8A). Pantone or CMYK values defined for print can look different on screen.

Choosing fonts, and speed

If you have a corporate typeface, first check its web licence. Using a font licensed for desktop only on a website can breach the licence. Fonts from libraries such as Google Fonts are mostly open-licensed and can be used on the web; still, check the licence of the font you choose.

Second, Turkish characters. Letters like ğ, ş, ı and İ are missing from some fonts, and the browser fills them in with another font. The result is odd-looking letters in the middle of a heading. Before choosing, type a test phrase full of Turkish letters into the font preview.

Third, speed. Each weight (light, regular, bold, italic) is a separate file. Loading six weights slows the page. For most sites two or three are enough: regular body text, bold headings and maybe a medium weight. Fonts usually load fastest in WOFF2 format, served from the site's own server.

Using two fonts, one for headings and one for body text, is common. Adding a third rarely works out.

Visual language and photos

Even with the right logo and colours, a site full of stock photos still looks like everyone else's. Photo style is what completes the identity.

Photos of your own team, premises and work usually beat stock images. Even without a professional shoot, you can keep things consistent: the same lighting, similar angles, similar colour temperature. Fifteen phone photos taken by a window in daylight look more coherent than fifteen unrelated stock images. If employees or customers are clearly recognisable in a photo, get their permission before publishing.

If you need stock, choose images licensed for commercial use, pick one style and stick to it. The same goes for icons: don't mix outline and filled icon sets.

Before adaptation starts, we suggest having these ready: a vector logo, HEX colour codes, the font name and licence if you have one, and at least 10 to 15 of your own photos. With those in hand, adaptation moves much faster.