Text with "f" following "i", cannot see the dot on the "i", sans font

Question

I have a Button in which there is the text "Send files", but I cant see the dot on the top of the "i". I am using the default font (which is "sans", as far as I understand, but correct me if I am wrong).

Here is the xml for my Button :

            <Button
                android:id="@+id/button_send_files"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="5dip"
                android:padding="20dip"
                android:text="Send files"
                android:textColor="@color/black"
                android:textSize="24sp"
                android:textStyle="bold" />

If someone has some sort of trick to display the dot on the "i", it would be grea, because it's ugly as it is for now...

I am using a Nexus 7, if it can help.

Answer 1

What you are seeing is a ligature glyph for the combination of 'f' + 'i' characters. Frequently, the combination of the standalone 'f' + standalone 'i' will end up in conflict: the overhanging portion of the 'f' will collide with the dot of the 'i'.

The use of a ligature glyph to represent the combination of characters allows a font designer to avoid a collision. In this case, the font designer opted to omit the dot of the 'i'. In other font designs, the dot of the 'i' will stay but the length of the overhanging portion of the 'f' will change so as to avoid a collision. If you examine some other font designs that include a ligature for 'f' + 'i' you will see these different visual treatments. As this is a font design decision, it's difficult to characterize this as a "mistake"; more like "bad design" (I agree with you that it does not look very good).

Answer 2

To disable ligatures, you can use the android:fontFeatureSettings attribute on your TextView. This attribute accepts valid values for the CSS property font-feature-settings. Here's a list of examples from the MDN. They give an example of disabling ligatures there.

Here's how you'd use it on an TextView (I've verified this works):

android:fontFeatureSettings="liga 0"

You can also do this in styles.xml:

<style name="your_text_style">
    <item name="android:fontFeatureSettings">liga 0</item>
</style>