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.

  • 1
    Welcome to GD.SE. If you could upload an image of your logo that would help. Have you tried looking at any tutorials yet? This is a good place to start: academy.bindtuning.com/responsive-logos-with-svg Dec 22 '17 at 17:15
  • Amazing reply, looking into SVG's now! Here's a link
    – lasmasher
    Dec 22 '17 at 17:38
  • That should be remarkably easy to convert to a SVG. Dec 22 '17 at 17:42
  • 3
    Hi lasmasher, could you edit the logo in to your question? Comments are meant to be temporary so anything important should be included in the question itself. If you want to know more about the site, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20)
    – Cai
    Dec 22 '17 at 18:27

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.

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

enter image description here

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

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

  • Why separate elements to their own layer? Simply saving the existing .ai as an SVG should be fine
    – Cai
    Dec 22 '17 at 18:26
  • For the ability to make it responsive, if he chooses so. Dec 22 '17 at 19:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.