Jump to content


Photo

custom letters


  • Please log in to reply
8 replies to this topic

#1 mccloud

mccloud

    Forum Newcomer

  • Members
  • Pip
  • 65 posts

Posted 07 December 2017 - 09:17 AM

If I want to stylize some letters in a title, but don't want the change to be on the whole website... what would be the easiest way to do this ? 

Example: 

I want the O in a title to be custom, but not all of the Os... so a custom font won't do the job.

 

Thanks!

 

 


Edited by mccloud, 07 December 2017 - 09:18 AM.


#2 robbydesigns

robbydesigns

    Designer

  • Privileged
  • PipPipPipPipPip
  • 1,406 posts
  • Gender:Male
  • Location:Plymouth, UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 07 December 2017 - 12:33 PM

Put the letter in a <span> and give that span a class, for example <span class="funky-letter">O</span> then make it funky with CSS. 



#3 mccloud

mccloud

    Forum Newcomer

  • Members
  • Pip
  • 65 posts

Posted 07 December 2017 - 01:28 PM

sorry, my post was lacking a lot detail... 

 

1. I am working with Wordpress (the content is controlled by a content-builder in the theme)

 

2. This is what I am after... so it's a separate SVG I design in Illustrator for each character, not CSS.. 

 

Screen_Shot_2017-12-07_at_10.13.08.png



#4 BlueDreamer

BlueDreamer

    Web Guru

  • Moderators
  • PipPipPipPipPipPip
  • 7,470 posts
  • Gender:Male
  • Location:Northampton (where?)
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 07 December 2017 - 01:59 PM

Maybe use a custom field to store the data, then output it wherever you need?



#5 TimW

TimW

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • Gender:Male
  • Location:West Country
  • Experience:Intermediate
  • Area of Expertise:Nothing

Posted 07 December 2017 - 03:39 PM

I think I would be making a custom font, saving your new letter forms as extra glyphs, but I have never actually done it.



#6 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,595 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 07 December 2017 - 05:32 PM

Why not just use the image?

 

Any why even do this? Not sure it adds any value to the user.



#7 mccloud

mccloud

    Forum Newcomer

  • Members
  • Pip
  • 65 posts

Posted 11 December 2017 - 10:44 AM

Why not just use the image?

 

Any why even do this? Not sure it adds any value to the user.

 

in terms of functionality / usability no.. 

It's a portfolio website, only a stylistic thing.



#8 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,595 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 11 December 2017 - 12:20 PM

You can still have the words, just use CSS to move them off the screen



#9 robbydesigns

robbydesigns

    Designer

  • Privileged
  • PipPipPipPipPip
  • 1,406 posts
  • Gender:Male
  • Location:Plymouth, UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 11 December 2017 - 02:16 PM

As fisicx said or you could use CSS again, this time we'd have the letters of the normal font with an SVG pulled in:

 

O<span class="funky-letter-u"></span>r W<spanclass="funky-letter-o"></span>rk

then set your funky letters as background images.

 

Seems a lot of hassle to deliver a bunch of letters Google can read (O,r,W,r,k) which are nonsense anywayy. I'd go with an SVG for the whole title personally.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users