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

Fixing font vertical height issue for multiple fonts – Photoshop

I’m creating a css theme engine and one issue I came across was vertical height issue for different fonts. I read many articles online and all addressed solution for a specific font family. But in my theme engine users can use many fonts as a selection. This vertical height issue is really painful when aligning icons and labels. So I want to know whether there is a way to achieve this.

I created a sample code in jsFiddle please check it out using this URL jsfiddle

// html
<button id="arial">
 arial
</button>

<button id="tahoma">
 helvetica
</button>

// css
#arial {
  font-family: airal;
  font-size: 1em;
  padding: 5px 10px;
}

#tahoma {
  font-family: Tahoma;
  font-size: 1em;
  padding: 5px 10px;
}

enter image description here

so as you can see I used arial and tahoma (please don’t mind the button text). you can see how text positioning and space from top and bottom has changed. pixel values are not web pixel values I just zoomed image and got the dimension in photoshop just to show the difference.

Tags:

5

Answers


  1. 0

    Well if i understand correctly you are currently using padding/margin to align an element(in your case text) vertically, so if height changes the position also changes as you were calculating the distances so you need a solution where it centers automatically itself by calculating the height. That’s what i understand.
    Well i guess you need something like top : calc(50% - 10px);

    Here’s a JSFiddle https://jsfiddle.net/xnjq1t22/

    And This link contains more hacks to align items vertically center http://jsfiddle.net/techsin/FAwku/1/

    Login or Signup to reply.
  2. 0

    Try using the line-height attribute.

    button {
  line-height:26px;
  vertical-align:middle;
}

    I set the body font-size to 16px to make sure both font families have the same size – depending on the browser 1em might be different – and removed the vertical padding from the buttons and used a line-height of +10px the body font size to get the same result.

    Bonus tip (edited): line-height cannot should not be used with input elements, just use height there instead – details after the fiddle.

    https://jsfiddle.net/5j4L2tpj/

    The reason is because in some browsers – Safari for iOS for example – the vertical alignment of text is messed up. Simple height property works as expected, perfectly aligning the text vertically – vertical padding not required in this case. To sum up, just use height on inputs, without line-height or vertical padding and get the job done as expected an all browsers/devices.

    PS You had a typo for the Arial font family.

    Login or Signup to reply.
  3. 0

    Here’s a solution:

    enter image description here

    <!-- language: lang-html -->
<button id="arial">
    <span>arial</span>
</button>

<button id="tahoma">
    <span>helvetica</span>
</button>




<!-- language: lang-css -->
#arial {
    font-family : airal;
    font-size   : 1em;
}

#tahoma {
    font-family : Tahoma;
    font-size   : 1em;
}

button {
    position : relative;
    width    : 100px;
    height   : 40px;
}

button span {
    position  : absolute;
    width     : 100%;
    left      : 0;
    top       : 50%;
    transform : translateY(-50%);
}

    Check the updated fiddle: https://jsfiddle.net/upb7cL5g/4/

    Login or Signup to reply.
  4. 0

    That is not Arial.

    You have (in the fiddle too) indicated a font-family of airal, which does not exist, and is replaced by what is probably Times Roman. The default sizes (at least on my Firefox 57) seem different to me. I’d try to reproduce the issue once you’re sure of the actual fonts involved.

    Login or Signup to reply.
  5. 0

    How about using flex?

        button {
        display: flex;
        align-items: center;
    }

    Check the cross-browser prefixes for flex

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search