How to make English text appear the same size as Japanese text?

Question

My website includes both English and Japanese characters. The problem is that although they are defined in the same class, they look as if they are different sizes in certain environments. For example, it appears fine on my laptop in Chrome browser, but on my desktop in Chrome browser and in my iphone in Safari browser, the English text appears smaller than the Japanese text.

Below is a snippet of my code:

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

p,
fieldset,
table {
  /*so things don't run into each other*/
  margin-bottom: 1em;
}

* {
  font-size: 14px;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 5px;
}

#container-right {
  width: 490px;
  float: right;
}

p {
  font-family: Libre Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 20px;
  font-display: block;
  vertical-align: top;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "html://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <link rel="stylesheet" type="text/css" href="css.css" media="screen, projection, print" />
  <link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/services/homepage/commercial.css" />
</head>

<body>

  <div id="container-right">
  
    <p>Brown蜃蕗謗医lt;/p>
    </div>
  </body>

</html>

Changing the Japanese characters to a different, Japanese language-specific p style had no affect. The language of the html file is set to "ja," but changing it to English had no affect as well.

Please help!

Sincerely, Hanako

Steven · Accepted Answer

Solution 1

Select a font that supports both English and Japanese text. This way your text will always be the same height for your text. However, English in these fonts may be quite ugly.

Solution 2

The following steps is under the assumption that Japanese is your primary language on your page and English is secondary. Reverse the instructions below if the opposite is true.

Make sure you load a Japanese and English font into your CSS/HTML. For example, load them from
1. https://fonts.google.com/
2. https://fonts.adobe.com/
3. Your own fonts using https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts#web_fonts
Wrap all of your English text in <span class="english-text"></span>.
For your overall text, set your font family to your Japanese font.
For your .english-text class, set your font family to your English font.
Manually pick font sizes to match English and Japanese.

Explanation

This problem is because the browser cannot find a matching font from your font-family property to render Japanese text. On my Windows Chrome computer, Chrome renders the English text as Garamond but the Japanese text as Yu Gothic.

It seems that when Chrome (and perhaps other browsers as well), despite explicitly specifying font-size: 14px, Chrome will choose an appropriate font size for the different font.

To see the rendered font for some text on Chrome,

inspect the text (by right-clicking and selecting Inspect in the context menu)
Go to the "Computed" styles tab.
Scroll to the bottom to see "Rendered Fonts".

How to make English text appear the same size as Japanese text?

Tags:

html

css

cjk

Hanako

1 Answers

Steven

Recent Activity

Donate For Us

How to make English text appear the same size as Japanese text?

Tags:

html

css

cjk

Hanako

1 Answers

Steven

Related questions

Recent Activity

Donate For Us