Mobile app version of vmapp.org
Login or Join
Alves566

: Recreate my text-based vector logo in HTML/CSS I know that this could also be posted for the coders, however I figured a lot of you stepped in each other's backyards from time to time so

@Alves566

Posted in: #Logo #WebFonts #WebsiteDesign

I know that this could also be posted for the coders, however I figured a lot of you stepped in each other's backyards from time to time so here goes:

I'm using the Twentyseventeen WordPress theme and my logo just isn't near as sharp as the webfonts of the same font family right next to it.

I want to take my logo which is currently in .EPS, .PDF and .AI format and recreate it using Webfonts, HTML & CSS. One font is stacked over the other and the kerning on the second font is a bit stretched to match the length of the first font above it.

I have rights to both desktop and web fonts for both of the fonts in my logo.

Is it possible to recreate a text based logo in strictly HTML/CSS to match the designer's kernings, etc.?

Thanks, I know I butchered the hell out of this question.

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Alves566

1 Comments

Sorted by latest first Latest Oldest Best

 

@Angie364

I'd recommend using an SVG. They are ubiquitous and will offer robust performance across platforms.

You will need Illustrator but Sketch or Inkscape would work too.


Create a new document with the WEB (RGB) profile and adjust it's size to fit your logo.
Place your logo and begin to separate each individual element onto it's own layer and label them.
Save out your SVG and a PNG copy as a fallback





Import the SVG to the html file, using <img> tag.

<html>
<img src="underground-sign.svg" alt="underground-sign"/>
</html>

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme