Customizing font sizes for individual fonts within the same font family

I am designing a website in a language other than English.

This means that the text on the webpage will be a mixture of English and other languages.

In order to make sure the text displays correctly, I have set the font-family like this:

p{
font-family: 'EnglishFont', 'NonEnglishFont';
font-size:14px;
}

Everything looks good so far, but I have noticed that the original sizes of the fonts are different, which can make sentences look inconsistent when using mixed languages.

Therefore, I would like to assign different font sizes within the same CSS class. Is there a way to do this?

cssfonts

Answer №1

Adjusting font size based on the font family is not recommended.

It's better to find a font that works well for all languages on the page, as font designers usually consider different writing systems when creating fonts. Fonts designed for Asian languages often include Latin letters and are suitable for English too.

If you must set unique font properties for different writing systems, use markup like HTML's lang attributes and CSS selectors to differentiate between languages. However, it is best to avoid using multiple fonts whenever possible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bootstrap table exceeds the boundaries of the smartphone screen

I'm currently working on my first laravel project with bootstrap (https://getbootstrap.com/) and I've encountered an issue related to mobile device responsiveness. The problem arises when using a basic table in bootstrap4 (the absence of the res ...

htmlcsstwitter-bootstrap

Enhancing the appearance of unvisited links with background styles

I am endeavoring to incorporate an icon into all unvisited links on a specific Wordpress category page. Below is the CSS code that I am utilizing. It has been placed at the conclusion of my final CSS file. .category-xyzzy .entry-title a:link { background ...

css

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Click here for the picture I have a list of items: a, b, c, d, e, f. Whenever I click on item b, it becomes active and the other elements lose the "active" class. When an element has the "active" class, I want the background to change accordingly. If it ...

jqueryhtmlcssonclick

Floating a DIV causes it to shift down in a responsive layout at specific window sizes

My issue lies with a fluid layout that works well for the most part. However, at specific window widths, one of four floating div-elements unexpectedly shifts down. This inconsistency happens at nearly 20 different widths, differing by only one pixel. For ...

csshtml

Trigger a function when clicking outside the element, similar to how a Bootstrap modal is closed

I have successfully created a popup box using angular in my project. It appears when I click on an icon and disappears when I click on the close button. However, I would like it to also close if someone clicks outside of the popup. Can anyone help me with ...

javascriptcssangularjsangularjs-scopeng-show

Leveraging ajax for showcasing page content in a floating div container

I am in need of creating a button on my page that, when clicked, will display a floating div above the page and load another internal page. I believe this can be achieved using Ajax, but I have no experience with it and don't know where to start. Her ...

javascriptcssajax

Inexplicably bizarre HTML glitch

I am currently utilizing a comment system that involves adding a new row to a SQL database. The system seems to be working fine; however, when I try to display the comments, the formatting of the comment div becomes all jumbled up. You can view the page wh ...

phpsqlcsshtml

My custom style sheet not taking precedence over Bootstrap styles

Using !important is something I try to avoid as much as possible. When I downloaded Bootstrap 3.0, I made sure to include the call to the .css file AFTER my core style sheet so that any changes I make to elements like .h1, h1{} take precedence over Bootstr ...

htmlcsstwitter-bootstrap-3

Missing dots on owl carousel

Currently, I am working on a project that involves using the owlcarousel library in javascript. Everything was running smoothly until I encountered an issue. Although I have set the dots to true in the code, they are not appearing on the carousel. Below i ...

javascriptcssowl-carousel

Is it possible to comment out classes within a specified class attribute? How can this be achieved?

Is there a way to temporarily omit specific classes within HTML (<div class="" ...>)? For instance: <div data-group="group1" data-container="true" class="container-lg d-flex /* slider */ p-0"> In this s ...

htmlcss

Preventing clicks underneath in Internet Explorer with CSS overlay

I am currently working on creating an overlay that is specifically designed to display in versions of Internet Explorer lower than 9, prompting users to upgrade their browsers. The overlay and message are functioning correctly, but I am facing an issue wit ...

css

Tips for spinning a div with jQuery as it animatesRotate a div and animate it simultaneously using

Currently, I have a piece of code that enables my div element to move and change its size. $(document).ready(function(){ $("#box").animate({ top: "250px", left: "500px", width: '300px', height: '250px& ...

jqueryhtmlcssrotationjquery-animate

display information in a structured table format

I am in need of HTML code that will render headers aligned above corresponding values when displayed. header1 header2 header3 List item 1 value111 value112 value113 value121 valueb122 valueb123 List item 2 value211 value212 value213 value221 valueb2 ...

htmlcsslayout

Media queries are behaving incorrectly, causing them to trigger when regular CSS should be applied, and vice versa

When I switch to laptop/desktop view, the regular CSS styles are being overridden in the inspect element, and the query styles are taking precedence. Can anyone explain why this is happening? For instance, let's take a look at the code for the nav se ...

htmlcssbootstrap-4media-queries

How can I achieve rounded corners in Internet Explorer using JQuery?

I've tried using various plugins like curvycorners, DD_roundies, and behavior: url(ie-css3.htc);, but none of them seem to work properly. Can anyone suggest alternative methods for achieving rounded corners in IE? My website is designed to be resizabl ...

jquerycssinternet-explorerrounded-cornerscurvycorners

"Interactive Connect 4 Game in Javascript - Drop the disk into the bottom row of the chosen

Check out this awesome Connect4 game I found: http://codepen.io/anon/pen/lmFJf I have a specific goal in mind for the game. When I click on an empty space in any column, I want it to automatically drop into the lowest available spot in that column, follow ...

javascripthtmlcss

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

javascriptjquerycsscheckbox

What is the method for absolutely positioning an element with separate targets for the `left` and `right` properties?

Seeking a complex CSS result that may seem impossible. Consider the following scenario: <div class="div1"> <div class="div2"> <div class="div3"> <div class="div4"></div> ...

htmlcssflexboxpositionabsolute

Looking to implement a CSS banner image for seamless customization across multiple pages

Is it possible to change the banner image easily in the CSS without having to update every HTML page? I don't want the image source to be directly on the HTML pages. How can this be achieved? Additionally, there are already two references in the CSS: ...

htmlcss

The concept of CSS sprites and managing background positions

I have been working on integrating a star-rating widget that requires the use of a sprite file. The sprite file I am using looks like this: https://i.stack.imgur.com/ZSMMj.png This is how my HTML is structured: HTML <span id="star-ratings" class="c ...

javascripthtmlcss