Photoshop Question posted in
The official user guide can be found here.

How to insert an image so it appears amongst paragraph text without messing up line-height etc – Photoshop

Hello I have a client who’s logo is RP but the ‘R’ is facing the other way. I have been asked if it is possible to display ‘RP’ every time it is mentioned on the website to appear the same as her logo, instead of ‘RP’.

My initial thoughts this was not possible but I have used font-awesome icons in a similar way in titles, but never using an image. This is an example of what I mean using photoshop.

Image Link: http://imageshack.com/a/img537/4474/guj5uS.jpg

I am very wary using this method at all as it must be made responsive etc and I honestly think it is more hassle than it’s worth but maybe I’m missing an easy css trick…

Your help would be much appreciated.

Many Thanks

Tags:

2

Answers


  1. 0

    If you can contact with a graphic designer then the designer can make a svg image for you with “RP”. That svg you can easily turn to a font using online font converter if you dont have professional software.

    And insert the costum font you have created on your website just like inserting font awesome and/or all other icon fonts.

    Is as easy as this … nothing else that needs to be done, but always if the “RP” is in svg format (if you have a graphic designer at your disposal, or if your client can give you the RP logo in svg format).

    Login or Signup to reply.
  2. 0

    The simplest approach is to use an image and scale it with CSS to suitable size. For best quality in scaled size, you would create the image in SVG format (there are online tools for converting other image formats to SVG, though ideally you should use an SVG file created by the artist who designed the logo). If you need to worry about old browsers (IE 8 and older) that do not support SVG, you can perhaps set content negotiation in the server so that its sends SVG to modern browsers that announce SVG support and PNG to others. But using just SVG:

    <p style="font-family: Times New Roman">This is example text that
contains the logo
<img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em">
as an embedded SVG image. The height of the image is set to
0.7em without setting width. This means that browsers will scale
the image <img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em"> so
that is roughly of the same height as uppercase letters
and does not disturb line spacing.</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search